如何在GTM中追踪含data-type属性无Class/ID元素的点击事件

核心思路 #

利用属性选择器定位所有带data-type属性的视图切换元素，在点击事件中提取该属性的值，以此区分用户点击的是列表/网格/表格视图，再执行对应的事件追踪逻辑。

原生JavaScript实现 #

// 选中所有带data-type属性的视图切换按钮
const viewSwitches = document.querySelectorAll('[data-type]');

// 为每个按钮绑定点击事件
viewSwitches.forEach(switchBtn => {
  switchBtn.addEventListener('click', function() {
    // 获取当前点击的视图类型
    const selectedView = this.getAttribute('data-type');
    
    // 这里替换成你的实际追踪逻辑（比如发送到统计平台）
    console.log(`触发视图切换：${selectedView}`);
    
    // 示例：Google Analytics 4 事件上报
    // gtag('event', 'view_type_change', {
    //   'view_type': selectedView
    // });
  });
});

jQuery实现（如果项目使用jQuery） #

// 绑定点击事件到所有带data-type属性的元素
$('[data-type]').on('click', function() {
  const selectedView = $(this).data('type');
  
  // 执行追踪逻辑
  console.log(`触发视图切换：${selectedView}`);
  
  // 示例：Google Analytics 传统事件上报
  // ga('send', 'event', '视图切换', '切换操作', selectedView);
});

注意事项 #

• 确保data-type属性的值唯一且明确（比如对应list/grid/table），这样追踪时能清晰区分不同视图。
• 可根据项目使用的统计工具（如百度统计、友盟等），替换示例中的上报代码。

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