如何在 Google Tag Manager 中跟踪自定义 JavaScript 事件？

Question

我有一个自定义 JS 事件，当手风琴面板打开时会触发。我想以面板 ID 作为事件标签跟踪作为 Google Analytics 事件的开放。

使用旧的非 GTM 方法，我会这样做：

$('#my-accordion').on('down.zf.accordion', function(e, panel) {
  ga('send', 'event', 'accordion', 'open', panel.attr('id'));
});

但我想用谷歌标签管理器来做到这一点，并尽可能减少页面代码的变化。

到目前为止，我已经在 Google 标签管理器中创建了这个：

Trigger，键入在“down.zf.accordion”上触发的自定义事件

标记，使用我的跟踪 ID 键入 Universal Analytics，跟踪类型：事件（手风琴，打开，[可能是设置为 panel.attr('id')?] 的全局 JS 变量）

但在 GTM 预览版中进行测试时，该代码甚至不会触发。我究竟做错了什么？

Answer 1

另一种解决方案是使用自定义 HTML 侦听器标记，您可以将其设置为在指定页面上侦听（例如，页面上有手风琴的任何位置）。该标签看起来像这样，并且需要推送 dataLayer 事件和值：

$('#my-accordion').on('down.zf.accordion', function(e, panel) {
   dataLayer.push({
      'event': 'accordion open',
      'category: 'accordion',
      'action': 'open',
      'label': panel.attr('id');
   })
});

（请注意，我还没有对此进行测试，因为我无法访问 Zurb 基金会手风琴 - 假设这就是您正在使用的）。

然后，您的事件标记可以从事件“accordion open”中触发，并且您的事件类别、操作和标签将从 dataLayer 变量中获取。