If you were asked to report on how your website visitors were engaging with your content, you’d probably turn to two separate metrics in Google Analytics — pageviews, and average time on page.

Pageviews suffer from the same problem as the “impressions” metric. We know that the page was viewed, but did the visitor actually read it?

As for time on page, it just isn’t accurate. When someone visits a page, the time on site metric is set at 0:00. If they spend 3 minutes on that page, but never visit another page or otherwise engage with the page, Google Analytics will never know exactly how long that person was on that page.

Google Tag Manager gave us another tool to help with this in the “timer” trigger — you could record an event in Google Analytics if someone spent 3 minutes (or however long you set your timer for) on that page. But not every page takes the same amount of time to read.

These measures weren’t good enough. So we came up with another method — introducing Content Consumption.

What is Content Consumption?

We’re measuring two things — did a visitor stay long enough on a page to read your content, and did they scroll far enough down the page to actually see your content? If both things are true, then your content was consumed.

When you’re measuring Content Consumption, you can separate every pageview into four types of visitor behaviours:

• Bouncers: Didn’t stay on the page long enough to read it and didn’t scroll to the end of the content.
• Skimmers: Scrolled to the end of the content, but weren’t on the page long enough to read it fully.
• Tab Hoarders: Stayed long enough on the page to read it, but didn’t scroll to the end of the content. You know who you are.
• Consumers: Stayed long enough on the page to read it, and scrolled to the end of the content.

How We Measure Content Consumption

All the required code is delivered via Google Tag Manager. Once you’ve added Content Consumption to your container, here is what happens when a page is loaded:

1. Right away, a JavaScript function counts how many words are in the section of the page that you’ve decided counts as content. You only want to include a subset of words because you don’t want your sidebar, navigation, footer, etc. included in this calculation.
2. That function then determines how long it would take to read that many words based on the “reading speed” time that you set. That length of time is set as a variable for the timer to watch out for.
3. Now, the timer starts counting but thanks to the read time variable, now it knows how long it will take for the content to be read. When the timer hits that length of time, a Content Dwell custom metric is sent to Google Analytics.
4. At the same time, the scroll tracker is watching how far down the page that visitor is scrolling. If the visitor gets to the part of the content that you designated as the “end”, a Content Scroll custom metric is also sent to Google Analytics.
5. If both Content Dwell and Content Scroll have happened, a Content Consumption custom metric is sent to Google Analytics.

Defining Whether the Content was Read

GTM has a really neat trigger called Element Visibility. With this trigger you can specify an element by ID or Class and if that element scrolls into view the trigger will fire!

We use an element visibility trigger to fire off another event we called Viewport Tracking. This trigger is set to detect whether the visitor reaches the bottom of the content, based on whether an element that only shows up there comes into view.

But what if you have different layouts for pages and there isn’t a universal element you can reliably use to trigger the Viewport Tracking event?

For example, would you consider a blog post’s content consumed if a visitor reaches the comment section, or when they reach the footer having read or scrolled past all of the comments? We decided that a blog post was considered read when a visitor reaches the comment section but pages without comments were considered read or consumed when a visitor reaches the footer.

In our situation we elaborated on the default Viewport Tracking trigger. We created a variable called is WordPress Page that detects if the class ‘page’ is included in the body tag and if it is, returns true otherwise it returns false.

E.g. code:

/** 
* Kick Point Content Consumption
* Is the page a WordPress page type?
**/
function(){
if( document.body.className.match('page') ) {
return true;
} else {
return false;
}
}

We then created two triggers, one for WordPress Pages and one for WordPress Posts.

WordPress Pages:
Type: Element Visibility
Element ID: rocketship
Fires when is WordPress Page equals true

WordPress Posts:
Type: Element Visibility
Element ID: comments
Minimum Percent Visible: 5%
Fires when is WordPress Page equals false

The ‘KPCC — Content Scroll WordPress — Event’ tag then has both triggers attached to it. You can have multiple triggers on a tag but you should know that GTM can only handle Trigger A or Trigger B and not Trigger A and Trigger B.

Other CMSes

You’ll have to examine the code and figure out what pages need what element visible to trigger the event. Some pages might require the footer, others might have a comment section or a social sharing section that you would consider the end of the readable content. Hopefully our WordPress example above helps to guide you!

Content Consumption (Probably) Isn’t A Goal

Our rule of thumb is that if something that happens on your website makes you money immediately, or will clearly lead to you making money in the future, it’s a goal.

Otherwise what you’re measuring is important to evaluate for overall performance — but it isn’t a goal. For example, even though you can say that every session with more than 3 pageviews is a goal, it isn’t really a goal. A potential client submitting your contact form? Goal.

The other problem to consider is that goals are session-based. That means that if someone consumed three pieces of content during a single session, you would only have one goal recorded, not three. Instead, we decided to use custom metrics to accurately measure multiple Content Consumptions in a single session.

If you aren’t familiar with custom metrics, we recommend starting with Google Analytics’ explanation.

Adding Content Consumption to Google Tag Manager

First off, download the Kick Point Content Consumption JSON file.

If you need to make any customizations along the way, jump down to Customizing Our Code for Your Site. Running into problems? We have you covered in Troubleshooting.

Getting Started

On your website, determine what section of content you want “read”. For example, if your site’s content is all located within an <article> element, use this to define your section. The easiest way to find this out is by using Chrome DevTools and using the selection tool to choose the area you want to measure.

Installing the Kick Point Content Consumption Container

In your Google Tag Manager (GTM) account, go to Admin → Import Container, and select the Kick Point Content Consumption JSON file. Choose your existing workspace, and select Merge.

You will now have a Folder named Kick Point Content Consumption.

Connecting the KPCC to Google Analytics

Next, you need to attach a Google Analytics (GA) Property ID to the items in the Kick Point Content Consumption folder

Important: We recommend creating a GA Property for testing purposes, that you can add to your site alongside your regular container. This will allow you to try out the Kick Point Content Consumption tracking without affecting your regular GA Property, until you’re ready to integrate it. In this case, add the GA ID for your test property as if you don’t already have one.

If You Already Have a Google Analytics ID Variable

If you already use a Google Analytics ID variable (check under Variables in GTM), click on the ‘KPCC — GA ID’ variable and update the tag and trigger references to use your Google Analytics Property ID instead. Once you’re done, you can delete ‘KPCC — GA ID’.

If You Don’t Have a Google Analytics ID Variable

If you don’t use a Google Analytics Property ID variable, add your Property ID (in the format UA-XXXXXXXX-X) in the variable named ‘KPCC — GA ID’.

Configuring the Kick Point Content Consumption Container

Variable: ‘KPCC — Generate Content Dwell Interval’

Find the variable named ‘KPCC — Generate Content Dwell Interval’. You will see a block of JavaScript.

On Line 8, change the value for the variable includedElements to match the HTML element containing your posts content. It’s set to ‘article’ by default (note the angle brackets are not included). If you need to target by class or ID, you can. Just make sure that your element of choice excludes the header, footer, and sidebar of your site — unless you really want to include that information as well (not recommended).

If you need to target multiple elements, enter a comma-separated list. See here for more info on the accepted formats.

These examples work:

• var includedElements = “.page-header__page-intro”;
• var includedElements = “#main”;
• var includedElements = “p”;
• var includedElements = “p, .page-header__page-intro”;
• var includedElements = “.page-header__page-intro, .content_block_text”;
• var includedElements = “h1.entry-title”;

This one doesn’t work:

• var includedElements = “.page-header__page-intro h1”;

If you have a Squarespace site, you can set includedElements to ‘section#page’. Double-check this against your site’s template, just in case.

On Line 10, set the variable wordsPerMinute to match your audience’s reading speed. It’s set to 250 words per minute by default. This number should be a whole number (no decimals). We’ve chosen this as a default as it is the average adult reading speed in North America. You may want to change this depending on your circumstances. We have included alternate values for both slower and faster readers in the comment on line 9.

Save your updates.

Trigger: ‘KPCC — Content Scroll — Trigger’

Find the trigger named ‘KPCC — Content Scroll — Trigger’. This trigger is how the code knows that the end of the content has been reached. It is set to target a footer section with an id of ‘footer’ by default, but depending on how your site is set up, you may want to change this.

If your site is built with WordPress, locate the triggers named ‘KPCC — Content Scroll — WordPress Pages’ and ‘KPCC — Content Scroll — WordPress Posts’ instead. Update the element in these triggers to match your site’s setup. On our site, we set Pages to detect our rocketship, and set Posts to detect the comments. In this case, you won’t need ‘KPCC — Content Scroll — Trigger’, or the tag ‘KPCC — Content Scroll — Event’, and they can be deleted. You will also need to update Line 18 of the Tag ‘KPCC — Page Viewed and Read Tracking’ to match the element set for Pages as well (this is also set to ‘rocketship’ in our example).

If your site is not using WordPress, but is using a comparable CMS, you (or your developer) can customize these variables to match it instead. In this case, you will also need to update the variable named ‘KPCC — Content Scroll — is WordPress Page’ to detect a class unique to your CMS’s pages instead. You won’t need ‘KPCC — Content Scroll — Trigger’, or the tag ‘KPCC — Content Scroll — Event’, and they can be deleted.

If your site is using Squarespace, verify that your template uses a <footer> element with an ID of ‘footer’. If so, you can leave ‘KPCC — Content Scroll — Trigger’ at the default. If not, update this space to match how your site’s template identifies the footer. You can delete the variable and triggers for WordPress.

If your site is not WordPress and not using a CMS, and it would still be useful to differentiate between posts and pages, use ‘KPCC — Content Scroll — Trigger’. You can delete the variable and triggers for WordPress.

Adding Custom Metrics

Finally, we need to set up your Custom Metrics. This is where the results will be recorded in Google Analytics. Thank you to Mike Arnesen of UpBuild for suggesting we use Custom Metrics. They’re far more flexible than (for example) GA events and easier to work with in reports.

Go to the Google Analytics Admin page and under Custom Definitions (in the middle column) you will find Custom Metrics. Here you will set up three Custom Metrics (make sure to record the index numbers GA generates!)

• Content Dwell
• Content Scroll
• Content Consumed

For each of the following tags, ensure ‘Enable override settings’ is checked, and locate More Settings → Custom Metrics. You should see a section for Custom Metrics with some values already in place. Update these index and metric values as described below.

• KPCC — Content Dwell — Event
• Under ‘Index’, enter the Content Dwell index number from GA
• Under ‘Metric Value’, enter ‘1’
• KPCC — Content Scroll — Event (if not using WordPress) OR KPCC — Content Scroll WordPress — Event (if using WordPress)
• Under ‘Index’, enter the Content Scroll index number from GA
• Under ‘Metric Value’, enter ‘1’
• KPCC — Viewed and Read — Event
• Under ‘Index’, enter the Content Consumed index number from GA
• Under ‘Metric Value’, enter ‘1’

You’ve made it to the end. Don’t forget to publish your GTM container!

Is It Working?

Once your GTM container additions are done, click the grey Preview button at the top right of GTM to enter Preview mode.

In a new browser tab, view the site corresponding to your GTM container. You should see a Google Tag Manager testing pane at the bottom.

Navigate to one of the pages you want to test Content Consumption on, like a blog post. Under Summary in the GTM testing pane, watch for events to show up. On page load, you should see the events ‘KPCC — Page Viewed and Read Tracking’ and ‘KPCC — Content Dwell — Custom Timer’. If you scroll down the page and reach the bottom, you should see ‘KPCC — Content Dwell — Event’. If you’re using the WordPress version, you should see ‘KPCC — Content Scroll — Event’. If you’re not using WordPress, you will see ‘KPCC — Viewport Tracking — Event’ appear instead.

Next, go to your site’s Google Analytics property, and navigate to Real Time → Events. Under Event Category, you should see an event called ‘Viewport Tracking’ with an Event Action matching the page path for the page you just visited.

Events are useful for determining if this is working. Once things are running smoothly, you may want to stop these events from showing up in Google Analytics. To do that, open up the Event tag called ‘KPCC — Viewport Tracking — Event’ and click on three vertical dots next to the save button. Choose ‘delete’ from the list to remove the event. Once you’re done, publish the container, and you will no longer see ‘Viewport Tracking’ show up under Events going forward.

Customizing Our Code for Your Site

If your site is using a different CMS than what we’ve outlined here, or no CMS at all, you may need to customize the tags, triggers, or variables we’ve provided to better suit your situation. We’ve provided some additional information on how some key parts were set up to help you along the way.

KPCC — Content Dwell — Custom Timer (Tag)

eventName

This is the event name that is pushed to the JavaScript dataLayer. We left this as custom.timer. If you want to change this value you will need to also update the trigger KPCC — Content Dwell — Trigger.

interval

This doesn’t need to change unless you change the name of the user-defined TimeToRead Interval variable.

limit

We have left it as 1.

KPCC — Page Viewed and Read Tracking (Tag)

This is a Custom HTML tag.

eventName

We left this as custom.viewed_read. If you want to change this value you will need to also updateViewedAndRead — Trigger.

interval

Defines how much time should pass before the timer begins. It’s set at default to 3000 milliseconds (3 seconds).

limit

This is set to Unlimited so it will track multiple page view and reads.

Troubleshooting

If none of these answers solves your problem, please let us know!

JavaScript Errors

If you have errors in your website’s JavaScript these scripts will very likely run into problems. Really, any custom Google Tag Manager scripts will run into problems if you have JavaScript errors — fix those errors first!

To test for JavaScript errors on your site, use the Chrome DevTools Console. Load your website up in Chrome, and you’ll see a red X icon at the top right if there are errors. Get busy debugging or ask your web developer to fix these errors for you!

Testing WordCount On a Page

Are you finding that you never record any Content Dwell metrics? It might be that the includedElements values are wrong in your ‘KPCC — Generate Content Dwell Interval variable.

Testing this requires the Chrome DevTools Console again.

Copy paste this code into your console, replace the includedElements value with your value from GTM and hit enter:

var includedElements = "article";
var wordsPerMinute = 250;
var nodes = document.querySelectorAll(includedElements),i;
var gross = "";
var wordCount = null;
var timeToRead = null;
var interval = null;
if(nodes.length > 0){
for (i = 0; i < nodes.length; i++) {
gross += nodes[i].innerText;
}
wordCount = gross.replace(/(<([^>]+)>)/ig,"").split(' ').length;
timeToRead = Math.ceil(wordCount / wordsPerMinute);
interval = timeToRead*60*1000;
console.log("wordCount:" + wordCount);
console.log("timeToRead: " + timeToRead);
console.log("interval: " + interval);
} else {
console.log('no nodes');
}

If you get ‘no nodes’ showing up in your console, there may be a problem with your includedElements.

If you can see the words wordCount but there is no value or the value is undefined, that means the includedElements could be found but there was nothing for innerText (the text inside whatever element you’ve decided to use for your page content). If your wordCount is wrong then timeToRead and interval will also be wrong.

Very Short Pages

You may find that pages with very small amounts of content (such as Contact pages) don’t seem to return accurate information. This could be because Dwell is met almost immediately upon loading the page, or the page is so short that your Scroll requirement is met as soon as the page is loaded.

Timer Isn’t Measuring Correctly

Similarly, if you change the value for the variable interval in the tag ‘KPCC — Page Viewed and Read Tracking’, you may find that the timer is starting too soon or too late to get a good measurement of how long the person has been on the page.

If your site’s pages load faster or slower than the three seconds (3000 milliseconds) we’re using, you may also need to adjust this number to match your site’s average page load time.

No Data in GA

If you’re not seeing an event called ‘Viewport Tracking’ under Real Time → Events in Google Analytics, you may not have your GA ID variable set up correctly, or there may be a problem with how it has been added to some events.

To troubleshoot this, please see Simo Ahava’s post on how to use the GA ID variable.

No Content Scroll Event in GA

If your Viewport Tracking event isn’t showing up, check to make sure you set the end of page conditions correctly, and that you have removed the tags and triggers not relevant to your site (ex: WordPress vs. non-WordPress).

If you are using WordPress, you should have deleted the trigger ‘KPCC — Content Scroll — Trigger’. For pages, ensure ‘KPCC — Content Scroll — WordPress Pages’ is set to detect the correct element for the bottom of the page, and that Line 18 of the Tag ‘KPCC — Page Viewed and Read Tracking’ is set to match that element. Also check that ‘KPCC — Content Scroll — WordPress Posts’ is set to an appropriate element to detect the bottom of the page as well; depending on your site, this may be different from Pages.

If you’re not using WordPress (or haven’t adapted those events to your CMS), you should have deleted the tags ‘KPCC — Content Scroll — WordPress Pages’, ‘KPCC — Content Scroll — WordPress Posts’, and ‘KPCC — Content Scroll WordPress — Event’. You should also have deleted the variable ‘KPCC — Content Scroll — is WordPress Page’. Ensure the trigger ‘KPCC — Content Scroll — Trigger’ is set to the correct element to detect the bottom of your page (ex: ‘footer’).

Turning Data Into Insights

Of course, all this data isn’t useful unless you can do something with it.

Custom Segments

One of the easiest things to do is create four Custom Segments in Google Analytics — one for each type of visitor. They are:

Bouncers: Didn’t stay on the page long enough to read it and didn’t scroll to the end of the content.

Skimmers: Scrolled to the end of the content, but weren’t on the page long enough to read it fully.

Tab Hoarders: Stayed long enough on the page to read it, but didn’t scroll to the end of the content. You know who you are.

Consumers: Stayed long enough on the page to read it, and scrolled to the end of the content.

We’ve used “per session” for these examples, which means that a visitor didn’t have to consume everything they found. If they consumed just one of the many pages they visited, they count as a consumer. If you want to be more specific, change this to “per hit”. That would mean for example, that someone could consume one piece of content but scroll past another — they would be counted in both the Skimmer and Consumer segments if it was “per hit” but would only be in the Consumer segment if you chose “per session”. How you set this up will depend on how your audience and how you want to segment them.

Once you have your segments set up, you can view how these different segments of your audience engage with your site. Are tab hoarders more likely to buy, but only after the tab has sat around for a few days? Maybe everyone who comments on your blog are skimmers and that explains a thing or two about the types of comments you get. Have a really popular page that ranks well, but it turns out everyone who views it is a bouncer? You get the idea.

Google Analytics Reporting

Another quick option is creating a custom report in Google Analytics — for example, you can report on Pageviews, Content Dwell, Content Scroll, Content Consumed, and Goal Conversion Rate, sorted by the Page dimension. To make it even easier, we’ve created a report to get you started — you can add that to your GA account here.

But these raw numbers have limitations. They don’t help you truly visualize what’s going on with your content because you need the context — did you go from 500 to 100 Content Consumptions because your overall pageviews went from 5000 to 1000, or did you start publishing really boring content?

Enter Google Data Studio.

Google Data Studio

There are a lot of great things about Google Data Studio (GDS) but one of the best things are Calculated Fields. If you haven’t worked with GDS or Calculated Fields before, start with this overview at Lunametrics.

You’ll be creating three Calculated Fields:

• % Content Dwell — Content Dwell / Pageviews
• % Content Scroll — Content Scroll / Pageviews
• % Content Consumed — Content Consumption / Pageviews

Presenting each metric as a percentage gives you the context you need. We’ve suggested dividing by Pageviews as these metrics are created on a pageview basis, but you may find it more useful to divide by users, particularly if you’re using custom dimensions to track users.

Now, add a table in Google Data Studio with this information. You can even use your GA segments you created earlier to only show a subset of your users. Sorting by each column turns up useful insights that you can begin to apply right away.

Here is a small sample of our own data:

You’ll immediately notice that the % Content Consumed is very small — we’ve found in our tests so far that lots of people scroll, lots of people hang around, but few people actually do both. This is why this metric is necessary!

Now you can see where this data can take you. For example, knowing which pages have high dwell but low scroll — are people getting bored and wandering off? Our next step would be to look at overall scroll data for these pages, see where people are dropping off, then determine what we can do to improve the page. Use these metrics as a jumping-off point for further investigations.

What’s Next

We’ll be working on more ideas on what to do with this data and will be sure to update when we do — watch our newsletter for details.

How are you using content consumption to make better decisions? Let us know in the comments below or by getting in touch.

Finally, if you got this far, hopefully you have been on the page long enough to have consumed this content. Thank you!