触发后如何从 DOM 中删除自定义 GTM HTML 标签？答案

【问题标题】：How to remove Custom GTM HTML Tags from DOM after firing?触发后如何从 DOM 中删除自定义 GTM HTML 标签？
【发布时间】：2018-01-15 12:18:11
【问题描述】：

对于单页应用程序，我想知道是否可以在触发后从 DOM 中删除自定义 gtm html 标记。这背后的想法是通过自定义脚本避免 DOM 无法控制的增长。

【问题讨论】：

标签： javascript google-tag-manager

【解决方案1】：

我在最近的一个项目中遇到了同样的问题。但是，我还没有找到任何“本机”解决方案，主要是因为每个可以使用 GTM 注入的 Tag 都可以以完全不同的方式注入代码。

我为这个项目所做的是实现一个相当简单的解决方案（即使不是完美的），它包括：

为 GTM 中的每个“自定义标签”包含一个唯一 ID，并带有一个可以存储在变量 (SCRIPT_ID) 中的通用前缀。 CSS 类会更好，但 GTM 似乎完全忽略了它们。

<script id="{{SCRIPT_ID}}__PIXEL_ID">
    ... custom code ...
</script>

创建一个函数，用于搜索和删除<body> 标记（GTM 注入标记的位置）内的任何脚本，其 ID 以前一个前缀开头。

function flushScripts() {
    const pixels = document.body.querySelectorAll(':scope > script[id^="SCRIPT_ID"]');
    for (const p of pixels) { document.body.removeChild(p); }
}

每次路线更改或每次您认为合适时执行该函数。

【讨论】：