Google Tag Manager获取点击指定类元素innerHTML变量返回undefined问题

• 拼写错误：JS 数组遍历方法为驼峰命名的forEach，全小写的foreach会抛出方法未定义错误，直接终止代码运行。
• 属性获取错误：事件回调的入参event是事件对象，本身不存在innerHTML属性，需要先获取触发事件的DOM元素（推荐用event.currentTarget，指向绑定监听的元素，可避免点击元素内部子节点时取值错误），再调用该元素的innerHTML属性。
• 返回值无效：事件回调函数内的return值无法被GTM捕获，需要将值推入dataLayer，或者直接使用GTM原生的点击变量/触发器实现需求，无需手动绑定事件监听。

无需自己写绑定事件的代码，直接用GTM自带的点击触发逻辑即可实现，步骤如下：

1. 配置内置变量：进入GTM后台「变量」界面，在「内置变量」板块点击「配置」，勾选Click Element、Click Classes两个内置变量。
2. 新建点击触发器：
   • 触发器类型选择「点击 - 所有元素」
   • 触发条件选择「部分点击」
   • 条件规则设置为：Click Classes 包含 myclass
3. 新建返回innerHTML的自定义变量：
   新建类型为「自定义JavaScript」的变量，写入以下代码：

   function() {
     return {{Click Element}}.innerHTML;
   }
   

完成配置后，只要你设置的点击触发器触发，这个变量就会自动返回被点击的.myclass元素的innerHTML，可在对应标签中直接调用该变量。

如果有特殊场景必须手动绑定事件监听，可使用以下代码，将点击结果推入dataLayer供GTM取值：

document.querySelectorAll(".myclass").forEach(function (item) {
  item.addEventListener("click", function(event) {
    dataLayer.push({
      event: 'myclass_clicked',
      clicked_innerHTML: event.currentTarget.innerHTML
    });
  })
})

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