CODEWITHSUNDEEP
javascriptgoogle-tag-manager
TheRealPapa
TheRealPapa

Reputation: 4539

Google Tags - Javascript variable value changing on every click

First time working with Google Tag Manager. I have a click event trigger based on a button class, yet it executes on every click.

My variable {{bookingUnit}} is gets its value from text taken off the HTML on the page. It is a Custom Javascript variable (and returns the correct value):

function() {
    return $({{Click Element}}).closest('table')).find('td.rnc').text();
}

I have to detect a button click which on the page (of a 3rd party system) was defined as:

<input type="submit" name="ctl00$plcBody$BookingFormGrid$ctl16" value="BOOK NOW" onclick="$('form').attr('action', 'DetailsEntry.aspx?bfid=c5efdee5-7280-4593-8256-564e9b7ac01a&amp;bfpid=8072faaa-c89f-4a63-be19-e54a91f0f1a0&amp;bfrtid=3d6e96c3-e557-4f85-97d1-c750787dc6d8&amp;arr=2019-03-07&amp;nts=3&amp;a=1&amp;c=0');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$plcBody$BookingFormGrid$ctl16&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" class="btn btn-primary bnow">

I have a trigger as follows:

Type: Click - All Elements
Fires On - Some Clicks

Click Classes - equals - btn btn-primary bnow
Click Element - equals - input

Wherever I click on the page I see the event firing:

gtm.click

Yet I can see the value of my variable being updated every time (so it seems to ignore my Click Classes trigger condition and only update when the button is pressed).

What did I miss? Thanks.

UPDATE: Using info from this forum, I changed my trigger like so:

Click Element - matches CSS selector - .btn .btn-primary .bnow

But still the variable gets updated by clicking anywhere on the page.

Upvotes: 0

Views: 1954

Answers (4)

Josh berry-jenkins
Josh berry-jenkins

Reputation: 11

The gtm.click event you are seeing is not your event firing - it is simply one of GTM's default events. If your tag had fired you would instead see your tag name in the preview.

It sounds like you want to send an event to GA every time your trigger fires along with the value of {{bookingUnit}}, if this is the case:

  • create a Google Analytics tag - set it to "events".

From here you could:

  • place the variable as the event action along with any other details you would want to send.
  • Make sure you have created a variable for your Google Analytics ID to link the event to your GA account.

Once this is done you can attach your CSS selector trigger to this tag (Click Element - matches CSS selector - .btn .btn-primary .bnow) this will then fire an event every time the matched selector is clicked to your GA account. You can check for the tag firing in preview mode, just look out for the name of your GA event tag.

Upvotes: 0

vinoaj
vinoaj

Reputation: 1684

It sounds like you have a Click - All Elements trigger active in your container. This will fire with every mouse click. Every time a trigger is fired, all variables will be re-evaluated at that time. So the best thing to do is to deactivate the Click - All Elements trigger if you are not using it.

Edit:

  • Go to Variables > Configure Built-In Variables
  • Select the following: Click Element, Click Classes, Click ID, Click Target, Click URL, Click Text
  • Go to Triggers > New
  • Trigger Type: Click - All Elements
  • This trigger fires on Some Clicks
  • Click Classes matches CSS selector .btn.btn-primary.bnow

Upvotes: 2

Jesus Rodriguez
Jesus Rodriguez

Reputation: 1

Do it like this:

Type: Click - All Elements Fires On - Some Clicks

Click Classes - equals - btn

Just use one class and one condition. Also make sure that it's the only button with that class or that only the buttons you want to track have that class.

In the debug console you will always see the event gtm.click firing but the variable should only be sent when clicking the button with that particular condition.

Upvotes: 0

Eike Pierstorff
Eike Pierstorff

Reputation: 32780

As bit more technical detail - GTM does not bind events to the element specified by the classes in your filter. Instead it binds the event to the document, waits for the event to bubble up to the root element of the page, and then inspects the event target if it matches your filters.

As vinoaj said the net effect is that the trigger is fired every time you click anywhere on the page. That also means that the Click Element changes everytime, and with it the return value for the selector in your custom variable.

However the actions connected to the trigger will only fire if the event target matches the conditions in your trigger. So this should actually not create a problem for you.

Upvotes: 0

Related Questions