Conversion Tracking & Events with Google Tag Manager

Setting up conversion tracking to view the results of your marketing efforts is extremely important. It is what separates traditional from digital marketing in many aspects. When working with a client, I needed to track business events that occurred on their site. I classified these events as macro and micro conversions. To accomplish this I went above traditional page tracking and implemented custom events. 

Problem:

  • Track form submissions
  • Identify and track valuable micro conversions 

Solution:

  • Created 2 tags for Google Analytics events and Google Ads conversion tracking
  • Created Element Visibility Trigger for dynamic JavaScript elements

Challenges:

When setting up a tag that does not have a unique URL you must find the dynamic ID or class. The main call to action on every landing page was sending users to a form submission. When the conversion occurred a unique message appears indicating a successful submission. In order to track this as a conversion for Google Ads (for later machine learning optimizations) I had to inspect the element. 

Chrome Developer Tools

When inspecting the element I utilized Chrome Developer Tools. I did this because I wanted to find the unique ID or CSS selector for that particular conversion pop up. I decided to use ID because it was simpler than a long CSS selector. 

Element Visibility Trigger

 

Google Tag Manager

Once I figured out the proper ID associated with the successful conversion element I set it up as a trigger. I decided to use the built in trigger Element Visibility. This is great because it listens to the entire document object model(DOM) for the element ID or CSS selector that you indicate. This is perfect for an event that doesn’t make the page reload and just injects JavaScript(JS) into the DOM. I set up once per page because it’s a lead and I set the DOM changes checked to watch for JS changes.

Debugging

The most important part of development process is debugging. I used Google Tag Manager preview mode. This allowed me to see when I did test email submissions for my tag. When I put test emails into the website and my GA_Contact-Us_Event didn’t fire I would know something is wrong.  Another way this could be done is via Chrome Developer Tools by injecting document.querySelector(“uniqueID”) into the console. 

Google Tag Manager Preview Mode

Challenge: Iframe Element

For micro conversions outside of contact form fill out I wanted to track email list subscriptions. However, from inspection via Chrome Developer Tools and the limitations of Google Tag Manager I couldn’t with an iframe. In this case the iframe was contained in Constant Contact. I did not have Google Tag manager on this website so any CSS selector or ID I was able to pull wouldn’t fire. So I learned the limitation of GTM for this type of tracking.

Publish Container

Finally, after all the tags were properly firing I was able to push the changes to the live website. Now the conversions would be linked to Google Ads, and Analytics. I made sure to documentations to that version so in the future if I need to fix anything I can find it quickly.

Leave a Reply

%d bloggers like this: