Add a jQuery Function to Google Tag Manager

This blog post walks through the process of adding a jQuery function to a custom HTML tag in Google Tag Manager in order to populate tags with text or other information available on the page. While Google Tag Manager (GTM) has many useful built-in features for targeting certain areas of the page for event tracking, sometimes you want to extract some text or other data in a way that goes beyond the functionality of the built-in Variables.  In these cases you will often find it useful to grab the text with a custom jQuery script.

❓ Note that Google Tag Manager doesn't include jQuery by default. To use jQuery with GTM, the page you're working on must already be running the jQuery library. If jQuery doesn't exist on the page already, you can load the jQuery library yourself in a new custom HTML tag, but this may come at a cost to page performance. You may also run into race conditions where jQuery isn't yet available when GTM starts firing your tags; read this post for a solution: https://www.simoahava.com/gtm-tips/add-load-listener-script-elements/

jQuery Selectors for Google Analytics

jQuery lets you identify and select elements on a page using CSS selectors. Some examples:

Select Elements by Class:

$( ".myClass" );

Select Elements by ID:

$( "#myId" );

Select Elements by Attribute:

$( "input[name='first_name']" );

Detailing all the different selectors is out of scope for this post, and you can always look them up when you need them. The jQuery documentation has a lot more examples, and there are many online courses for jQuery if you're just getting started.

But in summary, jQuery is super useful for Google Analytics tracking, where you often want to select certain types of elements to pull information from them.

Add a jQuery Function to Google Tag Manager

The following example is for a website with an accordion-style FAQ, which users click to expand and read each item. The business requirements are to identify which items are being read the most so that the website can better surface answers to these questions. GTM's built-in "Click Text" variable wouldn't work here since a user doesn't necessarily need to click the text to open the item (there are arrows as well).

The example shows the steps to add a jQuery script into a custom HTML tag in Google Tag Manager, set it to populate the data layer, and then capture the data in a variable and send it to Google Analytics.

STEP 1: ADD JQUERY SCRIPT TO CUSTOM HTML TAG

Click Tags > New > Custom HTML Tag > add a jQuery script that grabs the information you want and pushes it into the data layer. Here's an example script that does the following:
a) sets up a click event on the parent element,
b) fetches the content of the FAQ title,
c) pushes both an event and a variable containing the FAQ title into the data layer, where we can access them for other tags.

<script type="text/javascript">
jQuery("#faq-section > div > div").on('click', function(e) {
dataLayer.push({
    event: 'faqTextEvent',
    faqText: ($(this).find(".question-content").html())
  });
});
</script>

STEP 2: SET A TRIGGER FOR CUSTOM HTML TAG

For that custom HTML tag, set the Trigger to Page View for the URL(s) you're interested in.
jquery-img2

 STEP 3: COLLECT DATALAYER PUSH IN A GTM VARIABLE

Click Variables > User-Defined Variables > New > Data Layer Variable and enter the variable name you set in the custom HTML tag in step 1. In this example it would be "faqText".  You can name it whatever you want; I personally like to prepend with a "DL" to note that it's a data layer variable.
jquery-img3

STEP 4: COLLECT DATALAYER EVENT IN A GTM TRIGGER

Click Triggers > New > Custom Event > Event Name = the event name you set in the custom HTML tag in step 1. In this example it would be faqTextEvent. Again, name it in whatever way makes sense to you.
jquery-img4

STEP 5: SET UP GA EVENT TAG

Click Tags > New > Universal Analytics > Event and fill in Category, Action, and Label. In this example, a logical naming strategy would be Category = FAQ, Action = Viewed FAQ Item, and Label = {{DL - faqText}}, which is the Variable containing faqText. Set the Trigger as the faqTextEvent event, which we've named above as Event - Clicked FAQ Item.
jquery-img5

 CONCLUSION

In summary, we added a jQuery script to pull some information off the page and push a variable and an event into the data layer. We then captured the variable in a GTM Variable, and the event in a GTM trigger, and used those to populate and send a Universal Analytics Event Tag to GA.

5 thoughts on “Add a jQuery Function to Google Tag Manager”

  1. Hi, thanks for your tutorial.
    I'm using it for the same scenario (a FAQ, where the users can click on the question or on the triangle to open the answer).
    I'm trying to go a bit further, by firing the custom event only when they click to open the question, not when they click to close the question.

    I have a dynamic class ".active" that is added on the parent container of the question/answer when the question is open.

    I'm trying to use the css selector :not(...), but it doesn't work and I don't understand why? Do you have any idea?

    jQuery("#faq-section > div:not(.active) > div").on('click', function(e) {
    dataLayer.push({
    event: 'faqTextEvent',
    faqText: ($(this).find(".faqTitle").html())
    });
    });

    • Hi there, I think that might not be the right way to apply the not(.active) selector but I don't know for sure. Regrettably I'm not particularly a jquery expert. Maybe you can try asking this question on Stack Overflow? 

  2. Thanks so much for this guide, I could implement it knowing almost nothing of JS. The best part: it worked on the first try! Awesome, great job

Comments are closed.