如何通过GTM在Shopify产品页实现图片曝光追踪？

一、确认PDP图片DOM选择器 #

先在Shopify产品详情页打开浏览器控制台，定位产品图片的容器元素。大部分主题的图片项会有类似product__media、product-image-item的类名，比如用document.querySelectorAll('.product__media-item')测试是否能选中所有产品图，记好这个选择器，后续JS要用到。

二、编写自定义可见性监听JS（注入Shopify或GTM） #

用Intersection Observer API监听图片进入视口的事件（比滚动监听性能更优），确保每张图只触发一次追踪事件。代码示例：

// 初始化观察者配置
const observerOptions = {
  root: null, // 视口作为根元素
  rootMargin: '0px',
  threshold: 0.5 // 图片50%进入视口时触发
};

// 监听回调函数
function handleImageIntersection(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const imageElement = entry.target;
      // 计算图片序号（从1开始）
      const imageIndex = Array.from(document.querySelectorAll('.product__media-item')).indexOf(imageElement) + 1;
      
      // 向GTM发送自定义事件
      window.dataLayer.push({
        event: 'pdp_image_view',
        pdp_image_index: imageIndex,
        pdp_product_id: '{{ product.id }}' // Shopify liquid变量，直接在主题模板里用
      });
      
      // 停止监听当前图片，避免重复触发
      observer.unobserve(imageElement);
    }
  });
}

// 创建观察者并绑定到所有产品图片
const imageObserver = new IntersectionObserver(handleImageIntersection, observerOptions);
document.querySelectorAll('.product__media-item').forEach(img => {
  imageObserver.observe(img);
});

• 若不想修改Shopify主题代码，可把这段代码放到GTM的自定义HTML标签里，触发条件设为DOM Ready且页面是产品详情页（用GTM内置变量Page Path匹配PDP路径，比如/products/*）。
• 注意：如果主题是轮播式图片（点击切换而非滚动），需额外监听轮播的切换事件（比如主题自带的slideChange类事件），切换时发送事件，逻辑类似上面的imageIndex计算。

三、GTM配置触发器 #

1. 新建自定义事件触发器，事件名称填pdp_image_view，触发条件设为所有事件（或按需添加PDP页面过滤）。

四、GA事件标签配置（以GA4为例） #

1. 新建GA4事件标签，配置如下：
   • 事件名称：pdp_image_viewed
   • 事件参数：
     • image_index：{{pdp_image_index}}（提前在GTM新建对应数据层变量）
     • product_id：{{pdp_product_id}}（同样新建数据层变量）
2. 触发条件选择刚才创建的pdp_image_view触发器。

五、GA后台配置分析维度 #

1. 在GA4后台的自定义定义里新建自定义维度：
   • 维度名称：PDP Viewed Image Count
   • 事件参数：image_index（也可在JS里维护全局变量记录用户查看的最大图片序号，再传递给GA）
2. 后续在GA的探索模块：
   • 计算平均查看图片数量：用image_index的平均值指标
   • 分析转化率差异：创建细分受众（查看2张图的用户、查看3张图的用户），对比他们的购买转化率

六、测试验证 #

1. 开启GTM预览模式，进入PDP页面滚动/切换图片，查看数据层是否正确推送pdp_image_view事件。
2. 打开GA4实时报告，确认pdp_image_viewed事件是否正常接收。

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