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 New York What's New for 2015?
You spoke, we listened! ClickZ Live New York (Mar 30-Apr 1) is back with a brand new streamlined agenda. Don't miss the latest digital marketing tips, tricks and tools that will make you re-think your strategy and revolutionize your marketing campaigns. Super Saver Rates are available now. Register today!

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

UPCOMING TRAINING

Featured White Papers

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.

5 Ways to Personalize Beyond the Subject Line

5 Ways to Personalize Beyond the Subject Line
82 percent of shoppers say they would buy more items from a brand if the emails they sent were more personalized. This white paper offer five tactics that will personalize your email beyond the subject line and drive real business growth.

WEBINARS

    Information currently unavailable

Jobs

    • Creative Project Manager
      Creative Project Manager (Agora Inc. ) - BaltimoreThe Creative Project Manager of PubSVS will work directly with the IRIS team and will be responsible...
    • Digital Marketing Associate
      Digital Marketing Associate (Connections Media) - Washington, DCConnections Media, LLC, a Washington, DC-based digital agency providing strategy...
    • Lead Generation Specialist
      Lead Generation Specialist (The Oxford Club) - BaltimoreThe Oxford Club is seeking a talented writer/marketer to join our growing email lead-generation...