通过 Google Tag Manager 使用 Google Analytics 跟踪 Angular Material 按钮点击

Question

我在 Google 跟踪代码管理器中使用 Universal Analytics 代码来跟踪用户互动。我想在 GTM 中设置点击监听器，当点击页面上的某些按钮时会触发这些点击监听器。这些按钮是 Angular Material 组件。

问题是 Angular Material 在我的按钮顶部放置了一个包装元素，由此更改了 HTML:

<button mat-raised-button type="button" class="blue l" (click)="onContinue()">CONTINUE</button>

为此:

<button _ngcontent-c20="" class="blue l mat-raised-button" mat-raised-button="" type="button">
    <span class="mat-button-wrapper">CONTINUE</span>
    <div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div>
</button>

为了获取 GTM 中的点击事件，我必须设置触发器以监听对 <span> 的点击。元素而不是 <button>元素。因此，我丢失了有关该按钮的所有识别信息；我用于 <button> 的任何 HTML id 或类未反射(reflect)在 <span> 中. GTM 无法区分单击了哪个按钮。 如何以 GTM 可见的方式唯一标识我的按钮？

注意:使用按钮文本(<span> 的内部 HTML)识别按钮不是一种选择，因为我在页面上有多个具有相同文本的按钮。

Answer 1

我遇到了这个问题，最后找到了解决方案:

Google 跟踪代码管理器中的解决方案:

启用变量类型的点击元素。

创建两个触发器:

1) 触发器类型:点击所有元素，一些点击，点击 ID - 等于 - “your-id”

2) 触发器类型:点击所有元素、一些点击、点击元素 - 匹配 CSS 选择器 - “button#your-id span”(见图)

然后在你的Tag中设置两个触发器，一个触发1，第二个触发2。