Skip to main content
Data Runs Deep Menu

Main navigation

  • Home
  • Who We Are
    • Careers
    • What We're Up To
    • What We Believe In
    • Ethical Policy
  • What We Do
  • Google Marketing Platform
    • Analytics 360
    • Tag Manager 360
    • Salesforce and GA360
    • Data Studio
    • Optimize
  • Google Cloud Platform
    • Google BigQuery
      • Google BigQuery Training
      • Google Analytics Integration
  • Consulting
    • Strategy
    • Implementation
      • Google Analytics Audit
      • Google Tag Manager Audit
      • Enhanced Ecommerce Implementation
      • Google Tag Manager
    • Analysis
      • Google Data Studio
        • Google Data Studio Case Study - Mona
      • UX Analysis
  • Training
    • Google Analytics Courses
    • Advanced Google Analytics Training
    • Google Tag Manager Training
    • Google Analytics 360 Training
  • Partnerships
    • Conductrics
  • Blog
  • The Flying Beagle
  • Merch
  • Contact

Scroll Depth Heat Maps in Google Data Studio

Scroll Map Visualisations in Data Studio
By: Nick Hood
Posted in
  • Google Data Studio
Article Date
June 20, 2019

Last night I decided it would be cool to recreate the old in-page analytics functionality in Data Studio by floating key event scorecards over an image of a page. This morning I realised how long that would take, so instead I opted to try and create a scroll depth heat map report using scroll depth events from GA.

This may not be a great solution at scale, but if you're wanting to visualise how far down a couple of key pages users are scrolling this is a pretty neat option. Here is an example of how it's going to look:

Scroll Depth Report

In order to do this you will need to be tracking scroll depth in Google Analytics. You can find out how to do that here.

Then, the idea is basically to plot our scroll depth counts in a table, apply the heat map style option to the column and overlay the table over an image of our page.

To make that table, apply the dimension of event label or event action (which ever one contains your scroll % values) and the unique events metric. Then apply a filter to only include event category contains "Scroll Depth" or whatever your scroll depth event category is called. You will also need to add a filter to only show results when page= the page you're reporting on. Lastly, under the style table scroll down to find the column 1 settings and change the drop down from Number to Heat Map.

That should return you something like this:

Scroll Depth Table Default

Now there are a couple of hacky things we need to do to get this in the correct format/order. The first thing you will notice is the darkest heap map panel will be for your baseline or 0% group. We want the inverse, so our baseline is the lightest and our 100% marker is the darkest.

To do this I've created a calculated field to invert the unique event counts. With our table selected you can click the "Create New Field" link in the bottom right corner of the data tab.

In the field editor we just use unique events x (-1).

Inverse events calc

 

If we apply this newly created metric to our table, we will now get something like this (you may just need to change the order by settings):

Table inversed

Now we insert our screenshot of our page (I use a chrome plugin called "Full page screen capture" to get this), right click on it, select order and send to back.

Send to back

This is where it gets a bit messy. As far as I can tell there are no options to resize the table row heights. So what we do is change the table label font size to the largest one possible:

Font Size

Then we use the insert shape option to cover up the sides with some white rectangles:

Cover the axis with rectangles

The last step then is to add some score cards along side each of the segments to show the counts at each step. So just use the unique events metric and apply a filter to only include events actions that match 25% for example.

 

Event scorecards

You will likely need to fiddle around with your image height and things like that to align it just right, but the end result is a pretty nice visualisation to add into your content performance reports. 

Get in touch

To find out more, call us on 1300 737 885, email us on hello@datarunsdeep.com.au or complete a quick contact form.

Get in touch

Talk to us: 1300 737 885

08:30 - 16:30, Monday to Friday. We love to chat

Visit us, we’re at:

Level 8, 313 Little Collins Street Melbourne, VIC 3000

Aesop
Movember logo
Honda
Spotify
Mona
Country Road Logo
Zoos Victoria

Footer

  • Home
    • Who We Are
      • What We Do
      • What We're Up To
      • Careers
      • Contact
  • Training
    • Google Analytics Training Courses
    • Advanced Google Analytics Training
    • Google Tag Manager Training
  • Consulting
    • Analysis
    • Implementation
    • Strategy
    • Google Analytics Audit
    • Google Tag Manager Audit
  • Google Cloud Partner
  • Google Marketing Platform Sales Partner
  • Bitcoin accepted here
  • Twitter
  • LinkedIn
  • Google Plus
  • Blog RSS feed
Copyright © 2009-2019 Data Runs Deep Pty Ltd. All Rights Reserved. Google Analytics is a trademark of Google Inc.
Website by Marin Sekesan