Я использую тег Universal Analytics в Google Tag Manager для отслеживания взаимодействия с пользователем. Я хочу настроить прослушиватели кликов из GTM, которые будут срабатывать при нажатии определенных кнопок на странице. Кнопки являются компонентами углового материала.
Проблема в том, что 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>. Таким образом я теряю всю идентифицирующую информацию о кнопке; Любой HTML-идентификатор или класс, который я использую для <button>, не отражается в <span>. GTM не может определить, какая кнопка была нажата. Как я могу однозначно идентифицировать мою кнопку так, чтобы она была видна GTM?
Примечание. Идентифицировать кнопку с помощью текста кнопки (внутренний HTML-код <span>) нельзя, поскольку у меня на странице несколько кнопок с одним и тем же текстом.