使用 Google 标签管理器在页面 DOM 中插入自定义 HTML

Question

我已经在我的网站上实施了 GTM。我想知道是否可以在 DOM.

的特定位置添加自定义 HTML/JS

这是我在页面中插入的内容：

<div class="myClass">
    <p>foo</p>
    <script>
        dataLayer.push({'event':'myEvent'})
    </script>   
</div>

我在 GTM 上设置了一个标签 html:

<div class="test">this is a test</div>
<iframe src="www.foo.com" />

在 myEvent.

上触发

不幸的是，这不能正常工作，我的标签被插入到我的网页底部而不是 myClass div.

中

我是做错了什么还是 GTM 不允许这样做？

谢谢。

Answer 1

"Not allowed" 可能有点强（你可以看到它在某种程度上起作用），但通常不推荐改变页面视觉方面的标签。

如果您想在特定位置插入 HTML，最好通过 javascript 动态创建元素并将其附加到现有元素，因此您的 HTML 标记看起来像（未经测试）：

<script>
var myDiv = document.createElement('div');
myDiv.setAttribute('class','test');
var container = document.querySelector('.myClass');
container.append(myDiv);
</script>

您需要确保追加的元素是唯一的（如果可能，请添加 ID 而不是 class 名称）。标签是异步执行的，所以很难说 HTML 是在加载过程中的哪一点附加的（这会导致 DOM 中的回流，这对客户端来说是一个昂贵的操作，所以你不想经常这样做）。

使用 Google 标签管理器在页面 DOM 中插入自定义 HTML

Insert custom HTML in page DOM with Google Tag Manager

google-tag-manager