通过Google Tag Manager使用Google Analytics单击角度材质按钮跟踪

Question

我正在使用Google tag Manager中的Universal Analytics标签跟踪用户交互。我想在GTM中设置单击侦听器，当在页面上单击某些按钮时，这些侦听器将启动。按钮是有角度的材质组件。

问题是Angular Material将包装器元素放在my按钮的顶部，从而改变了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中拾取点击事件，我必须设置触发器来监听点击

注意：使用按钮文本（




Answer 1

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

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

并使用如下GTM触发器：单击元素-

在您的情况下，如果您不想使用数据格式，也可以将CSS选择器调整为以下值：

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

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

Answer 2

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

Google Tag Manager中的解决方案：

启用变量类型单击元素。

创建两个触发器：

1）触发类型：点击-所有元素，一些点击，点击ID-等于-"你的ID"

2） 触发器类型：单击所有元素，一些单击，单击元素-匹配CSS选择器-“按钮#您的id跨度”（见图）

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