How can you find whether your website’s visitors are interested in your content? The best way is to track their scrolling activity. Here is how it’s done.
Do you ever read anything without interest? Probably not. People browsing your web page scroll through your content only when they are hooked into it.
If they want to get out after seeing your first sentence, they do not scroll.
They bounce.
This is one of the reasons of horrible bounce rates and pathetic time on page metrics for some websites.
However, bounce rate may not always indicate bad content on your website. It can also indicate that your post is so detailed and fulfilling that visitors don’t need to open any other page on your website.
But to be sure whether your visitors are reading your content, you need to track their scroll activity.
This will show you additional opportunities to place your calls to action as well.
A visitor action recorder such as Mouseflow can keep track of scrolls without needing any manual implementation.
In case of Google Analytics (GA), however, you need to do an advanced implementation, easier with the help of Google Tag Manager (GTM). Let’s see how.
The prerequisite for this tutorial is that you should be using Google Tag Manager to implement your Google Analytics tag on your website. To know how, please check out this Google help guide.
Steps
Let’s see the steps of adding a scroll tracker on your website.
- Enable scroll and page variables in Google Tag Manager.
- Create a scroll trigger on your Container Workspace in GTM.
- Test the scroll trigger by going in the GTM preview mode.
- Create your new Google Analytics tag to track scroll details (page URL and scroll percentage).
- Ensure the tag firing priority is set.
- Set the Google Analytics scroll tag to fire on the scroll trigger. Verify this on GTM preview mode.
Let’s look at each step in detail now.
Step 1: Enable Scroll Variables in Google Tag Manager
Google Tag Manager provides you many built-in variables to track details from your web pages and pass them to Google Analytics. You need to ensure that specific scroll variables are enabled.
From your Google Tag Manager dashboard, click “Variables” on the left and click “Configure.”
Enable all the scroll-related variables. You may also enable other variables such as the Page URL, Page Hostname, Referrer, etc., in order to make them available in your scroll tag.
Step 2: Creating a Scroll Trigger in Google Tag Manager
As the first step, let’s create the scroll trigger in GTM. This will be the trigger that fires the Google Analytics scroll tag on your web page. You can also go the other way around by creating the scroll tag first and then its trigger.
Go to GTM and choose the “Triggers” section on the left-hand side. Here, put an appropriate name for the trigger and then click “Trigger Configuration” and select “Scroll Depth”.
You will find two options, “Vertical Scroll Depths” and “Horizontal Scroll Depths.” For most websites, the vertical scroll is the only thing you need to track, unless you have your content placed horizontally (like a studio or image website).
After you select your scroll type, you need to put what percentage of the page you want to track using the scroll tag. For this you can put numbers in the percentages box as you can see above.
This will help the Google Analytics scroll tag to fire for each percentage threshold you define.
You can also track with the pixels. For instance, if your web page is 5000 pixels long, you can put that in the pixel measurement option (as 2000,3000,4000,5000).
But in general, you are good to go with the percentage option.
After you select the percentages, you need to choose whether to enable scroll tracking for all pages or only some.
If you want to track the scroll for some pages, you need to select them using a custom or a built-in variable available in the system, such as Page URL, Page Path, Video Title, etc. There are many options for you to choose from.
After selecting your settings, click “Save” at the top right-hand side. This will create your scroll trigger.
Step 3: Test Your Scroll Trigger
Now, you need to make sure that your scroll trigger is working perfectly. It needs to fire every time you scroll on your web page.
Simply click the “Preview” option in GTM. Now, Google Tag Manager is in the preview mode. Open your web page in a new tab in the same browser; here, you will see the preview pane at the bottom.
Now, slowly start scrolling down your web page. You should see a new event called “gtm.scrollDepth” cropping up as soon as you cross your scroll’s first threshold, the first number you put in your scroll percentage box.
For instance, if your first threshold is 30%, you will see the event as soon as you cross 30% of your web page.
This means that your trigger is working properly.
The trigger will fire on all pages by default, even in the case of the “Some Pages” implementation. It’s not a mistake. This is just the trigger; you haven’t created the actual scroll tracking tag yet.
Now, if you click the “Variables” tab in the preview pane, you will see the various variables associated with the event, as shown below.
As you can see, the scroll percentage, page URL, etc., are listed in the variables pane.
This means that your scroll trigger is working perfectly.
Now you can create the Google Analytics scroll event tag.
Step 4: Create Your Google Analytics Scroll Event Tag
You can create your Google Analytics scroll tag within Google Tag Manager itself. This tag should be activated every time the scroll trigger fires.
Go to “Tags” in GTM and click “New.”
Give a name for the tag and click “Tag Configuration” to set it up. Among the various tag types, select “Google Analytics – Universal Analytics.”
Now, within the tag configuration, select the following options.
- Track Type: Event
- Category: “Scroll Event”
- Action: {{Scroll Depth Threshold}}% Scrolled
- Label: {{Page URL}}
- Value: Scrolled
The Scroll Depth Threshold and Page URL are built-in variables that you can select from the “+” button next to the field. (Ensure that those variables are already enabled in the Step 1).
You can select “Non-Interaction Hit” as false as this will be counted as an interaction by the user and improve your bounce rate.
Finally, select the Google Analytics variable that you have already set up for your website.
The scroll tag configuration is shown in the Image 1d.9.
Below the tag configuration, you should see the “Triggering” section, where you should add the scroll trigger to the tag. Click it and select the scroll trigger you already created.
Now the tag configuration is complete. Click the “Save” button to exit.
Step 5: Ensure the Tag Priorities Are Correctly Set
You have to send the normal pageview hit to Google Analytics before an event hit. Otherwise, Google Analytics cannot link the event to the correct page.
We can do this by setting event priorities.
In your “Tag Configuration” options, click and expand “Advanced Settings.” You will find the tag firing priority here.
Give a number lower than your Google Analytics main page view tag. So, if you are putting 10 for the pageview tag, the number here should be less than that.
After setting tag firing priority, save the tag. To learn more about tag firing priority, go here.
Step 6: Real-Time Testing of the Scroll Tag
Refresh the preview mode in GTM before proceeding to save the changes.
Now, open your website in another tab to see the preview pane.
Start scrolling until you see the first gtm.scrollDepth event. Ensure that your GA scroll tag has been fired for that event, as shown below.
When you click the scroll tag, it will show you the various variables captured by it. This data is sent to Google Analytics.
As you can see in Image 1d.c, I have captured “Scroll Event” as Category, “Scrolled” as Value, “50% Scrolled” as Action, and the page URL as the Label.
The event variables can be anything depending on what you pass to them.
Step 7: Check the Real-Time Report in GA
You can now check the real-time report on Google Analytics to test if the scroll tracking is working properly.
Simply scroll further on your web page and open the real-time events view in Google Analytics.
Do you see the scroll action being captured? Click the Event Category to see the Action and Label.
This report will tell you which pages on your website are currently being scrolled by people and to what threshold.
Step 8: Go Live With the Configuration
Get back to GTM. You are still in the preview mode.
Leave the preview mode and click “Submit” to create a new version of the Workspace. Give a name and a description to distinguish it and click “Publish” to go live.
That’s it. You will now be able to track all kinds of scrolling events on your website and the data will be available in the “Events” report under “Behavior” in Google Analytics.
Additional Tip: Enabling Scroll Tracking for Some Web Pages
As mentioned earlier, you can enable scroll tracking for some web pages.
For instance, you have a landing page and want to measure its effectiveness. You don’t want to enable scroll tracking for all pages but only for the landing page.
Let’s see how this is done.
After your step 2 of creating the scroll trigger, select the “Some Pages” option.
Here, we need to select the pages that satisfy your condition. I will select Page URL as the variable and put the URL of the page that I want to track, as shown in Image 1d.h.
After setting the variable, save the trigger and refresh the preview mode.
Now, the Google Analytics scroll tag will be fired only when it is in the designated page. Verify this by opening the page in another browser tab.
To add additional conditions to limit the pages, you can use the “+” button.
Note: It’s tricky when you select additional conditions. GTM treats each condition as required. Hence, if you add a new page URL, the system does not work because GTM understands that as “fire the GA scroll tag when the page URL is A and B,” which cannot be true.
I hope this tutorial helps you track your website visitors more effectively.