通过Google跟踪代码管理器使用Google Analytics（分析）对Angular Material按钮单击进行跟踪

Question

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

问题是Angular Material在我的按钮上方放置了一个 wrapper元素，从而更改了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）来标识按钮不是一种选择，因为我在页面上有多个具有相同文本的按钮。

Answer 1

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

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

启用变量类型的Click元素。

创建两个触发器：

1）触发类型：点击所有元素，部分点击，点击ID-等于-“您的ID”

2）触发类型：点击所有元素，部分点击，点击元素-匹配CSS选择器-“ button＃your-id span”（参见图片）

然后在代码中设置两个触发器，一个触发1，第二个触发2。

Answer 2

我建议使用data属性将跟踪与其他代码分开，例如：

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

并使用如下所示的GTM触发器： 单击元素->匹配CSS选择器-> [数据-gtm-继续按钮]，[数据-gtm-继续按钮] *

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

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

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