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 Toronto On the heels of a fantastic event in New York City, ClickZ Live is taking the fun and learning to Toronto, June 23-25. With over 15 years' experience delivering industry-leading events, ClickZ Live offers an action-packed, educationally-focused agenda covering all aspects of digital marketing. Register today!

ClickZ Live San Francisco Want to learn more? Join us at ClickZ Live San Francisco, Aug 10-12!
Educating marketers for over 15 years, ClickZ Live brings together industry thought leaders from the largest brands and agencies to deliver the most advanced, educational digital marketing agenda. Register today and save $500!

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

Gartner Magic Quadrant for Digital Commerce

Gartner Magic Quadrant for Digital Commerce
This Magic Quadrant examines leading digital commerce platforms that enable organizations to build digital commerce sites. These commerce platforms facilitate purchasing transactions over the Web, and support the creation and continuing development of an online relationship with a consumer.

Paid Search in the Mobile Era

Paid Search in the Mobile Era
Google reports that paid search ads are currently driving 40+ million calls per month. Cost per click is increasing, paid search budgets are growing, and mobile continues to dominate. It's time to revamp old search strategies, reimagine stale best practices, and add new layers data to your analytics.

WEBINARS

Resources

Jobs

    • GREAT Campaign Project Coordinator
      GREAT Campaign Project Coordinator (British Consulate-General, New York) - New YorkThe GREAT Britain Campaign is seeking an energetic and creative...
    • Paid Search Senior Account Manager
      Paid Search Senior Account Manager (Hanapin Marketing) - BloomingtonHanapin Marketing is hiring a strategic Paid Search Senior Account Manager...
    • Paid Search Account Manager
      Paid Search Account Manager (Hanapin Marketing) - BloomingtonHanapin Marketing is hiring an experienced Paid Search Account Manager to...