Śledzenie głębokości scrollowania w Google Analytics

O dostosowywaniu współczynnika odrzuceń dla stron contentowych powstało już sporo artykułów. Jednak większość z nich ogranicza się niestety do porad jak odpalić event po określonym czasie. Śledzenie głębokości scrollowania pozwala nie tylko na urealnienie Bounce Rate, ale przede wszystkim pozwala mierzyć zaangażowanie użytkowników w treść serwisu.

Na początek – uważam, że dostosowywanie współczynnika odrzuceń poprzez odpalenie eventu po określonym czasie nie jest najlepszym pomysłem. Wyobraźmy sobie sytuację – użytkownik wpisuje w wyszukiwarkę frazę, z wyników wyszukiwania otwiera 5 stron – każda w nowym oknie. Następnie przechodzi na pierwszą, drugą stronę, znajduje odpowiedź na pytanie i zamyka pozostałe. Jeśli jesteśmy tą pierwszą lub drugą stroną, to fajnie. Jeśli nie, to mimo, że użytkownik otworzył naszą stronę, to nawet na nią nie spojrzał. Jeśli stosujemy event czasowy po wejściu na stronę, to w takim układzie wizyta zostanie zaliczona do udanych, mimo, że udana nie była.

Czasem nie mamy wyjścia (np, kiedy treści na stronie są bardzo krótkie), więc lepiej mierzyć to w ten sposób, niż żaden. Natomiast jeśli tylko jest taka możliwość, to do dostosowywania bounce rate zdecydowanie lepszym rozwiązaniem jest mierzenie głębokości przewijania strony. Jest to szczególnie przydatne dla blogów, serwisów newsowych, serwisów poradnikowych, itp.

Jednym z najpopularniejszych skryptów do mierzenie głębokości scrollowania jest na pewno http://scrolldepth.parsnip.io/. Instrukcja implementacji tego skryptu przez Google Tag Manager jest tu: http://andygibson.us/2013/10/track-scroll-depth-using-google-tag-manager/. Co prawda na zrzutach ekranu jest GTM v1, ale spokojnie można tą instrukcję zastosować dla GTM v2.

Zaletą tego skryptu jest prostota implementacji. Niestety moim zdaniem średnio nadaje się do zastosowania na blogach, gdzie mamy włączone komentarze. W przypadku tego skryptu mamy tylko informację o tym jaki % strony został przewinięty. Tymczasem w przypadku wpisów blogowych, gdzie znaczną część strony mogą zajmować komentarze, raczej wolelibyśmy wiedzieć czy użytkownicy przeczytali wpis do końca.

Z pomocą przychodzi tutaj wpis Justina Cutroniego – http://cutroni.com/blog/2014/02/12/advanced-content-tracking-with-universal-analytics/. Skrypt podany na tej stronie pozwala określić gdzie kończy się treść naszego wpisu i wówczas odpalić odpowiedni event. Skrypt zapisuje również czas między wejściem na stronę, a dotarciem do odpowiedniej sekcji. O wszystkich możliwościach skryptu można poczytać oczywiście na stronie.

Jedyną wadą tego skryptu jest to, że nie działa z GTM. Postanowiłem więc przepisać ten skrypt do współpracy z GTM i poniżej go Wam udostępniam.

<script>
 jQuery(function($) {
 // Debug flag
 var debugMode = false;

 // 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;
 
 // Get some information about the current page
 var pageTitle = document.title;

 // Track the aticle load
 if (!debugMode) {
 dataLayer.push({ 'event': 'ScrollTracking', 'eventCategory': 'Reading', 'eventAction': 'ArticleLoaded', 'eventLabel': pageTitle, 'eventNonInteraction': true});
 } else {
 alert('The page has loaded. Woohoo.'); 
 }

 // 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) {
 dataLayer.push({ 'event': 'ScrollTracking', 'eventCategory': 'Reading', 'eventAction': 'StartReading', 'eventLabel': pageTitle, 'eventValue': timeToScroll, 'metric1' : timeToScroll, 'eventNonInteraction': false});
 } 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) {
 if (timeToContentEnd < 60) {
 dataLayer.push({'userType': 'Scanner'});
 } else {
 dataLayer.push({'userType': 'Reader'});
 }
 dataLayer.push({ 'event': 'ScrollTracking', 'eventCategory': 'Reading', 'eventAction': 'ContentBottom', 'eventLabel': pageTitle, 'eventValue': timeToContentEnd, 'metric2' : timeToContentEnd, 'eventNonInteraction': false});
 } 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) {
 dataLayer.push({ 'event': 'ScrollTracking', 'eventCategory': 'Reading', 'eventAction': 'PageBottom', 'eventLabel': pageTitle, 'eventValue': totalTime, 'metric3' : totalTime, 'eventNonInteraction': false});
 } 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);
 });
});
 </script>

Powyższy kod należy skopiować i dodać jak tag HTML. Ja uruchamiam ten tag jedynie na stronach postów. Następnie należy utworzyć 4 zmienne w GTM

zmienna

Podobnie robimy dla eventAction, eventLabel, eventValue oraz eventNonInteraction.

Następnie tworzymy tag eventowy Google Analytics i konfigurujemy następująco:

event

Reguła uruchamiająca ten tag to:

trig

Teraz pozostaje opublikować zmiany w GTM i zweryfikować jeszcze, czy zdarzenia odpalają się prawidłowo – np. w zakładce Real Time w panelu GA.

7 myśli w temacie “Śledzenie głębokości scrollowania w Google Analytics”

  1. Cześć

    Dobry artykuł!
    Mam odnośnie niego pewne pytanie: jak analizować głębokość wizyty, jeśli treści mamy umieszczone w zakładkach o różnej długości?

    1. Cześć,

      jeśli te zakładki mają unikalne id, to możesz zastosować np takie rozwiązanie:
      https://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery

      oczywiście zamiast fragmentu
      console.log('H1 on the view!');
      musisz wstawić odpowiedni kod dataLayer, np:
      dataLayer.push({ 'event': 'ScrollTracking', 'eventCategory': 'Reading', 'eventAction': '#nazwa zakładki z terścią', 'eventLabel': pageTitle});

  2. Dzięki za odpowiedź!

    W zasadzie bardziej chodziło mi jak to ugryźć już od strony analitycznej. Co w takiej sytuacji posyłać do GA? Pomyślałem np. o takim rozwiązaniu, aby do GA przekazywać event o
    – Category = „Scroll Depth”,
    – Action = [id aktywnej zakładki],
    – Label = [%] .

    1. Tutaj jeszcze ważna jest informacja, czy masz więcej podstron z takimi zakładkami? Jeśli nie, to przykład, który podałeś powyżej będzie jak najbardziej ok.
      Natomiast jeśli jest więcej podstron a na nich zakładki, to przydałoby się też wiedzieć jak to wygląda dla poszczególnych stron. Taką informację można przekazać np w akcji zdarzenia:
      – Action = [url podstrony] – [id aktywnej zakładki]

      Jeśli będzie Cię interesował % scrolla niezależnie od zakładki, będziesz mógł to odfiltrować w raportach po części wspólnej jaką jest adres url strony a dodatkowo będziesz miał też rozbicie na poszczególne zakładki.

      Na dobrą sprawę nic też nie stoi na przeszkodzie, żeby podczas scrollowania odpalić 2 eventy i do każdego przekazywać nieco inne dane (w jednym zdarzeniu dane standardowe, w drugim dane dla zakładek).

  3. Coś chyba zrobiłem źle, wstawiłem kod jako tag, potem wybrałem regułę uruchamiania „scrollowanie” bo jest gotowiec i nie działa.

    1. Ten kod nie jest przystosowany do pracy z gotową regułą w GTM, dlatego że wpis powstał zanim taka funkcja była dostępna w GTM. Dlatego jeśli chcesz wykorzystać ten skrypt, to musisz zrobić wszystko wg instrukcji z artykułu.

      Dodatkowo ten skrypt jest nieco inny, ponieważ tutaj nie ma scrollowania co X% treści tylko wykrywany jest koniec treści (na przykładzie WordPressa).

      Jeśli potrzebujesz pomiaru % scrolla, to Simo Ahava na swoim blogu bardzo dobrze opisał nową, wbudowaną funkcję GTM, która służy do pomiaru głębokości scrollowania:
      https://www.simoahava.com/analytics/scroll-depth-trigger-google-tag-manager/

Skomentuj Hattori Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.