在数据层上查询以及如何在自定义 HTML 中运行

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

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

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

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