Creating Segmented Heatmap Tracking With ClickTale and Google Tag Manager

Heatmaps and session recordings are excellent tools for understanding how visitors interact with complicated web pages. These reports can uncover user behaviors that typical web analytic tracking tools cannot see. For instance, these reports can demonstrate when visitors get confused by complicated navigation panels as they hover from one link to the next without knowing where to click. But for sites with a wide variety of audiences, sometimes the aggregate heatmap reports make it difficult to derive insights from these valuable reports. If your site is visited by a variety of audience types – such as prospects in the sales cycle, current customers, investors, employees, and career-seekers – you need segmented reports to be able to clearly see how the site elements are contributing to a good user experience for each audience.

Although many site owners are beginning to implement Google Tag Manager to make tag updates easier, they are finding that few session tracking or heatmap tracking tools are ready for it. The reason for this incompatibility is that typical heatmap tracking tools require very specific placement of multiple tags within a page layout, synchronous tags, or they require the document.write function, which is not supported in Google Tag Manager.

We recently worked with ClickTale to implement heatmap tracking and session recordings for several sites, and in the process we created several visitor segments within Google Tag Manager to help enable user segments within the heatmaps. Below are the steps we followed. Please note that the ClickTale Tag Manager code is still in beta. So proceed with caution (some bravery wouldn’t hurt either).

For this example, we assume that you already have the Google Tag Manager implemented with either Google Analytics or Universal Analytics. If you have questions about setting up Google Tag Manager check out this great column by Vinoaj.

Step 1: Create Projects in ClickTale for Each Segment

Within ClickTale we created a project for each segment. You could also generate different reports by creating multiple partitions. As you are creating the project, make note of the project ID as you will be using the IDs when implementing the tracking tags.


Step 2: Create Segments in Google Tag Manager

Create your user segments within the Tag Manager. We created our segments by pages visitors viewed (careers) and an event triggered by a login form on a customer portal. While we typically use Custom Dimensions for persistent tracking, we decided to keep it simple for this example.

Our first segment is for our customers. We will create the segment from visitors who log in to our customer portal. The event will be triggered on the click of the login button. The event in the page’s JavaScript will contain a data layer variable with the company name.


Then, within the Google Tag Manager we will create a macro to store the company name.


And we created a rule triggered by the login event. You’ll notice in this rule that we are also ensuring that the DOM is loaded before the rule activates. The DOM load is required for the ClickTale tags to work correctly.


Then we created a segment for our career-seekers based on their visitation to the job listing area of our site.


Step 3: Implement the ClickTale Tags Within Google Tag Manager

ClickTale is currently working on a tag implementation that will work as a simple Tag Type under the Certified Analytics menu. You can see this beta option today as “ClickTale Standard Tracking.” We were unable to get the desired results out of the default beta tags. But we were able to find a good working set of tags from Dan Katz.

In the Google Tag Manager we created two new tags (one for each segment). These new tags were implemented as a Tag Type -> Custom HTML Tag.

Below is the new tag for our customer segment.


Below is the new tag for our career-seeker segment.


For each tag we made sure to enter the appropriate ClickTale project ID in the tag code and assigned the rule associated with the segment.

Once the new tags were saved, we published the new version of our tag container and debugged the new tags to ensure they were firing correctly.

This method tracks customers and career-seekers on the same visit as when the user segment is identified. For a future addition we will create new Tag Manager Rules based on persistent tracking of our segments using Custom Dimensions and the tracker.get function to track customers on repeat visits.

After the heatmap and session tracking tags were in place for a couple of days we were able to log in to ClickTale and see our segmented heatmaps. We were immediately able to discover that the navigation preferences for career-seekers, customers, and other visitors were very different. Each segment had content preferences that were unique to themselves. There was also some content that was preferred by all segments. Some of the best findings came from watching session tracking for each segment and finding that each segment has very specific uses of functional elements such as predictive search and search filters. We are constantly striving to become experts in our visitors’ behaviors to make the best possible user experience for them. With integrated user segments and heatmap tracking through the Google Tag Manager we are able to see a combination of data that enables amazing insights into how our users interact with our sites.

Image on home page via Shutterstock.

Related reading

Big Data & Travel
Flat design modern vector illustration concept of website analytics search information.