When looking at Google Analytics<\/a> reports, you\u2019d think you get a pretty good idea of how people are interacting with your site, right? I mean, you\u2019re tracking events here, pageviews there, and user timings, custom dimensions, custom metrics, and calculated metrics are all part of your daily lingo. But you\u2019re also probably aware of how futile this tracking is. After all, all you\u2019re seeing are numbers that reflect certain outcomes the visitors have produced on the website, and how these outcomes match against your preconceived goals and objectives, right? It\u2019s difficult to wrap your head around the individual use cases that constantly take place on the site, and to draw overarching conclusions or unearth business trends on the basis of these data sets can be very problematic indeed.<\/p>\n In anticipation of my upcoming talk at SMX M\u00fcnchen<\/a>, I thought I\u2019d show a pretty nifty way of adjusting what content engagement<\/strong> means on an article-by-article basis, and how to encode this using Google Tag Manager<\/a>.<\/p>\n Since this blog is pretty much the only digital property I have a stake in, it\u2019s very important to me to uncover meaning<\/strong> in the content data I\u2019m looking at. I\u2019ve done this numerous times before in articles such as:<\/p>\n And so on and so forth. But what I haven\u2019t yet tackled, at least not really, is how much time users are actually spending engaged<\/em> with my content<\/strong>. In other words, I want to see something like this:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n I\u2019m interested in knowing, among other things, out of all<\/strong> of the time users spend on the page, how much of it are they engaged with the page.<\/p>\n !!! UPDATE<\/strong> !!! Now, this is a very difficult topic to breach, so I had to ground it somewhere. Enter Yleisradio<\/a> (YLE; Finnish Broadcasting Company) and Chartbeat<\/a>.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n A week ago I had the pleasure of visiting some friends at YLE with a group of like-minded people, all interested in analytics. What Jaakko Ojalehto, Leevi Kokko, and Sami Mattila, the guys from YLE, showed us, was how they\u2019ve replicated Chartbeat\u2019s research<\/a> on engagement, and how they\u2019re utilizing this data to feed their reporters and journalists with more actionable data about how their content is faring on this enormous digital property.<\/p>\n Chartbeat\u2019s research showed, among other things, that the engagement window of a single user averages at around 5 seconds. So after interacting with the page with clicks, mouse movements, keyboard presses, and scrolls, the user would stay engaged for another 5 seconds, before starting to idle or changing to another window or browser tab:<\/p>\n Chartbeat\u2019s JavaScript is constantly listening for acts of engagement on the in-focus webpage within an active browser (full list of events indicating engagement included below). These checks indicate when a user is actively engaged on the page and, based on a study conducted by Chartbeat, will likely remain so for five additional seconds.<\/p><\/blockquote>\n As this quote from their \u201cDescription of Methodology<\/a>\u201d page implies, engagement<\/em> is something we can, and should, measure.<\/p>\n So I wanted to replicate what the YLE guys have been doing while replicating what Chartbeat have been doing. And I wanted to provide a simple means of doing so via Google Tag Manager. Thus the rest of this blog post will cover the steps required to send timing data to Google Analytics, where you\u2019re measuring the cumulative time each visitor is engaged<\/strong> with any piece of content on your site.<\/p>\n This will give you a better understanding of active time spent on the page<\/em>, as the Average Time On Page<\/strong> just doesn\u2019t describe accurately the complexity of engagement. Time On Page is, after all, quite a complex<\/a> and misleading<\/a> metric, even if there are some excellent ways<\/a> to improve it.<\/p>\n To make it all work, you\u2019ll need:<\/p>\n Custom HTML Tag<\/strong> (GTM) – To setup the script which measures engagement time<\/p>\n<\/li>\n Custom Event Trigger<\/strong> (GTM) – To fire the User Timings Tag when the timings have been calculated<\/p>\n<\/li>\n Data Layer Variable<\/strong> (GTM) – To pick up the time engaged from User Timings Universal Analytics Tag<\/strong> (GTM) – To send the timing data to Google Analytics<\/p>\n<\/li>\n Calculated Metric<\/strong> (GA) – To calculate the average time engaged per page<\/p>\n<\/li>\n Custom Report<\/strong> (GA) – To display the data correctly<\/p>\n<\/li>\n<\/ol>\n Note that there are some caveats to what you can do in Google Analytics, which depend on whether you\u2019re already using User Timings in your data collection. I\u2019ll get back to those when discussing the calculated metric you need to create.<\/p>\n Create a new Custom HTML Tag<\/strong>, give it some fancy name, and copy-paste the following code within:<\/p>\n Let\u2019s take a look at the script, just briefly and superficially, so that you have an idea of what you\u2019re doing.<\/p>\n At the very end, you have the following lines:<\/p>\n Here, you\u2019re binding the events mousedown<\/strong> (when a mouse button is depressed), keydown<\/strong> (when a key is depressed), scroll<\/strong> (when the page is scrolled), and mousemove<\/strong> (when the mouse is moved) to send a pulse<\/em> that the user is engaged. If there\u2019s a 5000 millisecond<\/strong> (5 second) delay between pulses, the user is set as idle.<\/p>\n Finally, every 15 seconds the cumulative engaged time is sent to Google Analytics, resetting the time engaged for the next 15 second stretch.<\/p>\n So this is the heart of the script. The events are taken directly from Chartbeat\u2019s study, and nicely cover pretty much all of the ways in which the user can tell the browser they haven\u2019t fallen asleep. Whether or not they model engagement<\/strong> is another, more philosophical, question, but at least they model interaction<\/strong>.<\/p>\n As you can see, mobile-specific events such as touchstart<\/strong> and touchend<\/strong> are missing. This is because, first of all, the way you interact with a page while reading on your phone is different from the idle doodling you do while using a mouse. Secondly, following Chartbeat\u2019s conclusions, creating arbitrary handlers for purely mobile browser events can be risky due to how browsers interpret touch interactions. So this is something to keep in mind when segmenting the data.<\/p>\n The three methods we use, It might seem complicated (I sure hope it doesn\u2019t), but it\u2019s actually a very simple set of scripts.<\/p>\n Set this Custom HTML Tag to fire on a Page View \/ DOM Ready<\/strong> Trigger. You want to start engagement calculations only after the page content can be interacted with.<\/p>\n To fire your User Timings Tag (coming to that soon) when the engagement time is pushed into <\/p>\n <\/a><\/p>\n<\/div>\n Hooray, that was easy.<\/p>\n You\u2019ll need to grab the time engaged from <\/p>\n <\/a><\/p>\n<\/div>\n Quite simple as well, right?<\/p>\n !!! UPDATE<\/strong> !!! So now you\u2019ll need a Tag which pulls all this information together, and dispatches it to Google Analytics.<\/p>\n We\u2019ll use the amazing User Timings<\/a> Tag Type for this. User Timings, if you didn\u2019t know, are just about the coolest feature of Google Analytics, and ridiculously useful for collecting arbitrary time measurements. I\u2019ve written about them before a number of times:<\/p>\n So, create the Tag and make it look something like this:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Remember to set the Make this User Timings Tag fire on the Custom Event Trigger<\/strong> you created earlier.<\/p>\n And that\u2019s it for data collection! Now Google Tag Manager will send a User Timings hit to Google Analytics every 15 seconds, where the timing value will be the time the user spent interacting with the page during that 15 second stretch.<\/p>\n Now we\u2019ll want to look at this data in Google Analytics, so that we can get an idea of how much people are interacting, by average, which each page on the site.<\/p>\n There\u2019s a very important caveat to discuss before proceeding. To calculate Average Engagement Time, you\u2019d want to calculate the total milliseconds spent engaged<\/strong> with the Pageviews<\/strong> for each page. Unfortunately, User Timings are not bound to a Pageview, as they exist as their own hit type. In other words, it\u2019s impossible to request only specific User timings per specific Pageviews<\/strong> in a calculated metric or by using a custom report with report filters.<\/p>\n So, the only way the following will work is if this is the only<\/strong> User Timing you\u2019re measuring, because then you can create a calculated metric which calculates the average of all<\/strong> User Timings per all<\/strong> Pageviews, giving you what we\u2019re after.<\/p>\n If this isn\u2019t possible in your case, you might want to pull both Pageview and User Timings data out of Google Analytics, and join them together in Google Sheets or a tool like Klipfolio<\/a>.<\/p>\n If you have a good idea on how to circumvent this problem in Google Analytics, I\u2019m all ears. Using the default Avg. User Timing<\/strong> metric will not work, as that\u2019s bound to the size of the User Timing Sample, and not Pageviews. Using Custom Metrics might<\/em> work, but I\u2019m having a hard time figuring out how to align them with Pageviews.<\/p>\n Calculated Metrics are cool. No, they\u2019re awesome. They let you do calculations! On metrics! COOL AND AWESOME!<\/p>\n Before you proceed, don\u2019t forget to checkout some of the amazing articles my friends have written about Calculated Metrics:<\/p>\n Honestly, seems like anybody who\u2019s a somebody in web analytics has written about this feature, and that speaks heaps about how useful calculated metrics are!<\/p>\n So, the metric we\u2019ll use will calculate the average user timing by the simple formula of total User Timing value<\/strong> \/ total Pageviews<\/strong>. Since the Time<\/strong> formatting type expects seconds as the input value, we\u2019ll need to divide the total user timings value by 1000 to convert milliseconds to the required format. Anyway, the metric setup looks like this:<\/p>\n![\"Content](\"https:\/\/www.simoahava.com\/images\/2016\/03\/engagement.jpg#ZgotmplZ\")
<\/p>\n
\nI\u2019ve had to rewrite parts of this article due to a severe limitation in utilizing User Timings for data collection. Please read on until you reach step 4. User Timings<\/strong>. At the beginning of that step is another UPDATE<\/strong>, where I link you to the revised version<\/a> of the article. The revised article picks up right after Step 3<\/strong> and takes you all the way to the end, so you don\u2019t have to jump back here unless you want to enjoy the comments.
\n!!! END UPDATE<\/strong> !!!<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nYLE and Chartbeat<\/h2>\n
What you\u2019ll need<\/h2>\n
\n
dataLayer<\/code><\/p>\n<\/li>\n1. Custom HTML Tag<\/h2>\n
script>\n (function<\/span>() {\n var<\/span> startEngage = new<\/span> Date<\/span>().getTime();\n var<\/span> timeEngaged = 0<\/span>;\n var<\/span> idleTime = 0<\/span>;\n var<\/span> idle = true<\/span>;\n var<\/span> idleReport = false<\/span>;\n var<\/span> idleTimer, reportTimer;\n \n \/* Set the user as idle, and calculate the time\n<\/span> they were non-idle *\/<\/span>\n var<\/span> setIdle = function<\/span>() {\n idleTime = new<\/span> Date<\/span>().getTime();\n timeEngaged += idleTime - startEngage;\n idle = true<\/span>;\n };\n \n \/* Reset the 5 second idle timer.\n<\/span> If the user was idle, start the non-idle timer *\/<\/span>\n var<\/span> pulse = function<\/span>(evt) {\n if<\/span> (idle) {\n idle = false<\/span>;\n startEngage = new<\/span> Date<\/span>().getTime();\n idleReport = false<\/span>;\n }\n window<\/span>.clearTimeout(idleTimer);\n idleTimer = window<\/span>.setTimeout(setIdle, 5000<\/span>); \n }; \n \n \/\/ Utility function for attaching listeners to the window\n<\/span> var<\/span> addListener = function<\/span>(evt, cb) {\n if<\/span> (window<\/span>.addEventListener) {\n window<\/span>.addEventListener(evt, cb);\n } else<\/span> if<\/span> (window<\/span>.attachEvent) {\n window<\/span>.attachEvent('on'<\/span> + evt, cb);\n }\n };\n \n \/* Push an event to dataLayer every 15 seconds\n<\/span> unless the user is idle.\n<\/span> Also, push an event when the user leaves the page *\/<\/span>\n var<\/span> report = function<\/span>(evt) {\n if<\/span> (!idle) {\n timeEngaged += new<\/span> Date<\/span>().getTime() - startEngage;\n }\n\n \/\/ Push the payload to dataLayer, and only push valid time values\n<\/span> if<\/span> (!idleReport && timeEngaged > 0<\/span> && timeEngaged 3600000) { \n\t window<\/span>.dataLayer.push({\n \t 'event'<\/span> : 'nonIdle'<\/span>,\n 'nonIdleTimeElapsed'<\/span> : timeEngaged\n });\n }\n if<\/span> (idle) {\n idleReport = true<\/span>;\n }\n \n \/\/ Fix possible beforeunload duplication problem\n<\/span> if<\/span> (evt && evt.type === 'beforeunload'<\/span>) {\n\t window<\/span>.removeEventListener('beforeunload'<\/span>, report);\n }\n timeEngaged = 0<\/span>;\n startEngage = new<\/span> Date<\/span>().getTime();\n reportTimer = window<\/span>.setTimeout(report, 15000<\/span>);\n };\n \n addListener('mousedown'<\/span>, pulse);\n addListener('keydown'<\/span>, pulse);\n addListener('scroll'<\/span>, pulse);\n addListener('mousemove'<\/span>, pulse);\n addListener('beforeunload'<\/span>, report);\n idleTimer = window<\/span>.setTimeout(setIdle, 5000<\/span>);\n reportTimer = window<\/span>.setTimeout(report, 15000<\/span>);\n })();\nscript<\/span>><\/code><\/pre>\n<\/div>\naddListener('mousedown'<\/span>, pulse);\naddListener('keydown'<\/span>, pulse);\naddListener('scroll'<\/span>, pulse);\naddListener('mousemove'<\/span>, pulse);\naddListener('beforeunload'<\/span>, report);\nidleTimer = window<\/span>.setTimeout(setIdle, 5000<\/span>);\nreportTimer = window<\/span>.setTimeout(report, 15000<\/span>);\n<\/code><\/pre>\n<\/div>\nsetIdle<\/code>, report<\/code>, and pulse<\/code> are described here:<\/p>\n\n
setIdle<\/code> sets the user as idle every 5 seconds of non-interaction<\/strong>. When the user is idle, the timer calculating engagement will be paused. Also, only the first \u201creport\u201d to dataLayer<\/code> will be pushed. After that, nothing is pushed to dataLayer<\/code> until the user starts engaging with the page again.<\/p>\n<\/li>\nreport<\/code> pushes the current time engaged to dataLayer<\/code>, and resets all necessary timers and variables.<\/p>\n<\/li>\npulse<\/code> is what keeps the user \u201cactive\u201d. If the user was idle, it sets their idle status to false<\/strong>, and the 5 second idling timer is also reset at this point.<\/p>\n<\/li>\n<\/ul>\n2. Custom Event Trigger<\/h2>\n
dataLayer<\/code> every 15 seconds, you only need a Custom Event Trigger. It should look like this:<\/p>\n![\"Custom](\"https:\/\/www.simoahava.com\/images\/2016\/03\/custom-event-trigger.jpg#ZgotmplZ\")
<\/p>\n3. Data Layer Variable<\/h2>\n
dataLayer<\/code>, so create the following Data Layer Variable:<\/p>\n![\"Data](\"https:\/\/www.simoahava.com\/images\/2016\/03\/data-layer-variable.jpg#ZgotmplZ\")
<\/p>\n4. User Timings Tag<\/h2>\n
\nUser Timings has one major flaw: it has a daily limit of 10,000<\/strong> hits, which includes Page Timings<\/em>. This means that if your site is even marginally at risk of collecting this many timings altogether, the rest of this article will not work for you. In fact, I strongly recommend you stop reading the rest of the steps here, and jump instead to the revised steps<\/a> I wrote, which utilize an Event Tag and a Custom Metric Tag. I\u2019m sorry for making you jump between texts, but the truth is that User Timings have proven to be a subpar data collection method, even if I think they\u2019re excellent in so many other ways. So, read the rest of this article at your own peril, as the actual average engagement you\u2019ll be collecting might well be very much off the mark.
\n!!! END UPDATE<\/strong> !!!<\/p>\n![\"User](\"https:\/\/www.simoahava.com\/images\/2016\/03\/user-timings-tag.jpg#ZgotmplZ\")
<\/p>\ntransport : beacon<\/code> field in the Fields to Set<\/strong>. This is a very useful, albeit poorly supported, feature of Google Analytics, which attempts to preserve any hits that are sent while the user is leaving the page. I have, of course, written about this before<\/a>, too.<\/p>\nCaveat<\/h2>\n
5. The Calculated Metric<\/h2>\n
![\"Calculated](\"https:\/\/www.simoahava.com\/images\/2016\/03\/calculated-metric.jpg#ZgotmplZ\")
<\/p>\n![<\/p>\n](\"https:\/\/www.simoahava.com\/images\/2016\/03\/custom-report.jpg\"){kind=link}