javascript - Datalayer上的查询以及如何在CustomHTML中运行

Question

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

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

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(因为 GTM 使用自定义代码修改了 dataLayer 的推送方法并添加了多个事件)。因此，您需要确保在代码片段之前执行此操作，或者检查 dataLayer 是否已初始化并重用它:

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

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

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