Scroll Tracking pomocou nástroja Google Tag Manager

Scroll Tracking pomocou GTM (custom HTML)

Upozornenie:

Kým začnete čítať o Scroll Trackingu a GTM, odporúčam pozrieť si moje predchádzajúce články, v ktorých som priblížil službu GTM a jej funkcie.  Ak už máte základy v malíčku, môžeme smelo vykročiť k pokročilejším implementáciám pomocou služby Google Tag Manager. Tak poďme priamo do deja...

Trackovanie skrolovania môžeme síce nastaviť aj z preddefinovaných triggerov a premenných v Google Tag Manager,no tento príspevok sa bude týkať jeho nasadenia cez custom HTML kód, ktorý sa nám osvedčil.

Existuje veľa vecí, ktoré môžeme urobiť pomocou nástroja GTM, od inštalácie značiek tretích strán až k sledovaniu stiahnutia súborov alebo merania toho, kam sa až dočítal človek, ktorý bol na našej stránke.

V tomto článku si vysvetlíme, ako odoslať konkrétne eventy do Google Analytics, do akej miery ľudia posúvajú – skrolujú stránku nadol. Na začiatok je dobré položiť si jednoduchú otázku...

Prečo je hĺbka skrolovania podstatná?

V Google Analytics sú niektoré metriky, ktoré nie sú až také podstatné ako napríklad bounce rate alebo to, ako dlho bol niekto na našej stránke. Tieto metriky nám však nepovedia celý príbeh, ktorý môžeme vedieť na základe tohto trackovania.

Povedzme, že používame čas na stránke ako metriku – čo sa stane, ak strávi niekto na našej stránke 10 minút? Je to určite dobrá vec, no o vnímaní obsahu nám to nepovie nič. Nezodpovedané tak zostávajú otázky typu: Je obsah zaujímavý? Našiel návštevník to, čo hľadal?

Bounce rate má podobné problémy. Ak návštevník príde na kontaktnú stránku a odíde hneď, nemôžme tvrdiť, že našiel informácie, ktoré hľadal. Tento príklad len podčiarkuje dôležitosť sledovania cieľov a konverzií v analytics. Riešením sú dobré a osvedčené nástroje Hotjar, ktoré mne osobne prídu vhodné na zaznamenávanie správania používateľov.

Bez ohľadu na tieto príklady si myslím, že je jasné, že sa nemôžeme spoliehať iba na bounce rate alebo čas strávený na stránke ako metriky interakcie. V tejto chvíli prichádza na rad hĺbka skrolovania.

Trackovanie hĺbky skrolovania

Schopnosť trackovať hĺbku skrolovania (aspoň moja verzia – existujú aj iné metódy) zahŕňa plugin ktorý vytvoril Rob Flaherty.  Tento plugin, ktorý používa jQuery na zaznamenávanie údajov v GA odosiela eventy do služby Google Analytics na rôznych bodoch stránok – Baseline (0%), 25%, 50%., 75% a 100% - každý signalizuje iný bod, ktorý je vo vzťahu k hornej a spodnej stránky.

Je tu niekoľko požiadaviek, ktoré musíme mať na dokončenie tohto návodu:

• Webové stránky používajú službu Google Analytics
• Stránky implementujú GA pomocou GTM
• Rozumieť GA a GTM

Vytvorenie custom HTML tagu

Prvú vec, ktorú musíme vytvoriť, je prejsť na webovú stránku v GTM a nájsť kontajner  v ktorom chceme pracovať.

Pred tým, ako vytvoríme našu značku, odporúčam vytvoriť trigger, ktorý zabezpečí, že sa skript na meranie hĺbky posúvania spustí, keď je DOM pripravený.

Čo je DOM? No, to je celkom dobrá otázka! Je to skratka z Document Object Model a reprezentuje všetky veci ako tagy, divy, zoznamy položiek v dokumente HTML. DOM poskytuje metódu pre spoluprácu jazyka JavaScript so všetkými týmito „uzlami“. DOM trigger, ktorý vytvoríme, znamená, že značka sa po spustení prehliadača skončí s vytvorením celej stránky DOM.

Ak chceme vytvoriť trigger, prejdeme do sekcie „triggers“ v službe GTM.

Tu klikneme na tlačidlo „nové“. Označíme svoju značku „DOM Ready“ a pridáme značku DOM Ready zo sekcie zobrazenie stránky.

Trigger by mal vyzerať podobne ako ten nižšie:

Predtým, ako sa pohneme na ďalší krok, klikneme na „Uložiť“

Ďalej budeme potrebovať nový tag. Klikneme na „tagy“ v ľavom menu:

Tu klikneme na „nový“ a vyberieme „Custom HTML“

Potom by sme mali prejsť na nasledujúcu URL adresu a skopírovať celý súbor scrolldepth.js:

<script>
/*!
 * @preserve
 * jquery.scrolldepth.js | v0.4.1
 * Copyright (c) 2014 Rob Flaherty (@robflaherty)
 * Licensed under the MIT and GPL licenses.
 */
;(function ( $, window, document, undefined ) {
   
  "use strict";
 
  var defaults = {
    elements: [],
    minHeight: 0,
    percentage: true,
    testing: false
  },
 
  $window = $(window),
  cache = [];
 
  /*
   * Plugin
   */
 
  $.scrollDepth = function(options) {
     
    var startTime = +new Date;
 
    options = $.extend({}, defaults, options);
 
    // Return early if document height is too small
    if ( $(document).height() < options.minHeight ) {
      return;
    }
 
    // Establish baseline (0% scroll)
    sendEvent('Percentage', 'Baseline');
 
    /*
     * Functions
     */
 
    function sendEvent(action, label, timing) {
      if (!options.testing) {
 
        if (typeof(dataLayer) !== "undefined") {
          dataLayer.push({'event':'ScrollDistance', 'eventCategory':'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventValue': 1, 'eventNonInteraction': true});
 
          if (arguments.length > 2) {
            dataLayer.push({'event':'ScrollTiming', 'eventCategory':'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventTiming': timing});
          }
        } else {
 
          if (typeof(ga) !== "undefined") {
            ga('send', 'event', 'Scroll Depth', action, label, 1, {'nonInteraction': 1});
 
            if (arguments.length > 2) {
              ga('send', 'timing', 'Scroll Depth', action, timing, label);
            }
          }
 
          if (typeof(_gaq) !== "undefined") {
            _gaq.push(['_trackEvent', 'Scroll Depth', action, label, 1, true]);
 
            if (arguments.length > 2) {
              _gaq.push(['_trackTiming', 'Scroll Depth', action, timing, label, 100]);
            }
          }
        }
 
      } else {
        $('#console').html(action + ': ' + label);
      }
    }
 
    function calculateMarks(docHeight) {
      return {
        '25%' : parseInt(docHeight * 0.25, 10),
        '50%' : parseInt(docHeight * 0.50, 10),
        '75%' : parseInt(docHeight * 0.75, 10),
        // 1px cushion to trigger 100% event in iOS
        '100%': docHeight - 1
      };
    }
 
    function checkMarks(marks, scrollDistance, timing) {
      // Check each active mark
      $.each(marks, function(key, val) {
        if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) {
          sendEvent('Percentage', key, timing);
          cache.push(key);
        }
      });
    }
 
    function checkElements(elements, scrollDistance, timing) {
      $.each(elements, function(index, elem) {
        if ( $.inArray(elem, cache) === -1 && $(elem).length ) {
          if ( scrollDistance >= $(elem).offset().top ) {
            sendEvent('Elements', elem, timing);
            cache.push(elem);
          }
        }
      });
    }
 
    /*
     * Throttle function borrowed from:
     * Underscore.js 1.5.2
     * http://underscorejs.org
     * (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
     * Underscore may be freely distributed under the MIT license.
     */
 
    function throttle(func, wait) {
      var context, args, result;
      var timeout = null;
      var previous = 0;
      var later = function() {
        previous = new Date;
        timeout = null;
        result = func.apply(context, args);
      };
      return function() {
        var now = new Date;
        if (!previous) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0) {
          clearTimeout(timeout);
          timeout = null;
          previous = now;
          result = func.apply(context, args);
        } else if (!timeout) {
          timeout = setTimeout(later, remaining);
        }
        return result;
      };
    }
 
    /*
     * Scroll Event
     */
 
    $window.on('scroll.scrollDepth', throttle(function() {
      /*
       * We calculate document and window height on each scroll event to
       * account for dynamic DOM changes.
       */
 
      var docHeight = $(document).height(),
        winHeight = window.innerHeight ? window.innerHeight : $window.height(),
        scrollDistance = $window.scrollTop() + winHeight,
 
        // Recalculate percentage marks
        marks = calculateMarks(docHeight),
 
        // Timing
        timing = +new Date - startTime;
 
      // If all marks already hit, unbind scroll event
      if (cache.length >= 4 + options.elements.length) {
        $window.off('scroll.scrollDepth');
        return;
      }
 
      // Check specified DOM elements
      if (options.elements) {
        checkElements(options.elements, scrollDistance, timing);
      }
 
      // Check standard marks
      if (options.percentage) {        
        checkMarks(marks, scrollDistance, timing);
      }
    }, 500));
 
  };
 
})( jQuery, window, document );
jQuery.scrollDepth();
</script>

Po skopírovaní vložíme kód do prázdneho poľa HTML v GTM

Tento script potom vytvorí dataLayer a pushne doň scroll tracking event stále, keď sa spustí.

Eventy v službe GTM však nie sú prepojené do služby Google Analytics. Na to potrebujeme osobitnú značku v GTM, aby sme odoslal eventy do služby GA. Toto za chvíľu vytvoríme.

Po pridaní vyššie uvedeného kódu pridáme trigger, ktorý sme si vytvorili už predtým.

Náš tag by mal vyzerať ako na obrázku nižšie. Na záver si ho pomenujeme tak, aby sme sa v tom vyznali – v mojom prípade to bude „Scroll Tracking“

Vytvorenie Event variables (premenných)

Ďalej je potrebné vytvoriť premenné, ktoré definujú časti eventov, aby sme ich mohli poslať do Google Analytics. Nezabudnite, že eventy v GTM nie sú rovnaké ako eventy v službe Analytics.

Eventy služby Google Analytics pozostávajú zo štyroch komponentov: Category, Action, Label a Value. Posledné dva z nich nie sú povinné.

Každý z nich vytvoríme ako premenné v GTM. Prečo? Pretože na odosielanie eventov z GTM do GA musíme definovať tieto komponenty vytiahnutím informácií z dataLayer-u. Po vytvorení týchto premenných potom vytvoríme tag Google Analytics, ktorý bude nastavený na event, ktorý sa následne bude posielať do služby Google Analytics.

Ak chceme vytvoriť nové premenné, prejdeme na príslušnú sekciu z výberu na ľavej strane:

Premenná – Event category

Klikneme na položku „nové“ a pomenujeme svoju prvú premennú „eventCategory“. Vyberte typ ako „DataLayer Variable“ a potom zadajte názov premennej ako „eventCategory“. Ponechajte ich na verzii 2. Kliknete na položku Uložiť. Naša premenná by mala vyzerať takto:

Tieto kroky zopakujeme pre premenné pre Action, Label a Value. Ako názov premennej dáme nasledovné:

• eventAction
• eventLabel
• eventValue

Nižšie uvedené screenshoty ukazujú, ako by mali vyzerať nasledovné premenné. Je dôležité dodržať názvy týchto premenných tak, ako sú tu napísané.

Event Action

Event Label

Event Value

Vytvorenie Google Analytics Tagu

Teraz, keď máme naše premenné, tak môžeme posielať informácie, ktoré náš JavaScript na sledovanie skrolovania pushne do dataLayeru.

Vráťme sa späť do sekcie značiek, klikneme na „Nové“ a vybertieme položku „Universal Analytics“. Zadáme sem svoje Google Analytics ID (Tracking ID) a vyberieme ako typ „Event“

Teraz máme možnosť vstúpiť do premenných, ktoré sme práve vytvorili. Kliknite na tlačidlo stavebnej kocky vpravo od každého z textových polí Category, Actrion, Label a Value a vyberieme príslušnú premennú:

Posledná vec, ktorú musíme urobiť, je nastaviť trigger. Vyberieme si event „Custom Event“, kde bude názov eventu „ScrollDistance“. Tento trigger uložíme a následne uložíme aj tag.

Keď si dáme Preview mode v GTM, aby sme si skontrolovali či sa naša značka spúšťa správne, tak okno s náhľadom by malo obsahovať tieto značky:

Zobrazenie výsledkov

Po niekoľkých hodinách budeme môcť analyzovať výsledky implementácie sledovania skrolovania v prehľade eventov v službe Google Analytics. Ak chceme zobraziť prehľad, navštívime službu Google Analytis. Budeme musieť prejsť na prehľady „Správanie“ v sekcii GA – konkrétne v sekcii eventy:

Keď sa tu objavíme, uvidíme eventy v grafoch ako vo väčšine ostatných prehľadov:

Ak chceme získať rozpis eventov, klikneme na položku „Event Label“ pod časťou „Top Events“ v ľavom dolnom rohu obrazovky. Potom dostaneme rozpis tak, ako môžeme vidieť nižšie:

Poznámka: Názory vyjadrené v tomto článku sú názory autora.