Google标记管理器在所需元素中选择元素

Question

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

我将触发器配置为在包含“card-1”的“Click 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>

Answer 1

你可以修改你的cardhtml（）到类似于...

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

然后修改卡点击到...

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'
 })

}