Google Tag Manager & Web Implementation Requirements

The steps detailed below demonstrate a tracking method using Google Analytics to report on user web link clicks by assigning data attributes to link elements.

HTML Data Attributes facilitate the storage of custom text data. This implementation will track any links clicked where the required data attributes have been applied, sending the text data as parameters to identify the link and it's purpose. 

As prerequisites, you must first have Google Tag Manager (GTM) installed on your website and you must have the ability to edit the HTML of the elements you wish to track.

Contents

1. Overview
2. Demonstration
3. Requirements for Demonstration
4. Technical Requirements & Suggestions

Overview

This tracking design offers multiple benefits,

1. Developers can add or update by HTML elements like links and buttons with the required data attributes and those elements will automatically be tracked without the need to make updates in Google Tag Manager. 
2. Developers may update existing data attribute text values to change the data that is collected, without the need to make updates in Google Tag Manager. 
3. Developers can make changes to the elements (ex. layout, text, link destination) without breaking any tracking dependencies. 

Demonstration

This example instructs you to implement tracking for the  (<a> anchor) element with text “READ MORE CLIENT WINS” on the ChannelMix website.

1. Web HTML update - add copy/paste the following data attributes to the link element: data-ga-category="Call to Action" data-ga-label="Read Client Wins"
2. In Google Tag Manager, create a GA4 Event Tag that fires whenever one or more of the above data attributes is set, sending data attribute values as parameters – code snippets for this provided in the next section.
3. Configure Custom Dimensions (Event Scoped) in GA4 for the new data attribute parameters being send with the above event

GA4 Tag

GA4 Custom Dimension Definition

 

Requirements for Demonstration

The snippets below demonstrate everything required to support the tag shown above in the Simplified Example section. With this Tag, supporting Variables and Triggers installed through your container, developers set the required data attribute(s) below on any anchor element to track subsequent clicks thereof with the Tag shown below. 

Require Data Attributes (Web)

Apply both data attributes below, with values set as strings, to all anchor elements you wish to track

• data-ga-category
• data-ga-label

GA4 Requirements

• Configure Custom Dimensions for each of the parameters being sent to report on data attribute values, as demonstrated in the previous section.

GTM Container - All Requirements (5)

To track clicks of links with two data attributes applied, you need 

• two data layer variables - one for each data attribute 
• two triggers - to identify when a value is set for each attribute 
• one tag to fire and send data attribute values as parameters

[Data Layer Variable] Element Data Attribute - GA Label 

This variable is a reference to the data attribute (“data-ga-label”) when applied to a link/anchor HTML element. 

[Data Layer Variable] Element Data Attribute - GA Category

This variable is a reference to the data attribute (“data-ga-category”) when applied to a link/anchor HTML element. 

[Trigger] Link Click - Data Label Is Defined

This trigger will fire a tag whenever a value is set for the data attribute “data-ga-label”, on a link that is clicked. 

[Trigger] Link Click - Data Category Is Defined

This trigger will fire a tag whenever a value is set for the data attribute “data-ga-category”, on a link that is clicked. 

GA4 Event - Link Click - with Data Attribute

This tag fires whenever at least one of these data attributes is applied to a link element, given that the element is clicked. It sends the data attribute values as parameters.

The above GTM Container requirements may be available as an export upon request. Contact support@channelmix.com.

Technical Requirements & Suggestions

The requirements below are guidelines for your own custom implementation. You may use the code snippets provided above but if you make modifications, the requirements below will help you avoid technical issues. 

Web

• Apply data attributes to every link or button you wish to track. 
• Standardize the name of data attributes applied so that one tag can be used to track all clicks of elements with value for specific attributes
• Set the value of your data attributes using one uniform naming convention
• If you use Category  data attribute, set them to generic values like “Navigation” or “Footer Navigation” 
• If you use Label data attributes, apply the same Label value to all buttons that serve the same purpose, you will be able to differentiate by page in reports

GTM

• Create a tag for all clicks of elements, where data attributes have been applied
• Create trigger(s) for clicks of elements where data attributes have been applied
• Create data layer variable(s) to collect and send data attributes 

Naming Conventions

It is important that the stakeholders be consulted when creating a standard naming convention for these elements. Stakeholders in this case would be anyone consuming the Google Analytics reports for this data.

In the demonstration above, a generic tag is used to track all link elements with at least one data attribute applied. If an interaction is important enough to track as a conversion, you may want to create a separate tag to collect additional data and send a unique event name. In that case you would create a trigger which fires only when the data attributes are set to a specific values.