How to track reading on WordPress using Google Analytics (2 hour setup)

This blog post was originally published on my site, Analytics for your blog.

Google Analytics comes with a lot of great information by default. But one of its weaknesses is that it doesn’t have an accurate way to tell you how long someone spent on a page. If they enter your page, read a blog post for a few minutes, then leave, they will be counted as a “bounce” and the time on page as 0:00.

There are two main indicators that someone is reading your posts:

1. They stay for a while to actually read instead of skimming or immediately leaving.
2. They scroll down the page to finish reading instead of exiting early.

In this post I’ll cover how to get metrics for those two goals.

You will need:

• WordPress site with access to setup plugins
• Google Analytics account
• Google Tag Manager account
• A couple of hours

Don’t worry—it won’t take you nearly as long as it initially took me, since there was no up to date blog post that covered all of this information clearly.

Setting up Google Tag Manager and Google Analytics on WordPress

To save some time, I will refer to Google Tag Manager as GTM, Google Analytics as GA, and WordPress as WP.

Step 1. Install GTM on WP, remove GA if already installed

If you already have GA installed, remove it. You’ll be installing it via GTM. It’s important that you double check the GA code is removed before installing via GTM, because duplicate GA codes will double your reported traffic. Not good.

Don’t have a GTM account? Create it here first.

Now, install GTM using the Google Tag Manager for WordPress plugin. It says it’s not tested with the latest WordPress version, but it still works just fine.

Go to the settings page of the plugin, and in the box labeled “Google Tag Manager ID” enter the ID from your GTM account. You can find it on your GTM dashboard, here:

Step 2. Install GA via GTM

Before we jump into this, here’s a quick explanation of how Google Tag Manager works. (If you know already, skip a bit below). GTM installs a snippet of code in your website that talks with the Google servers. Then, on the GTM interface, you can add “tags” to that snippet of code. GTM doesn’t have to edit your website to change it, it simply calls the script from Google and injects it into your website. Practically speaking, this means you can install some analytics code and other things on your site without having to dive into the website code.

To install GA via GTM, you need a new tag. Go to the tab labeled “Workspace” on your GTM account, and click ADD A NEW TAG. Title it “Google Analytics”. Click on Tag Configuration and choose either Universal Analytics or Classic Google Analytics. If you don’t know which one you have, read this to find out. If you’re using Classic, you should look into updating because it’s out of date and being deprecated by Google.

Enter your tracking ID into the “Tracking ID” box. To find this ID, just go to GA and look at the code right beside the name of your GA property.

Then in GTM click on the second large box, labeled “Triggering”, and choose “All Pages”. The trigger simply tells GTM when to fire the tag. All Pages means it will fire on every page as soon as it loads.

Save the tag, then click the big red “Publish” button on the top right.

Check your work: If you’ve installed GTM on WP, and you’ve installed the GA tag on GTM, your WP page should have Google Analytics now. Go to Google Analytics, choose “Real-Time” on the left, and then visit your homepage on another tab. If it detects you in a few seconds, it’s installed correctly. (If you show up twice, you might have duplicate GA tags).

Setting up scrolling and time on page with Google Analytics

The plugin that you just installed for Google Tag Manager already has some built-in events that it fires. It will track when people start scrolling, when they hit the bottom of your content, when they hit the bottom of your page, and even tell you whether they just scanned the material or actually read carefully (defined by taking 60 seconds to scroll down). You can adjust the 60 second time according to how long you consider a reader would take to actually read your articles on average.

Step 1. Enable scroll tracking 

Go to the settings page of the WP plugin and click the “Scroll tracking” tab. Check the “Enabled” box.

Most of the stuff here can be left on default, but you might want to adjust the “Scroller time” box according to how long you think it would take someone to read your average article.

Step 2. Create triggers in GTM

While the plugin will create events based on the scrolling behavior, you need to tell GTM to capture those events and send them to your GA account. For now, I’ll explain how to do this step by step. But if you want to do similar things in the future and there’s no article to help out, you should understand GTM preview mode. It’ll help you immensely with setting things up.

In GTM, go to the Variables tab on the left and click the red “Configure” button. Select all the variables. This allows you to use all the default information that GTM provides.

Now go to the triggers tab and click the red “New” button. Call it something like “Start reading”. This will be the trigger for when someone scrolls for the first time on a page. Click on “Trigger Configuration” and choose “Custom Event”. The event name is gtm4wp.reading.startReading. Click Save.

Repeat the same process for the following triggers:

• Content bottom. This is for when your reader hits the bottom of your content (the blog post, but not the bottom of the page). Event name is gtm4wp.reading.contentBottom
• Page bottom. This is for when your reader hits the page bottom. Event name is gtm4wp.reading.pageBottom
• Reader Type. This is to tell GA what type of reader the user is. The two possible values are scanner and reader. A scanner is someone who reaches the page bottom before the 60 second default time limit (which can be adjusted). Event name is gtm4wp.reading.readerType

Step 3. Create tags in GTM to send events to GA

The triggers are all set up, but now you need a Tag to send the event to GA once it is triggered.

Go to the Tags tab on the left and make a new one. Name it “Event – Start Reading”.

Under Tag Configuration, choose Universal or Classic Google Analytics and enter your Tracking ID. Under Track Type, choose Event.

What you do in the following few boxes are mostly by preference, but there are some things you should know. The Category box should contain a name for this type of event. I chose to call it “Scroll”. The Action should describe that specific trigger, so I chose “Start Reading”. For the Label, I would advise using the variable {{Page URL}}. That way you know which page the reader was on. You can leave Value blank, that’s just an optional numerical slot.

Let me explain Non-Interaction Hit real quick. Google Analytics determines time on page by counting the time between landing on the page and interacting with the page. By default, the only thing that counts as an interaction is clicking a link on the site. That means if someone opens the page, then leaves immediately, they will get a time on page of 0:00 as I mentioned earlier. But if you send GA a new event (such as this custom scrolling event we are creating), GA will add to time on page every time a new “Interaction” event happens. If you set Non-Interaction Hit to True, then that event will not count as an Interaction and will not refresh the time on page.

In my case, I want time on page to be as accurate as possible. So the more events that trigger an Interaction, the better. Therefore, I leave this as “False”. (An example of when to use “True” would be if you want it to still be considered a bounce even if they scroll but don’t hit the page bottom).

Finally, choose your “Start Reading” custom event as the trigger on the bottom box. Your final results will look something like this:

Repeat those steps for the Content Bottom and Page Bottom events. Reader Type will take one extra step to set up.

Go to the variables tab on the left, scroll down and click the red “New” button. Choose “Data Layer Variable” as the type, set Data Layer Variable Name as readerType, and set Version 2. Name the variable Reader Type and save.

Now go back to your tags and add a new one for Reader Type, following the same procedures as the other events. The only difference is that the Label will be {{Reader Type}}. That’s because you want the label to be the variable you just set up—which will pull in whether they are a scanner or a reader.

Publish your changes, then go to your website while checking Google Analytics Real Time Events. 

If you don’t see something like this when you scroll to the bottom of your website, then something is wrong.

You can slice and dice these events however you want to, just like any other Google Analytics event. If you want to see the events in retrospect, go to GA. Click Behavior > Events > Top Events. You can add the secondary dimension “Event Label” to see the page URL of the events and the reader types.

That’s it!

You’ve done it. Now you have much more insight into how many people are actually reading your content—instead of just going to the page and leaving in a few seconds.

Do yourself a favor and look up some other Google Analytics event scripts. There are plenty of blog posts with very innovative tracking techniques. Now that you have the basics of GTM down, installing other analytics scripts will be easier. Here are a couple of other ideas for events that you can implement: Scroll depth by percentages, and accurate time on page by Riveted. While I have the scroll depth installed on my sites, I decided against Riveted. It sends an event every 5 seconds, and it’s a bit of a mess when you’re trying to debug other things in GTM. I also don’t need that level of detail.

Enjoy your new metrics!