html - 谷歌标签管理器选择所需元素内的元素

Question

我正在尝试根据元素的 ID 触发标签。HTML 包含一张卡片，里面有其他元素。最外层的父 div 包含我想用 GTM 跟踪的 ID。当我运行 GTM 预览并单击元素时，触发器不会触发，当我单击以展开 GTM 中的单击详细信息时，它显示我单击了卡片内的元素，而不是 ID 为“卡片”的元素-1”。然而，当我将 移动id="card-1"到卡内的 img 时，我能够让元素触发，并确保我点击了 img。

我将触发器配置为在包含“card-1”的“点击 ID”上触发。

当用户单击卡片内的任何位置时，如何触发触发器？

HTML：

  <div class="card-container cursor-pointer" (click)="cardClick()" id="card-1">
    <img class="img-p" src="{{ selected?.image }}">
    <div class="headline title">{{selected?.title}}</div>
    <div class="paragraph body">{{selected?.body}}</div>
    <div class="link body">Learn more</div>
    <div class="container">
      <div class="report-modal-container">
        <p>Sample text
        </p>
      </div>
      <img src="assets/pic.png">
      <div class="small"> Other text</div>
    </div>
  </div>

标签： htmlgoogle-tag-manager

Answer 1

您可以将 cardClick() 修改为...

  <div class="card-container cursor-pointer" (click)="cardClick(this)" id="card-1">

然后修改cardClick到...

function cardClick(e){
 //include the rest of your own code
 
 //push card-click event along with id to dataLayer to consume in GTM
 dataLayer.push({
    'card-id': e.target.id
    'event':'card-click'
 })

}

然后在 GTM 中，设置这个变量来捕获卡 id，默认值是可选的：

然后设置这个触发器：

现在你应该可以在任何你想要的标签中使用它了。GA 事件示例：