Google Tag Manager incompatible with MatButtonModule

[patricknee]

What are you trying to do?

Use Google Tag Manager in an Angular Material application.

Google Tag Manager is designed to allow the insertion of tags (such as Google Analytics tags) non-programmatically, for example, by targeting a trigger to an action on a button identified by an element.class or an element.id.

What troubleshooting steps have you tried?

In a simple app using Angular and Material components, I have discovered that the text of the Mat-Button is put into a mat-button-wrapper element inside the element. Simplified resulting HTML (removing some classes on the button, all classes visible in stackblitz) is shown below.

<button id="my-button">
  <span class="mat-button-wrapper">Click me!</span>
</button>

As a result, when the user clicks on the center of the button (where the text is), the event.target doesn't get the target.id="my-button"; instead, target.id="" and Google Tag Manager doesn't trigger. If the user clicks on the edge of the button, then the target.id="my-button".

Reproduction

StackBlitz:

https://stackblitz.com/edit/angular-ljrxvd

Steps to reproduce:

1. In Stackblitz app, click on text in the button. The displayed event.target.id = '' and the outer HTML is the inserted .
2. Next, click on the EDGE of the button (avoiding the text). The displayed event.target.id = 'my-button' and the outer HTML is the inserted

.

Google Tag Manager will not catch the majority of clicks which trigger the "span", not the button with the ID. (This stackblitz demo is not integrated with GTM.)

Is there some way to overcome this and use Google Tag Manager as intended (set up triggers and tags non programmatically)?

Is there some way to ensure the event.target.id is the id of the button?

Environment

• Angular: 8.2.7
• CDK/Material: 8.2.1
• Browser(s): Chrome, Safari
• Operating System (e.g. Windows, macOS, Ubuntu): Currently testing on Mac

[patricknee]

I guess one potential fix would be for the interior span to be assigned an ID automatically so that it can also be targeted by a GTM trigger. The GTM trigger would target (button.id || span.id).

[patricknee]

Resolved:

The solution in Google Tag Manager:

Enable Variable-type Click Element.

Create two triggers:

1) Trigger Type: Click-All Elements, Some Clicks, Click ID - equals - "your-id"

2) Trigger Type: Click-All Elements, Some Clicks, Click Element - Matches CSS Selector - "button#your-id span" (see image)

Then in your Tag set two triggers, one to trigger 1, the second to trigger 2.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}