If you are new to working with Global JavaScript (JS) Variables inside of Google Tag Manager (GTM), you may want to refer to my earlier piece on how to access and apply them inside of your GTM tracking.
If you’re feeling caught up, let’s dive into using these variables to create some robust, dynamic tracking for your website. We’re going to specifically focus on the activeElement JS Variable which can be used to dynamically track forms, navigation, menus, checkout details, and more.
What are you trying to track?
For today’s example, we’re going to pick a form element that you’ve built uniquely for your user’s form.
Let’s say you want to track the following:
When someone submits a form, do they ‘check’ the box above it?
- Yes
- No
There are a variety of ways to do this with a dev team and a dataLayer, but here is how you track this on your own with only the powers of GTM, and inspecting the webpage for Global Javascript Variables.
Let’s take this form for instance:
When a user submits this (make sure to check for validation!) you can send a true or false value if any box is checked! (I know, I know: magic!)
How do you want your data to look?
Let’s assume you are performing Event Tracking. In this case, you need to decide what values you want to capture. For this example, let’s use the following:
Category: Form Submit
Action: Stay in Touch Checkbox
Label: [TRUE OR FALSE]
Let’s use Global JS Variables to locate this
Everything we need here is located within the “document.document” Global JS Variable on your webpage. (Again, click here for more information on where to find this.)
The trick here is to locate the button a person clicks, and traverse back to the checkmark box. This may sound easy, but you need to be able to tell GTM “the user clicked exactly here, and here is where you need to find other information about the checkbox above.”
So, where do you start?
Traverse the js variables to find “activeElement” as follows. (Remember! Go to my earlier article to understand where to find these values!)
- Hover over the “active element” (the place a user will be clicking, such as “submit” or “save” (VERY IMPORTANT! This is what makes the magic happen!).
- Right-click the button and click “inspect”.
3. From there navigate to your Global JS Variables.
4. Find and expand document.document within the first list of variables:
5. Locate activeElement.
6. Click the carrot to expand:
7. This is the trickiest part. You will need to find the location—within the active element—where the checkbox has the correct true or false statement as a value. There may be several places within activeElement that you can find this! In this case, we’ll start with document.activeElement.form.14.
Hint: In a Chrome browser, hover over the JS variable to locate where it is indicated on the page.
8. Expanding the variable document.activeElement.form.14 we find the value which changes from TRUE to FALSE. We found this by testing with the steps above while you check and uncheck the checkbox.
9. Here is the path we found:
document.activeElement.form.14.isConnected
Setting up the checkmark value in GTM
You should be officially ready to start Google Analytics Event Tagging inside of GTM!
Head over to your site instance of GTM and start by creating a new Global JavaScript Variable. Open up your variables section, scroll down to User Defined Variables, and create a new variable. The variable type should be “Javascript Variable” like so:
Now, using the JS variable we found (document.activeElement.form.14.isConnected) to produce a TRUE or FALSE value, use the full variable inside of the field provided:
Use this variable inside of your Event Label field. Your event tag should appear like this:
Use a trigger which allows this event tag to fire when visitors click on the “Submit” button. We recommend using a trigger which validates that the form successfully submitted to prevent bloated numbers when using a “Total Events” report inside of Google Analytics. Conversely, if you have a CRM which is already counting checkmark values in successful form submissions only, you may choose to fire this tag on any event in which a user clicks submit, regardless of validation. Thereby, if you add up the successful submissions in your CRM, subtract them from your total checkbox values, you will get a metric telling you how often folks are clicking submit, but not being successful. (Sneaky …)
We hope this helps you achieve dynamic reporting and a keen understanding of user behavior on your site.
Happy tracking, everyone!
