Google跟踪代码管理器和角度材料按钮

Question

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

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

如果我单击“填充”区域，则一切正常。

但是，如果我单击蓝色的位，则不会。 如果我查看调试器，则可以看到触发了click事件，但是没有触发任何标记，如果检查变量，则可以看到内部范围的单击：

是否有一种方法可以强制执行此操作？我认为使用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时，自定义事件将触发并正确记录：