Отслеживание нажатия кнопки Angular Material с использованием Google Analytics через Google Tag Manager
Я использую тег Universal Analytics в Диспетчере тегов Google для отслеживания взаимодействия с пользователем. Я хочу настроить прослушиватели кликов из 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>. Таким образом, я теряю всю идентифицирующую информацию о кнопке; Любой идентификатор HTML или класс, который я использую для <button>, не отражается в <span>. GTM не может определить, какая кнопка была нажата. Как я могу однозначно идентифицировать свою кнопку так, чтобы она была видна GTM?
Примечание. Идентификация кнопки с помощью текста кнопки (внутренний HTML-код <span>) невозможна, поскольку у меня есть несколько кнопок на странице с одним и тем же текстом.
Ответы 2
Я столкнулся с этой проблемой и, наконец, нашел решение:
Решение в Диспетчере тегов Google:
Включить элемент Click с переменным типом.
Создайте два триггера:
1) Тип триггера: Click-All Elements, Some Clicks, Click ID - равно - "your-id"
2) Тип триггера: Click-All Elements, Some Clicks, Click Element — соответствует селектору CSS — «button#your-id span» (см. изображение)
Затем в вашем теге установите два триггера, один для триггера 1, второй для триггера 2.
Я бы рекомендовал использовать атрибут данных, чтобы отделить отслеживание от другого кода, например:
<button data-gtm-continue-button>...</buttton>
и используйте GTM-триггер следующим образом: Нажмите «Элемент» -> соответствует селектору CSS -> [data-gtm-continue-button], [data-gtm-continue-button] *
В вашем случае, если вы не хотите использовать атрибуты данных, вы также можете просто настроить свой селектор CSS на следующее:
button#my-button, button#my-button *
это использует селектор css *, что означает любой элемент в селекторе.
Ян, у меня такая же проблема с GTM и Angular Material. Я пытаюсь использовать атрибуты данных HTML для отправки дополнительных данных, и я столкнулся с этой проблемой. Вы нашли какое-нибудь решение?