Angular Material 使用 Google Analytics 通过 Google 标签管理器跟踪按钮点击

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

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

Answer 1

我运行遇到了这个问题，终于找到了解决方案：

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

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

创建两个触发器：

1) 触发类型：点击-所有元素，部分点击，点击 ID - 等于 - "your-id"

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

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

Answer 2

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

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

并像这样使用 GTM-Trigger：单击元素 -> 匹配 CSS 选择器 -> [data-gtm-continue-button]、[data-gtm-continue-button] *

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

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

这使用了 css 选择器 * 表示选择器中的任何元素。

Angular Material 使用 Google Analytics 通过 Google 标签管理器跟踪按钮点击

Angular Material button click tracking using Google Analytics via Google Tag Manager

google-analytics

google-tag-manager

angular-material

angular