Creating Segmented Heatmap Tracking With ClickTale and Google Tag Manager

  |  August 21, 2013   |  Comments

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.

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.

ClickZ Live New York Want to learn more?
Attend ClickZ Live New York March 30 - April 1. With over 15 years' experience delivering industry-leading events, ClickZ Live brings together over 60 expert speakers to offer an action-packed, educationally-focused agenda covering all aspects of digital marketing. Register today!


Mark Ryan

Mark leads the analyst team to develop ROI goals, data strategies, digital channel reporting, and establish processes for data analysis for EXTRACTABLE clients. Since joining EXTRACTBLE 14 years ago, he has worked on numerous high-profile websites including Yahoo, DirecTV, Visa, FedEx, and HTC. The most trafficked web page that he's ever worked on received 15 million unique visitors in one day, he has run analytics analysis on over 150 sites, and the biggest ROI he's ever seen on a corporate website redesign was > 800 percent. He is an active member of the Digital Analytics Association and has contributed to the DAA Education Committee for over five years.

COMMENTSCommenting policy

comments powered by Disqus

Get the ClickZ Analytics newsletter delivered to you. Subscribe today!




Featured White Papers

A Buyer's Guide to Affiliate Management Software

A Buyer's Guide to Affiliate Management Software
Manage your performance marketing with the right solution. Choose a platform that will mutually empower advertisers and media partners!

Google My Business Listings Demystified

Google My Business Listings Demystified
To help brands control how they appear online, Google has developed a new offering: Google My Business Locations. This whitepaper helps marketers understand how to use this powerful new tool.


    • Website Optimizer - SEO, CRO, Analytics
      Website Optimizer - SEO, CRO, Analytics (Marcel Digital) - ChicagoMarcel Digital, an award winning interactive marketing agency established in 2003...
    • Director of Marketing
      Director of Marketing (Patron Technology) - New YorkDirector of Marketing We are seeking a Director of Marketing to manage and build our marketing...
    • Senior Interactive Producer
      Senior Interactive Producer (Ready Set Rocket) - New YorkWhat You'll Do As a member of our team, the Senior Producer reports directly to our...