在开发人员的帮助下,我们将数据属性附加到了所有我们想要跟踪的元素上,但是在下面的代码中,单击会落在a标签上,但我想从p标签中获取数据属性.

 <main id="content" class="page__content">  
  <div class="app-container page__content__wrapper">
   <div class="page_content_block">
    <p data-mng="mian-forgot-primary">
     <a href="https://homepage.com">Text about the homepage</a>
   </p>
  </div>
 </div>
</main>

以下功能在控制台(浏览器和Chrome)中工作.我在模拟用户在网站上点击链接时的点击.这个函数的作用是:在DOM中查找p标签,并从中提取属性数据mng.在控制台中,我得到了我想要的"主要"值的输出.

$0.addEventListener('click', (e) => {
 e.preventDefault();
const a = e.target.closest('p');
const mng = a.getAttribute('data-mng');
console.log(mng);
});

然后,我try 在Google Tag Manager中将其作为一个函数实现为一个自定义javascript变量,并使用以下函数.当在谷歌标签管理器中预览并点击链接(之前的模拟)时,我只得到了"未定义"的值,我不明白为什么它对我不起作用?

看着这些文件,我觉得.函数"traverses the element and its parents until it finds a node that matches the provided selector string"

function(){
 var gtmMng = event.target.closest('p').getAttribute('data-mng');
 return gtmMng;
}

推荐答案

GTM不会给你在正常事件回调中遇到的典型事件.相反,您必须转到内置的GTM变量并启用Click元素变量.然后您可以像使用事件一样使用它.点击触发时的目标.

还可以使用GTM preview variables调试器来确保您没有遇到计时问题.但是,使用click规则不太可能出现这种情况,因此在启用click元素var之后,下面的代码应该可以工作.

function(){
 return {{Click Element}}.closest('p').dataset.mng;
}

Javascript相关问答推荐

复合密钥查找在mongoDB中未按预期工作

如何在react + react路由域名中使用DeliverBrowserRouter?

如何expose 像React在onChange、onClick等中所做的那样的参数?

Angular material 表多个标题行映射

为什么在获取回调内设置状态(不会)会导致无限循环?

为什么我达到了时间限制!?LeetCode链接列表循环(已解决,但需要解释!)

zoom svg以适应圆

在Vite React库中添加子模块路径

google docs boldText直到按行执行应用脚本错误

更改JSON中使用AJAX返回的图像的路径

处理时间和字符串时MySQL表中显示的日期无效

为什么Mutations 观察器用微任务队列而不是macrotask队列处理?

如何将Cookie从服务器发送到用户浏览器

Next.js服务器端组件请求,如何发送我的cookie token?

类构造函数不能在没有用With Router包装的情况下调用

使用插件构建包含chart.js提供程序的Angular 库?

<;img>;标记无法呈现图像

与svg相反;S getPointAtLength(D)-我想要getLengthAtPoint(x,y)

如何使用Astro优化大图像?

在Java脚本中录制视频后看不到曲目