Google Tags - Javascript variable value changing on every click

google tag manager custom javascript variable examples
google tag manager custom variables
google tag manager custom javascript variable undefined
google tag manager variables
google tag manager user-defined variables
google tag manager status
google tag manager referrer variable
google tag manager variables in custom html

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:

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.

Google Tag Manager Custom JavaScript Variable examples, A common use case for Google Tag Manager involves tracking clicks on to access that parent value every time you click on any part of your site. though, so this is a variation on the above to show how you'd modify the� Click Tags New. Click Tag Configuration Universal Analytics. Set Track Type to Event. Complete the Event Tracking Parameters: Category: Image Gallery; Action: Click; Label: {{Click ID}} Note: the curly braces are used in text fields and custom code to replace a valid Tag Manager variable name with the relevant value retrieved from the event.

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.

Useful Custom JavaScript Variables for Google Tag Manager , Click Variable Configuration and select the desired variable type. The value is set to the HTTP referer, which is the URL of the previous page that the person visited. For example, a custom JavaScript variable can be created to convert all History Change Source: Returns the event that caused a history change, e.g.� function { var value={{Click Classes}}.split(" "); return value[value.length-1]; // or return value.reverse()[0]; } Get form field value. Use case: Get the value of a form field to check if not empty (see below) and/or pass the value to Google Analytics or other Tags. Theoretically, this also could be done with Auto-Event Variable, but after

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 firing but the variable should only be sent when clicking the button with that particular condition.

User-defined variable types for web - Tag , Trigger: A trigger listens for certain events, such as clicks, form submissions, or page loads. When an event is detected that matches the trigger definition, any tags that Variable: A variable is a named placeholder for a value that will change, such values directly from JavaScript variables, first-party cookies, from the DOM. As with all variables, if the Built-in variable cannot be resolved (e.g. there was no Click action and you want to use Click ID), the variable returns the JavaScript undefined type. Here are the Built-in variables with a brief description of what they return:

Components of Google Tag Manager, Introducing 10 useful Custom JavasScript tricks for Google Tag Manager. You can deploy these tricks in Custom HTML Tags or Custom JavaScript Variables, String methods are utilities that you can use to modify any given string. only has those elements that have the key-value pair "event" : "addMe! Set the variable type to 'Data Layer Variable' Set the value of the Data Layer Variable Name to the field name given in the dataLayer e.g. transactionId; Save the variable; We then need to create a Snowplow ecommerce tracking tag in GTM that passes the data onto Snowplow on a transaction event. In GTM, head to Tags and click on the New button.

#GTMTips: 10 Useful Custom JavaScript Tricks, Comprehensive guide to variables in Google Tag Manager. Every single trigger condition needs a variable that is evaluated against some value. Click ID - returns a string contained in the id attribute value of the auto-event element You shouldn't use a Custom JavaScript variable to modify the global� Custom JavaScript. The value is set to the result of a JavaScript function. The JavaScript must take the form of an anonymous function that returns a value. For example, a custom JavaScript variable can be created to convert all instances of the predefined {{url}} variable to lowercase: function { return {{url}}.toLowerCase();} Data layer

Variable Guide For Google Tag Manager, Variable values can also be passed through to other tags (e.g., pass Each of the variables declared within the data layer object will persist as long as the within JavaScript event listeners to initiate tag firing when a user interacts with As an example, to set an event when a user clicks a button, you might modify the � Value = undefined. In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input. A variable declared without a value will have the value undefined.

Developer Guide, Let us explore how to use the Custom JavaScript Variable in Google Tag Manager accurately Duration: 10:13 Posted: Apr 23, 2015 This value in the Data Layer can be accessed by the Click Element variable in GTM (but not limited to. More on that — a bit later) In preview and debug mode, Click Element might look similar to the Click URL variable but they are totally different. Click URL just simply returns a string that is a web address (URL).

  • Hi Vinoaj, I am trying to collect the data when the button is clicked and send it back to analytics, so I need the click listener. Additionally, the button is an input not a link, so I have to select Click All Elements right? Did I mess up the classes filter?
  • @TheRealPapa I've updated my response - see if those instructions work for you
  • Hi Eike, thanks. So as it is setup, the click should fire, but the resolving of the variables should not happen unless the button classes are matched. Is the way I set up the class filter ok? Additionally, is GTM sending to the analytics side the data every time it is clicked (first time doing this!)?