Content Interaction Tracking with Google Analytics
By default, Google Analytics keeps track of how visitors interact with site content. Using the standard tracking code, you can receive various information such as: the time spent by the visitor on the page (time on site), the bounce rate and the number of views (pageviews).
But sometimes this data may not be enough. For example, for bloggers or sites where articles and various publications are the main content, these metrics may not be enough.
We want to receive more detailed information on each message or article. Do people read comments or just a message, an article? Do they open several messages in tabs?
What is the best way to get detailed information about how site visitors interact with each page?
')
This article is about measuring the degree of interaction with content using a custom Google Analytics tracking code (hereafter GA).
As we mentioned above, our goal is to get a better idea of how visitors interact with each page of the site. Using the goals proposed by Thomas Baekdal, we will track:
Think about significance! We can accurately measure the number of articles actually read. We can even see in which articles visitors read the comments and go to the bottom of the page.
All of the above can be tracked using the standard GA event tracking feature. The bottom line is that we will record events when certain actions occur. We will register events based on page scrolling by visitors.
The event tracking feature in GA includes five components: category, action, label, value, and hidden counter (category, action, label, value, implicit count). We need to define the data we want to see in GA reports.
All activities related to reading, we combine into one category and call this category Reading.
There are four main actions in this category:
Other important information for us is the title and URL of the page. We need this data in order to identify the most interesting articles for visitors and which articles influence the further involvement of the audience. GA automatically tracks URLs and page headers so there’s no need to add this to events.
We will also use a custom variable (custom variable) to distinguish visitors by groups. If it took the visitor less than 60 seconds to reach the bottom of the page, we will assign this visitor to the Scanners group. But if it took more than 60 seconds for the visitor to reach the bottom of the page - put it in the Readers group.
Finally, we set events as a goal. Let's set one goal for those who have reached the end of the article, and one goal for those who have reached the end of the page. This is an easy way to get a percentage of the visitors who performed these actions.
First, we will use the jQuery library. Make sure your jQuery library is connected to your site.
Below is the code, feel free to copy, edit or share it. Just do not forget the people who contributed to this code!
Let's start with a simple variable declaration. Please note that the values of some variables can and should be changed.
You can change the
Now the Article Load action:
Next is the code that checks the position. First, the data is collected where the visitor is on the page and how far he scrolled.
Then we start the check.
First, we check if the visitor has scrolled enough for the first event to occur (150 pixels in the example).
Caution: The above event will change your bounce rate. As soon as someone starts to scroll the page, we do not consider it a failure. Thus, this event will underestimate the bounce rate. It should be noted that these events will change the time on the site. You will see that time on your site will grow.
Further, if the visitor has reached the end of the article (we check the div that contains the article), then we consider this the onset of the event.
It is important to note that the above code is for a blog where the div containing the article is called
Finally, we track visitors reaching the end of the page. Next, do a few things:
We store this variable in slot 5 of the user variable, because this is our free slot. You can use any other free slot. Read more about user variables here .
As we record the time spent on the page, we can use this data to increase the accuracy of our measurements. We chose 60 seconds arbitrarily. Once enough data has accumulated, this value can be corrected.
And finally, the code that checks whether the visitor scrolled to the bottom of the page:
That's all the code. You can copy it here and post it on your website if you want.
Thanks author:
Nick Mihailovski - Google Developer (sits opposite the author)
Thomas Baekdal is a smart guy and published on www.baekal.com
Avinash Kaushik - if you do not know who it is ...
Joost de Valk - creator of Google Analytics for WordPress
Eivind Savio - blogger and GA consultant
Source (original in English): http://cutroni.com/blog/2012/02/21/advanced-content-tracking-with-google-analytics-part-1/
But sometimes this data may not be enough. For example, for bloggers or sites where articles and various publications are the main content, these metrics may not be enough.
We want to receive more detailed information on each message or article. Do people read comments or just a message, an article? Do they open several messages in tabs?
What is the best way to get detailed information about how site visitors interact with each page?
')
This article is about measuring the degree of interaction with content using a custom Google Analytics tracking code (hereafter GA).
Business goals
As we mentioned above, our goal is to get a better idea of how visitors interact with each page of the site. Using the goals proposed by Thomas Baekdal, we will track:
- how many people scroll the page;
- when a person starts scrolling;
- when a person reaches the end of the article (not the end of the page, but the area where the article or message ends);
- which visitors simply looked through the articles and which ones read them.
Think about significance! We can accurately measure the number of articles actually read. We can even see in which articles visitors read the comments and go to the bottom of the page.
Tracking technique
All of the above can be tracked using the standard GA event tracking feature. The bottom line is that we will record events when certain actions occur. We will register events based on page scrolling by visitors.
The event tracking feature in GA includes five components: category, action, label, value, and hidden counter (category, action, label, value, implicit count). We need to define the data we want to see in GA reports.
All activities related to reading, we combine into one category and call this category Reading.
There are four main actions in this category:
- Article load: will measure how many times the article has loaded in the browser. In general, this is another page view count (standard pageviews). This event will help us understand the context of other events that we are going to track;
- Start Reading: tracks when the visitor scrolls down the page. Occurs when the visitor scrolls 150 pixels down the page. This value can be changed. It also tracks how much time passes after the page starts scrolling;
- Content Bottom: tracks when a visitor reaches the end of the article and tracks how long it takes to scroll from beginning to end of the article;
- Page Bottom: keeps track of when the visitor reached the bottom of the page and how long it took him.
Other important information for us is the title and URL of the page. We need this data in order to identify the most interesting articles for visitors and which articles influence the further involvement of the audience. GA automatically tracks URLs and page headers so there’s no need to add this to events.
We will also use a custom variable (custom variable) to distinguish visitors by groups. If it took the visitor less than 60 seconds to reach the bottom of the page, we will assign this visitor to the Scanners group. But if it took more than 60 seconds for the visitor to reach the bottom of the page - put it in the Readers group.
Finally, we set events as a goal. Let's set one goal for those who have reached the end of the article, and one goal for those who have reached the end of the page. This is an easy way to get a percentage of the visitors who performed these actions.
Code
First, we will use the jQuery library. Make sure your jQuery library is connected to your site.
Below is the code, feel free to copy, edit or share it. Just do not forget the people who contributed to this code!
jQuery(function($) { // Debug flag var debugMode = true; // Default time delay before checking location var callBackTime = 100; // # px before tracking a reader var readerLocation = 150; // Set some flags for tracking & execution var timer = 0; var scroller = false; var endContent = false; var didComplete = false; // Set some time variables to calculate reading time var startTime = new Date(); var beginning = startTime.getTime(); var totalTime = 0; // Track the aticle load if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]); } // Check the location and track user function trackLocation() { bottom = $(window).height() + $(window).scrollTop(); height = $(document).height(); // If user starts to scroll send an event if (bottom > readerLocation && !scroller) { currentTime = new Date(); scrollStart = currentTime.getTime(); timeToScroll = Math.round((scrollStart - beginning) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]); } else { alert('started reading ' + timeToScroll); } scroller = true; } // If user has hit the bottom of the content send an event if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd - scrollStart) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]); } else { alert('end content section '+timeToContentEnd); } endContent = true; } // If user has hit the bottom of page send an event if (bottom >= height && !didComplete) { currentTime = new Date(); end = currentTime.getTime(); totalTime = Math.round((end - scrollStart) / 1000); if (!debugMode) { if (totalTime < 60) { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]); } else { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]); } _gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]); } else { alert('bottom of page '+totalTime); } didComplete = true; } } // Track the scrolling and track location $(window).scroll(function() { if (timer) { clearTimeout(timer); } // Use a buffer so we don't call trackLocation too often. timer = setTimeout(trackLocation, callBackTime); }); });
jQuery(function($) { // Debug flag var debugMode = true; // Default time delay before checking location var callBackTime = 100; // # px before tracking a reader var readerLocation = 150; // Set some flags for tracking & execution var timer = 0; var scroller = false; var endContent = false; var didComplete = false; // Set some time variables to calculate reading time var startTime = new Date(); var beginning = startTime.getTime(); var totalTime = 0; // Track the aticle load if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]); } // Check the location and track user function trackLocation() { bottom = $(window).height() + $(window).scrollTop(); height = $(document).height(); // If user starts to scroll send an event if (bottom > readerLocation && !scroller) { currentTime = new Date(); scrollStart = currentTime.getTime(); timeToScroll = Math.round((scrollStart - beginning) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]); } else { alert('started reading ' + timeToScroll); } scroller = true; } // If user has hit the bottom of the content send an event if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd - scrollStart) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]); } else { alert('end content section '+timeToContentEnd); } endContent = true; } // If user has hit the bottom of page send an event if (bottom >= height && !didComplete) { currentTime = new Date(); end = currentTime.getTime(); totalTime = Math.round((end - scrollStart) / 1000); if (!debugMode) { if (totalTime < 60) { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]); } else { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]); } _gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]); } else { alert('bottom of page '+totalTime); } didComplete = true; } } // Track the scrolling and track location $(window).scroll(function() { if (timer) { clearTimeout(timer); } // Use a buffer so we don't call trackLocation too often. timer = setTimeout(trackLocation, callBackTime); }); });
Let's start with a simple variable declaration. Please note that the values of some variables can and should be changed.
// Debug flag // CHANGE THIS TO false BEFORE INSTALLING var debugMode = true; // Default time delay before checking location var callBackTime = 100; // # px before tracking a reader var readerLocation = 150; // Set some flags for tracking & execution var timer = 0; var scroller = false; var endContent = false; var didComplete = false; // Set some time variables to calculate reading time var startTime = new Date(); var beginning = startTime.getTime(); var totalTime = 0;
// Debug flag // CHANGE THIS TO false BEFORE INSTALLING var debugMode = true; // Default time delay before checking location var callBackTime = 100; // # px before tracking a reader var readerLocation = 150; // Set some flags for tracking & execution var timer = 0; var scroller = false; var endContent = false; var didComplete = false; // Set some time variables to calculate reading time var startTime = new Date(); var beginning = startTime.getTime(); var totalTime = 0;
You can change the
callBackTime and readerLocation . callbackTime is the time (in milliseconds) that the browser will wait before starting to check the position of the scroll bar. Eliminates any scrolling delays.readerLocation distance in pixels that the visitor must scroll before we consider this an event and classify as the beginning of the reading.Now the Article Load action:
// Track the aticle load if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]); }
// Track the aticle load if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]); }
Next is the code that checks the position. First, the data is collected where the visitor is on the page and how far he scrolled.
bottom = $(window).height() + $(window).scrollTop(); height = $(document).height();
bottom = $(window).height() + $(window).scrollTop(); height = $(document).height();
Then we start the check.
First, we check if the visitor has scrolled enough for the first event to occur (150 pixels in the example).
// If user starts to scroll send an event if (bottom > readerLocation && !scroller) { currentTime = new Date(); scrollStart = currentTime.getTime(); timeToScroll = Math.round((scrollStart – beginning) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]); } else { alert('started reading ' + timeToScroll); } scroller = true; }
// If user starts to scroll send an event if (bottom > readerLocation && !scroller) { currentTime = new Date(); scrollStart = currentTime.getTime(); timeToScroll = Math.round((scrollStart – beginning) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]); } else { alert('started reading ' + timeToScroll); } scroller = true; }
Caution: The above event will change your bounce rate. As soon as someone starts to scroll the page, we do not consider it a failure. Thus, this event will underestimate the bounce rate. It should be noted that these events will change the time on the site. You will see that time on your site will grow.
Further, if the visitor has reached the end of the article (we check the div that contains the article), then we consider this the onset of the event.
// If user has hit the bottom of the content send an event if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd – scrollStart) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]); } else { alert('end content section '+timeToContentEnd); } endContent = true; }
// If user has hit the bottom of the content send an event if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd – scrollStart) / 1000); if (!debugMode) { _gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]); } else { alert('end content section '+timeToContentEnd); } endContent = true; }
It is important to note that the above code is for a blog where the div containing the article is called
entry-content . So look at which div contains an article on your blog.Finally, we track visitors reaching the end of the page. Next, do a few things:
- we consider how much time it took the visitor;
- send to events;
- use a custom variable that we need to group visitors. If a visitor spends more than 60 seconds to view the entire page, then put it in the Readers group. If a visitor spends less than 60 seconds, then we place him in the Scanners group.
We store this variable in slot 5 of the user variable, because this is our free slot. You can use any other free slot. Read more about user variables here .
// If user has hit the bottom of page send an event if (bottom >= height && !didComplete) { currentTime = new Date(); end = currentTime.getTime(); totalTime = Math.round((end – scrollStart) / 1000); if (!debugMode) { if (totalTime < 60) { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]); } else { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]); } _gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]); } else { alert('bottom of page '+totalTime); } didComplete = true; }
// If user has hit the bottom of page send an event if (bottom >= height && !didComplete) { currentTime = new Date(); end = currentTime.getTime(); totalTime = Math.round((end – scrollStart) / 1000); if (!debugMode) { if (totalTime < 60) { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]); } else { _gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]); } _gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]); } else { alert('bottom of page '+totalTime); } didComplete = true; }
As we record the time spent on the page, we can use this data to increase the accuracy of our measurements. We chose 60 seconds arbitrarily. Once enough data has accumulated, this value can be corrected.
And finally, the code that checks whether the visitor scrolled to the bottom of the page:
// Track the scrolling and track location $(window).scroll(function() { if (timer) { clearTimeout(timer); } // Use a buffer so we don't call trackLocation too often. timer = setTimeout(trackLocation, callBackTime); });
// Track the scrolling and track location $(window).scroll(function() { if (timer) { clearTimeout(timer); } // Use a buffer so we don't call trackLocation too often. timer = setTimeout(trackLocation, callBackTime); });
That's all the code. You can copy it here and post it on your website if you want.
Thanks author:
Nick Mihailovski - Google Developer (sits opposite the author)
Thomas Baekdal is a smart guy and published on www.baekal.com
Avinash Kaushik - if you do not know who it is ...
Joost de Valk - creator of Google Analytics for WordPress
Eivind Savio - blogger and GA consultant
Source (original in English): http://cutroni.com/blog/2012/02/21/advanced-content-tracking-with-google-analytics-part-1/
Source: https://habr.com/ru/post/139007/
All Articles