查询 Datalayer 以及如何在 CustomHTML 中 运行

Question

我有下面的 javascript 代码，我从 HTML 元素中提取目标 URL 和 Alt 属性，并尝试将值推送到数据层中。

我已经使用控制台测试了代码，它正在提取所需的值。我主要关心的是我们如何推送数据层中的值。我是否需要修改代码才能通过 GTM 在自定义 HTML 中 运行？

var divHead= document.getElementsByClassName('card__media-overlapping__media');
var eventhandlerdoc = function(event){
    var imgURL=event.currentTarget.firstElementChild;
    var imgALT=event.currentTarget.firstElementChild.firstElementChild.getAttribute('alt');

dataLayer = [];
     dataLayer.push({
            'expImgurl': imgURL,
            'expImgalt': imgALT

}

for(var index=0; index < divHead.length; index++){

divHead[index].addEventListener('click',eventhandlerdoc,true);}

Answer 1

如果您的代码在 GTM 片段之后执行（因为 GTM 使用自定义代码修改了 dataLayer 的 push 方法并添加了几个事件），那么您的代码将破坏 GTM。所以你需要确保它在代码片段之前执行，或者检查 dataLayer 是否被初始化并重新使用它：

window.dataLayer = window.dataLayer || [];

此外，变量只有在下一个事件被推送到数据层后才可用，因此您要么需要推送自定义事件，要么等到下一个 (GTM) 事件再使用它们。

并且由于 GTM 有自己的点击处理程序，我建议您使用它并移动 javascript 代码以将属性检索到自定义 javascript 变量。