I want to track the scrolling status using Google Analytics event tracking. Such needs have been appearing for several years, and as a solution to this, I think most people are implementing event tracking to determine what percentage of the screen was scrolled.
In this article, I would like to explain how to implement it modernly, along with the problems of this implementation method.
What do you really want to know and what are your next steps?
I’m sure each company has their own ideas about this, but I often hear people say, “I want to know who read the content properly to the end.” However, I think the real idea is to ” know where in the content the dropout occurs and improve the content at that dropout point “.
In other words, it is thought that they are doing “scroll measurement” in order to identify the places where they want to finally take the action of “improving the content”.
Common implementation method
To put it simply, the scroll measurement method that has already been talked about on various sites is to the effect of “tracking an event every time the page scroll progresses by 10%!” If you search for this, you will find various explanation sites. JavaScript code using jQuery will also appear, and setting methods using Google Tag Manager will also appear.
The purpose of this article is not to introduce these methods. If you want to know how to use percent, I think it’s good to hit other sites.
Problems with this implementation method
The percentage measurement used so far is nonsense. In fact, even if the report shows that most dropouts occur in the 30% to 40% range, you still need to decipher where the dropout points are. Moreover, it’s quite possible that the percentage threshold will change between PC and mobile layouts. In fact, when content placed in the sidebar on the PC layout is changed to the mobile layout, if the layout is stacked vertically in the footer, the percentage value measured as the reading completion rate for the PC layout and the mobile layout will be large. to change. Even if there are few sites where the sidebar falls straight down as it is, there are quite a few designs where the content that was deployed in multiple columns in the PC layout is stacked vertically in a single column in the mobile layout.
In other words, the problems with this implementation method are summarized in the following two points.
- Even if you know the percentage, you still have to search for the content corresponding to that position.
- The relationship between content and percentage changes depending on the user’s viewing environment.
For these reasons, it’s sometimes difficult to tie it to an action, and I’m not already measuring scrolls based on percentages.
Improved modern scroll measurement
Now, if we’re going to measure scrolling, what kind of measurement should we implement? For the sake of simplicity, I’ll use scrolling in a “blog content page” like SEM Technology (but the same idea can be applied to many sites, not just blogs).
overview
First of all, I think it’s easier to understand if you actually see the report screen you’re looking at. The report below is an event label report when you narrow down the page from the “Behavior > Event > Page” report of Google Analytics and narrow down the “Event Category” and “Event Action” so that only the desired event is displayed.
What used to be vertical percentages is now the article section name in this report (the “H2” before the section name stands for the tag name). With this, just by looking at this report screen, you can easily understand “Which article section is leaving?” Since you can immediately see the departure point, you can naturally see the point where the content should be rewritten.
Separately from this, I want to be able to see the number of articles that have been read, so I am sending another event when the article has been read. In fact, this reading completion rate does not use the method of setting a threshold using a percentage, but rather captures the end of the article and sends an event.
Implementation method
The implementation method introduced here assumes the functionality of Google Tag Manager. If you write it in normal JavaScript, it will be quite complicated, so I think it would be a good idea to consult with a front-end engineer.
Add Variable
Add two variables. The first is a variable to get the “name of the tag” and the second is a variable to get the “element text value of the tag”.
The variable to get the name of the tag is simple, just specify “data layer variable” in “variable type” and enter “gtm.element.tagName” in “data layer variable name”. When creating custom items using data layer variables, the “dataLayer.push” command is often required, but “tag name” can be used without using such a command. Just create it.
Next, for the variable to get the “tag element text value”, specify “auto event variable” for “variable type” and select “element text” for “variable type”. increase. This can also be created without writing JavaScript code, so even if you are not familiar with programming, you can easily create it.
Below is a capture of the two variables we created.
Add Trigger
Create a trigger that fires each time a section of your blog post is viewed. For this, we will use the trigger type ” Display element ” implemented in the fall of 2017 in Google Tag Manager .
Using this trigger type, let’s create a trigger like the one below. In the example below, the “Where this trigger fires” and “Element Selector” values are for SEM Technology, so change them to match your site.
This trigger fires when the page is scrolled and an element marked up with an h2 tag becomes visible.
Add tags
If you have come this far, I think that there are many people who have an image of tag settings, but I will set them with the following contents. The created trigger is specified as the delivery trigger, and the “element tag name” and “element text name” are entered in the event attributes. In some cases, the “element tag name” may not be necessary.
Applications of this implementation
I think there are cases where you want to fire an event even at the timing of reading an article. In the above implementation, an event is sent for each section and it is not possible to measure “reading” separately.
However, by applying the above implementation, you can create a trigger “when an element in the footer part of the article is displayed” and use that trigger to send “Read finished” as a separate event. increase. SEM Technology also has a separate event tag to run when the “ad space in the article footer” is displayed.
summary
In this article, I introduced an implementation method that further evolved “scroll measurement that has been implemented in many cases so far”. Also, the implementation introduced here is designed so that even those who are not proficient in JavaScript can easily implement it.
It is recommended for those who have not been able to successfully connect the scroll measurement using percentages to the action, and for those who are planning to implement scroll measurement in the future.
