在Google Tag Manager和React/Next中复制脚本

nkkqxpd9  于 2023-08-04  发布在  Go
关注(0)|答案(1)|浏览(119)

所以,我目前第一次使用Google Tag Manager和React + Next.js,这证明了一个有趣的体验,因为我没有大量使用GTM,React更少,但这不一定是一个糟糕的体验,我正在逐渐找出细微差别。
然而,我不得不使用GTM添加一些自定义元素到一个网站,因为它使用了一套平台和CMS,我不能改变。我最初有一个问题,即在历史更改时删除元素,因为React不会将其视为新的页面加载,因此通过GTM添加的元素将被删除,但标签不会再次触发。
我已经设法使用数据层来使它,使标签将触发时,他们需要在一个历史的变化,所以元素得到添加回来。但有一件事我还没有能够弄清楚,虽然是停止这些标签得到注入多次到网站。
为了详细说明,在最初到达网站时,我的标签脚本将被加载:
GTM scripts on site load
但是,如果我导航到另一个页面,那么历史更改将再次触发标记并再次加载内容。但它也会再次将脚本添加到页脚中,我最终会得到重复的脚本,因为React站点会更改主体,但页眉和页脚代码仍然存在,我最终会得到重复的脚本标签,然后在每次历史更改中,它都会反复发生。
GTM scripts duplicated upon history change
(Note:我在屏幕截图中隐藏了几行代码,因为它泄露了一些可能破坏NDA的细节。
我试着使用标签触发选项(每页一次,每个事件一次,等等),看看这是否有帮助,但没有。因此,我不确定如何让这些标记在应该触发的时候触发,而不是一次又一次地注入脚本。
有没有可能在不再次注入代码的情况下触发标记?我错过了什么明显的东西吗?
任何帮助或见解将不胜感激。

xn1cxnb4

xn1cxnb41#

最后我想出了自己的解决办法。我给所有被注入的自定义脚本一个以“gtmScript”开头的ID,然后当历史发生变化时,脚本在再次注入之前被删除。这将停止脚本的重复:

var gtmScriptTag = document.querySelectorAll("[id^='gtmScript']");
var i = 0;

while (i < gtmScriptTag.length) {
    gtmScriptTag[i].remove();
    i++;
}

字符串
可能不是最稳健的做事方式,但它有效,现在我可以继续前进。

相关问题