CODEWITHSUNDEEP
javascriptjquerygoogle-tag-manager
Doug Fir
Doug Fir

Reputation: 21204

Custom Javascript Macro In Google Tag Manager: Determining Which Button Was Clicked

I have a page that a visitor gets two where they are presented with two buttons: yes and no.

Here is the html:

<footer>
<button id="authCreateAcctConfirmNoBtn" class="button2">No</button>
<button id="authCreateAcctConfirmYesBtn" type="submit" class="red-button">Yes</button></footer>

I'm a little light on js but I know from looking in the console that if I do this:

document.querySelectorAll('footer > button')

Then the two buttons are returned.

If I then do this:

document.querySelectorAll('footer > button')[0].textContent

The textContent "No" is returned for the first button. Similar if I change the 0 to a 1 then "Yes" is returned.

The script, called a macro in Google-Tag-Manager is triggered on the firing rule when

"A click occurred" AND "The ID of the clicked element contains "nim_authCreateAcctConfirm"" (Therefore covering both buttons) Then run the script (Called a macro in Google-Tag-Manager")

My goal is to track whether the visitor clicked yes or no. So based on the button clicked, do either 

document.querySelectorAll('footer > button')[0].textContent // for No
document.querySelectorAll('footer > button')[1].textContent // for Yes

What script would I use on the firing/trigger rule to say return either of the two options above. I'm trying to avoid simply using an if statement but rather use a way to say "this" for 

return thisButton.textContent

Upvotes: 0

Views: 899

Answers (1)

nyuen
nyuen

Reputation: 8907

Since you have assigned unique IDs to your two buttons, you could use that instead. I think it would be a more efficient approach. You could use the default {{element ID}} macro to return the ID of the clicked button. So in GTM you would do this:

  1. Set up a click listener, gtm.click, to fire on all pages
  2. For the "No" button, set up a tag that fires when {{event}} equals gtm.click, and when {{element ID}} equals "authCreateAcctConfirmNoBtn"
  3. For the "Yes" button, set up a tag that fire when {{event}} equals gtm.click, and when {{element ID}} equals "authCreateAcctConfirmYesBtn"

Hope this helps.

Upvotes: 2

Related Questions