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.

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.

 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.

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.

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.

 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.