Google 标签管理器和 angular material 按钮

Question

我有一个奇怪的问题。我在 Google 跟踪代码管理器中创建了一个代码和触发器，如下所示：

如果我点击边缘的按钮，它会触发正确的事件，但如果我点击中间的按钮，它不会。这是一张图片来说明：

如果我单击“填充”区域，一切都会按预期进行。

但是，如果我单击蓝色的位，它不会。如果我查看调试器，我可以看到触发了一个点击事件，但没有触发任何标签，如果我检查变量，我看到它捕获了内部跨度的点击：

有什么方法可以强制它工作吗？我认为使用 CSS 选择器 button[data-category] 就足够了。

Answer 1

这是一个需要解决的恼人问题。最后，我的做法是使用 DataLayer 和变量。我基本上创建了一个服务：

import { Injectable } from '@angular/core';

declare global {
  interface Window {
    dataLayer: any[];
  }
}

@Injectable({
  providedIn: 'root',
})
export class TagManagerService {
  constructor() {
    window.dataLayer = window.dataLayer || [];
  }

  public engage(action: string, label: string, value: string) {
    window.dataLayer.push({
      event: 'engage',
      category: 'engage',
      action,
      label,
      value,
    });
  }
}

然后每次我点击一个按钮；在 Click 方法中我会做这样的事情：

this.tagManager.engage('video play', 'Sizzle video', 'play');

这意味着像这样在跟踪代码管理器中设置自定义事件：

然后我创建了一个标签（点击按钮）

为了完整起见，这是我的用户定义变量的样子：

现在，当我单击 button 时，自定义事件会触发并被正确记录：

Google 标签管理器和 angular material 按钮

Google tag manager and angular material buttons

google-tag-manager