Scrolling tracking is one of the Event Tracking that is well implemented in Google Analytics. And most of them are based on scrolled percentage implementation.
In this article, I will point out the problem of old implementation(it is based on scrolled percentage) and I would like to introduce new implementation.
Why do We Measure Scrolling Action?
A variety of purposes can be considered. A particularly common purpose is “We want to know the number of times the reader have properly read the contents until the end”.
In other words, “scroll tracking” is carried out to take action of “content Improvement” in the end. Or we want to count conversion when you read to the contents end.
Old Version Implementation
“How to implement scroll tracking” is described in some web sites. However, most of these implementation are based on the scrolled percentage of the page. This implementation can be using jQuery or implementing with Google Tag Manager.
However, the purpose of this article is not introduce these methods(based on scroll percentage). If you would like to know the based on scroll percentage implementation, please refer to other web site.
The Problems of Old Version
Tracking based on the percentage of scrolling has some weakness. For example, it is difficult to combine actual content to percentage position. Besides, one of the weakness is that the web page layout changes on PC and smartphone.
In short, there are two problems with old version implementation.
- Difficult to combine actual coontent to percentage position.
- Depending on the user’s browsing environment.
For these reason, I have not implementation scroll tracking based on scroll percentage.
Solution
Let me introduce the solution I am using. In this time, I will introduce the article page of the blog as an example.
Overview
At first, please look at the Google Analytics Report I am looking at. Following capture is my event summary report(filter by a article page).
In the old style implementation, I think the percentage value is displayed in the event label dimension. However, in this report, the headline of the article is displayed in the event label dimension, not the percentage value.
This report allows you to determine which section you are leaving the article. So, we can identify where the section should be rewritten.
How to Implement
The implementation method is assumed the feature of Google Tag Manager. I think that it will be quite complicated when writing in ordinary JavaScript.
Add Variables
We add two variables in total. The first is the variable to get “name of HTML tag”. The second is the variable to get “HTML tag element text value”.
For the setting of each, refer to the following images.
Add Triggers
Next we will create a trigger. Set up triggers to fire each time a section heading of blog post is displayed. For that purpose, we use “Visibility Elements” trigger type. The trigger type is implemented in the fall of 2017.
Actual creation triggers are as following. But the CSS selector and page condition is example. So, please change according to your site.
This trigger allows you to fire a tag on each time the page scrolls and section header are visibled.
Note: “When to fire this trigger” is setting to “Once per element”.
Add Tags
Finally, we will create a tag. The tag configuration is following.
Enhanced Example
Likewise, we can easily tracking events at the time of reading articles(NOT based on scroll percentage). Specifically, we use the “Element Visibility” trigger and fire the tag when the element in the footer(ex: “.content-footer”) is displayed.
Conclusion
In this article, I introduce the implementation method which is enhanced scroll tracking. It is not based on scroll percentage. Besides, the method is easy implementation even if you are not programer.
