heatmapnew

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.

1-clicktale-projects

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.

2-html-code

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

3-customer-login-macro

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.

4-customer-login-rule

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

5-career-page-view-rule

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.

6-customer-tracking-tag

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

7-career-seeker-tag

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 Chicago Join the Industry's Leading eCommerce & Direct Marketing Experts in Chicago
ClickZ Live Chicago (Nov 3-6) will deliver over 50 sessions across 4 days and 10 individual tracks, including Data-Driven Marketing, Social, Mobile, Display, Search and Email. Check out the full agenda and register by Friday, Oct 3 to take advantage of Early Bird Rates!

ABOUT THE AUTHOR

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!

COMMENTS

UPCOMING EVENTS

Featured White Papers

IBM: Social Analytics - The Science Behind Social Media Marketing

IBM Social Analytics: The Science Behind Social Media Marketing
80% of internet users say they prefer to connect with brands via Facebook. 65% of social media users say they use it to learn more about brands, products and services. Learn about how to find more about customers' attitudes, preferences and buying habits from what they say on social media channels.

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising
If you're considering implementing a marketing attribution model to measure and optimize your programs, this paper is a great introduction. It also includes real-life tips from marketers who have successfully implemented attribution in their organizations.

Jobs

    • Recent Grads: Customer Service Representative
      Recent Grads: Customer Service Representative (Agora Financial) - BaltimoreAgora Financial, one of the nation's largest independent publishers...
    • Managing Editor
      Managing Editor (Common Sense Publishing) - BaltimoreWE’RE HIRING: WE NEED AN AMAZING EDITOR TO POLISH WORLD-CLASS CONTENT   The Palm...
    • Senior Paid Search & Advertising Manager
      Senior Paid Search & Advertising Manager (Smarty Had A Party) - St. LouisCompany Description: A warm, loving, [slightly wacky] startup, we view...