Ted Giraitis-Quaye

Welcome To My Blog!

I will utilize this medium to discuss and document the latest in digital marketing. Both in my career via case studies and trending topics I could add value to. Check out some content below!

TGQ Marketing Logo

Conversion Tracking & Events with Google Tag Manager

Setting up conversion tracking to see the results of your marketing efforts is extremely important. It’s what separates traditional from digital marketing in many ways. When working with a client, I wanted to track business events that occurred on their site as macro and micro conversions. In order to do this I had to go above traditional page tracking and had to dive into custom events. 

Problem:

  • Needed to track form submissions

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