div样式变更场景下如何配置GTM元素可见性触发器监听轮播图曝光

因为你站点的轮播切换仅修改transform属性、无DOM结构变更，默认的元素可见性触发器无法捕获该变更，可按以下4步配置实现需求： #

步骤1：创建自定义JS变量获取轮播位移值 #

该变量用于实时读取轮播容器的水平位移数值，判断当前展示的轮播图索引：

1. 进入GTM后台，新建「用户定义的变量」，类型选择「自定义JavaScript」
2. 填入以下代码：

function() {
  var carousel = document.querySelector('.c-carousel__slides.row.no-gutters');
  if (!carousel) return 0;
  var transformVal = carousel.style.transform || '';
  var matchRes = transformVal.match(/translateX\((-?\d+)px\)/);
  return matchRes ? parseInt(matchRes[1], 10) : 0;
}

3. 保存变量，命名为「轮播容器X轴位移值」（可自定义名称，后续步骤要对应）

步骤2：添加属性变更监听器 #

通过MutationObserver监听轮播容器的style属性变更，轮播切换时自动推送自定义事件到dataLayer：

1. 新建「自定义HTML」标签，填入以下代码：

<script>
(function() {
  var carousel = document.querySelector('.c-carousel__slides.row.no-gutters');
  if (!carousel) return;
  // 监听style属性变更
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(item) {
      if (item.attributeName === 'style') {
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
          event: 'carousel_slide_view',
          current_transform_x: {{轮播容器X轴位移值}}
        });
      }
    });
  });
  observer.observe(carousel, { attributes: true });
  // 页面加载时触发首屏轮播图上报
  window.dataLayer.push({
    event: 'carousel_slide_view',
    current_transform_x: {{轮播容器X轴位移值}}
  });
})();
</script>

2. 该标签的触发条件选择「DOM Ready」，保存标签

步骤3：配置触发器 #

根据你的触发需求新建对应触发器：

通用触发（所有轮播图展示都触发） #

• 新建触发器，类型选择「自定义事件」
• 事件名称填入carousel_slide_view
• 触发条件选择「所有自定义事件」即可

单张轮播图单独触发 #

如果需要给不同轮播图配置不同的触发规则，可在上述触发器基础上添加附加条件：

• 例如第一张轮播图（位移为0）触发：{{轮播容器X轴位移值}} 等于 0
• 第二张轮播图（位移为-608）触发：{{轮播容器X轴位移值}} 等于 -608
• 后续轮播图按你的位移值依次配置即可

步骤4：验证&发布 #

1. 进入GTM预览模式，切换轮播图，确认dataLayer中会推送carousel_slide_view事件，且current_transform_x数值和轮播切换同步
2. 验证无误后发布GTM容器即可

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