点击元素及其子元素时获取父元素属性的GTM配置问题

问题场景 #

配置了GTM标签，通过元素的data-category和data-action属性填充事件跟踪参数：

• 点击不带子元素的目标元素（比如 <a class="js_gtm_test" data-category="Test" data-action="view"></a>）时，标签正常触发且参数赋值正确。
• 点击目标元素内部的子元素（比如 <a class="js_gtm_test" data-category="Test" data-action="view"><b>TEST</b> the rest of a link</a> 里的 <b> 标签）时，要么标签不触发，要么触发后取不到正确的属性值（因为子元素没有对应的data-*属性）。

解决方案 #

步骤1：创建自定义JS变量，向上查找父元素属性

在GTM后台创建两个自定义JavaScript变量，分别提取父元素的data-category和data-action：

• 变量1：命名为获取父元素data-category

function() {
  var clickedEl = {{Click Element}};
  // 向上遍历DOM，定位带js_gtm_test类的父元素
  while (clickedEl && !clickedEl.classList.contains('js_gtm_test')) {
    clickedEl = clickedEl.parentNode;
  }
  // 返回匹配到的属性值，无匹配则返回空字符串
  return clickedEl ? clickedEl.getAttribute('data-category') : '';
}

• 变量2：命名为获取父元素data-action，将上述代码中的data-category替换为data-action即可。

步骤2：调整触发器匹配规则

将触发器的点击元素匹配规则设置为CSS选择器：.js_gtm_test, .js_gtm_test *，确保点击目标元素及其所有子元素时，触发器都能触发标签。

步骤3：替换标签的参数赋值源

在GTM标签的「Event Tracking Parameters」配置中，把原本直接引用点击元素属性的位置，替换为刚创建的两个自定义变量：

• Category字段选择获取父元素data-category变量
• Action字段选择获取父元素data-action变量

验证方法 #

开启GTM预览模式，点击目标元素的子元素，检查标签是否正常触发，同时查看自定义变量的取值是否与父元素的data-*属性一致。

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