Customer Journey Tracking

Purpose

The purpose of this article is to detail the requirements for ChannelMix CTA Tracking. After this implementation, you will need only to update the HTML of your CTAs in order to track those user interactions via Google Analytics and ChannelMix. 

Difficulty: 79-799197_crossed-wrench-clipart.png 

Developer may be required to update CTA HTML 

Implementation Steps in this Guide

  1. HTML - update CTA class and data attributes
  2. GTM - implement CTA Tag 

HTML - update the CTA data attributes

  1. Add the class "trackCTA" 
  2. Add the "data-ctainfo" data attribute and set its value

Examples: 

<!-- anchor (a) tag -->
<a class="trackCTA" data-ctainfo="context clue cta" href="#" >Link</element>

<!-- button tag -->
<button class="trackCTA btn btnLarge" data-ctainfo="primary call to action">Button</button>

The trackCTA class will be used to identify the element as a call to action that should be tracked (Trigger below).

The data-catainfo value will be used to identify the element click and will be included in the tracking Tag label.

Example data-ctainfo values:

  • "Main Learn More Button"
  • "Outbound Resources CTA"
  • "Primary Nav | Lets Talk"

mceclip7.png

GTM - implement CTA Tag 

Variable - ctainfo

Copy/paste the code below into the Custom JavaScript field of Custom JavaScript variable. This variable will return the value set for 'data-ctainfo' or else return the text of the element clicked if the 'data-ctainfo' value is not provided.

function () {
var ctainfo = document.querySelector('.trackCTA').getAttribute('data-ctainfo');
if (typeof ctainfo === 'undefined' || ctainfo === "") { ctainfo = {{Click Text}} }
return ctainfo;
}

mceclip3.png

The JavaScript above references a variable called Click Text with is built-in to GTM but may not be active. To ensure that this variable is active—from the Variables tab of GTM, click Configure and check the box next to Click Text

mceclip2.png

mceclip1.png

ChannelMix CTA Click Tag - Trigger

Whether you implement this tracking through a UA or GA4 Tag, the trigger is the same. This trigger will fire if and only if a user clicks on a link which has the required "trackCTA" data attribute. 

  • Trigger Type: "Click - Just Links"
  • Click Classes contains "trackCTA"

mceclip4.png

ChannelMix CTA Click Tag - GA4

  • Event Name = "channelmix_cta"
  • Parameter Name: "cta_info" = <<ctainfo>>

mceclip16.png

ChannelMix CTA Click Tag - UA

  • Category = "ChannelMix"
  • Action = "CTA Click"
  • Label = <<ctainfo>>

mceclip5.png

Validation

You should Preview your implementation through Google Tag Manager after implementing the above requirements, before submitting the workspace.

mceclip8.png

Preview will open a second tab with Tag Assistant. Through Tag Assistant enter the URL where your CTA can be found and Connect to open that page in a third tab.

mceclip10.png

From the page that has been opened through Preview, click on the CTA for which you have implemented the CTA requirements (class and data attribute). Find and select the corresponding Click or Link Click event in the left column on the Tag Assistant page under Summary. This will show you all of the Tags that did or did not fire upon that click. 

If your Tag(s) have been triggered as expected, you should see them under "Tags Fired"

mceclip11.png

mceclip15.png

Finally, click into the fired Tags. Next to "Display Variables as" click "Values" to see that values captured by custom dimensions or event parameters.

GA4 Tag

mceclip13.png

UA Tag

mceclip14.png

If the Tag fired when expected and shows the expected values, your implementation and validation are complete. Submit the workspace to apply these changes to your production site. 

From this point forward, any and all Link Clicks by users will be tracked in Google Analytics and, if connected, ChannelMix. The value provided for "cta-info" will be attached to the CTA Click Event Tag as an identifier. If you have a new CTA being deployed to production and you would like to see it tracked by ChannelMix, simply ad the class and data-attribute prior to deployment. The Tag(s) you have implemented will automatically track those clicks. 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.