After reading Google Analytics developer Philip Walton’s post on The Google Analytics Setup I Use on Every Site I Build I realized I didn’t know nearly as much as I had originally thought about setting up Google Analytics.
I started by only adding the googleanalytics/autotrack script along with the maxScrollTracker plugin to my sites in order to track which pages users scroll the most on and what sources refer the most engaged readers. This information could be useful to see how engaging your current content is or when deciding on how to structure important content on particular pages.
During this process, I felt I ran into some gaps in the documentation so I’ll try and fill those in with the steps I went through to arrive at what I think was the correct destination.
Note: @philipwalton said this post “covers it pretty well”, so I wasn’t too far off.
Include autotrack.js
autotrack.js
is an enhanced Google Analytics (GA) tracking library for common user
interactions that includes several plugins, one of which is maxScrollTracker.
There are many ways to include autotrack.js, but I simply went with:
<script async src='path/to/autotrack.js'></script>
Set Up the Custom Metric
Once you have that on your page and feeding into Google Analytics, you will need to log in to the GA admin panel for the appropriate view and set up a new Custom Metric that tracks the max scroll percentage captured by the plugin. You can find it in the Property section under Custom Definitions. Then click New Custom Metric and fill out the fields:
| Name | Max Scroll Percentage |
| Scope | Hit |
| Formatting Type | Integer |
| Minimum Value | 0 |
| Maximum Value | 100 |
| Active | Checked |
It will provide some example code snippets to include the metric, but instead
use the plugins configuration option when requiring the maxScrollTracker
plugin with a custom metric with an index of 1:
ga('require', 'maxScrollTracker', {
maxScrollMetricIndex: 1,
});
Set Up the Calculated Metric
Once that is done, set up a Calculated Metric on the View section of the admin panel. Click New Calculated Metric and fill out the fields:
| Name | Avg. Max Scroll Percentage |
| External Name | (Autofills to calcMetric_AvgMaxScrollPercentage) |
| Formatting Type | Percent |
| Formula | {{Max Scroll Percentage}} / ( 100 * {{Unique Pageviews}} ) |
The calculated formula takes the Max Scroll Percentage custom metric, which is per
unique page path per session, and calculates the average by dividing by the already
existing Unique Pageviews metric, allowing it to be applied to different dimensions
in a report.
Set Up the Custom Report
To set up a custom report using this calculated metric, go to the Customization section and then Custom Reports. Click on New Custom Report and fill out the fields for the first tab:
| Title | Max Scroll Stats |
| Tab Name | Avg. Max Scroll Per Page |
| Type | Explorer |
| Metric Group Name | Metric Group |
| Metrics | Avg. Max Scroll Percentage |
| Unique Pageviews | |
| Dimension Drilldowns | Page |
| Filters | (optional) |
| Views | (optional) |
And for the second tab:
| Title | Average Max Scroll Percentage |
| Tab Name | Avg. Max Scroll Per Source |
| Type | Explorer |
| Metric Group Name | Metric Group |
| Metrics | Avg. Max Scroll Percentage |
| Unique Pageviews | |
| Dimension Drilldowns | Source/Medium |
| Filters | (optional) |
| Views | (optional) |
You’re done! It will take a while for the data to populate, possibly 24 hours, with enough data to be meaningful, but once it has check the report to see if it seems accurate.
