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

【问题标题】：Angular Material button click tracking using Google Analytics via Google Tag Manager通过 Google Tag Manager 使用 Google Analytics 进行 Angular Material 按钮点击跟踪
【发布时间】：2019-08-02 08:56:55
【问题描述】：

我正在使用 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 或类都不会反映在<span> 中。 GTM 无法区分单击了哪个按钮。 如何以对 GTM 可见的方式唯一标识我的按钮？

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

【问题讨论】：

Ian，我在使用 GTM 和 Angular Material 时遇到了同样的问题。我正在尝试使用 HTML 数据属性来发送额外的数据，我正面临这个问题。你找到解决办法了吗？

标签： angular google-analytics angular-material google-tag-manager

【解决方案1】：

我建议使用数据属性将跟踪与其他代码分开，如下所示：

<button data-gtm-continue-button>...</buttton>

并像这样使用 GTM 触发器：点击元素 -> 匹配 CSS 选择器 -> [data-gtm-continue-button], [data-gtm-continue-button] *

如果您不想使用数据属性，您也可以将 CSS 选择器调整为以下内容：

button#my-button, button#my-button *

这使用了 css 选择器 *，这意味着选择器中的任何元素。

【讨论】：

【解决方案2】：

我遇到了这个问题，终于找到了解决办法：

谷歌标签管理器中的解决方案：

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

创建两个触发器：

1) 触发类型：Click-All Elements, Some Clicks, Click ID - equals - "your-id"

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

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

【讨论】：