Below are the most common methods of collecting site interaction data using GTM to send event tracking data to GA.
Method 2 (this post): Custom HTML and JS Tags in GTM
Method 4: Combined Auto-Event & Data Layer
METHOD 2: CUSTOM HTML AND JS TAGS IN GTM
Advantage: The advantage of this method is that you can track virtually any element on the site, beyond what is possible using GTM’s built-in interaction tracking. You can manipulate the output so it looks exactly how you want, and you can do it all yourself, without needing to touch the actual code on the page.
Disadvantage: Just like auto-event tracking, this method can break if the page layout changes. Also, while this method allows you to bypass your site developers, it requires that you yourself are a developer! You are injecting JS into the site, so you have to be careful not to break anything. Test, test, test.
IMPLEMENTATION STEPS OVERVIEW
- Set up a trigger to fire that Custom HTML tag (usually this will be on All Pages or the page you’re interested in)
- Create a new Data Layer Variable that collects the variable from your data layer push in step 1.
- Create a new Custom Event Trigger that matches the event set by your data layer push in step 1.
- Create a new Universal Analytics tag in GTM with Track Type = Event. Populate the Category, Action, and Label fields with text and/or the Data Layer Variables from step 3. Fire it using the trigger from step 4.
DETAILED IMPLEMENTATION EXAMPLE
In summary, the custom HTML & JS technique involves creating a two-tag sequence. The first tag listens for interactions with the page and in response to those interactions pushes values into the data layer. The second level tag is triggered by the first, and sends the data off to Google Analytics or any other analytics/marketing system.
This blog post contains a detailed walk through of the full process: Add a jQuery Function to Google Tag Manager (The blog post focuses on jQuery, but the process is exactly the same whether you use jQuery or vanilla JS.)