元素ID动态变化时如何在GTM中使用元素可见性触发器

第一步：先修正Angular模板的绑定问题 #

你当前贴的模板存在一个基础错误：id="ad.adid" 是静态属性绑定，最终渲染出来所有广告容器的ID都会是固定字符串ad.adid，不会读取广告对象里的adid动态值。
首先修改广告容器的模板，给所有广告项加统一的标识类、绑定动态广告属性，方便GTM统一匹配，不需要依赖固定ID：

<div *ngFor="let ad of advertisementsArray">
 <!-- 修正ID绑定，加统一GTM识别类，绑定广告属性到data属性方便上报 -->
 <div [id]="ad.adid" class="card gtm-ad-item" data-ad-id="{{ad.adid}}" data-ad-title="{{ad.adtitle}}">
   <span class="tag">ad</span>
   <h5 class="card-header">{{ad.adtitle}}</h5>
   <img [src]="ad.imageLink" class="card-img-top" alt="...">
   <div class="card-body" data-bs-toggle="tooltip" data-bs-placement="bottom"
      title="{{ad.addescription}}">
      <p class="card-text">{{ad.addescription}}</p>
  </div>
</div>
</div>

第二步：配置GTM元素可见性触发器（无需固定ID） #

GTM元素可见性触发器本身支持CSS选择器匹配，不需要强制填固定元素ID，配置步骤如下：

• 进入GTM容器，新建「元素可见性」类型触发器
• 「选择方法」下拉项从默认的「ID」切换为CSS选择器
• 选择器输入框填统一标识类：.gtm-ad-item
• 根据你的曝光统计规则配置触发条件：
  • 可见性阈值：比如要求广告露出50%才算有效曝光，就填50
  • 最低可见时长：比如要求广告连续露出1秒才算有效曝光，就填1000（单位为毫秒）
  • 触发频率：如果单页面访问内同一条广告只统计一次曝光，就勾选「每个页面访问中，每个选定元素仅触发一次」；如果需要统计用户反复滑动看到同一条广告的多次曝光，就选「每次元素在屏幕上可见时触发」
• 高级设置里保持「观察DOM变更」选项为勾选状态，会自动监听Angular动态渲染、懒加载出来的广告元素，不需要额外写代码推送事件。

第三步：配置变量捕获动态广告参数 #

要区分不同广告的曝光数据，需要配置变量抓取当前触发曝光的广告属性：

• 先在GTM「变量」-「内置变量」配置里，勾选所有和「可见元素」相关的内置变量
• 新建自定义变量，类型选「元素属性」，属性名填data-ad-id，命名为可见广告ID，触发器触发时会自动抓取当前曝光广告的adid值
• 用同样方法新建变量，分别抓取data-ad-title等你需要上报的广告属性即可。

第四步：关联上报代码 #

• 新建你需要的上报代码（比如GA4事件代码、广告平台转化上报代码）
• 事件名统一设为ad_impression（可根据你的上报规范自定义）
• 事件参数中映射之前建好的广告属性变量，比如参数ad_id对应可见广告ID变量
• 触发条件选择之前配置的元素可见性触发器，进入GTM预览模式验证：滑到对应广告位置时能正常触发事件、参数值正确，即可发布容器。

注意：不要尝试用ID前缀匹配（比如[id^="ad"]）的方式选元素，容易误匹配页面其他非广告元素，稳定性远不如统一自定义类的方案。

内容的提问来源于stack exchange，提问作者Virantha Dasanayake