Innehållsspårning med Google Tag Manager

I dagens artikel tänkte jag prata om hur jag implementerat innehållsspårning samt scroll depth spårning i min blogg med hjälp av Google Tag Manager.

En sak jag ville veta var om besökarna till min blogg läser mina inlägg. Tyvärr spåras det inte av Google Analytics automatiskt. Ett sätt att få tag på denna information är att mäta scroll depth (hur långt ner besökarna har scrollat på sidor med blogginlägg). Besökarna som läser en artikel skrollar troligen ner på sidan. Genom att mäta hur många besökare faktiskt har scrollat ner till botten av en artikel och hur snabbt de har gjort det kan ge dig en god uppfattning om innehållet faktiskt läses och eller synts för besökaren.

Det finns flera sätt att spåra hur långt ner besökarna har scrollat. Jag bygger min genomförandet på Justin Curtonis avancerade innehållsspårning med GA samt Simo Ahavas anpassning av denna spårning för GTM med några ändringar i spårningskoden. Denna artikel beskriver steg för steg hur du kan genomföra innehållsspårning med Google Tag Manager. Lycka till!

Ändringar i skriptkoden

• Jag har ändrat tidslängden som används för att kategorisera besökarna. Skriptkoden skickar information till en anpassad dimension när besökaren når botten av inlägget. Användarna kategoriseras sedan som en scroller (en scrollare (bättre uttryck någon?)) eller som en reader (en läsare) baserad på hur snabbt de har skrollat till botten. Eftersom de flesta av mina inlägg är ganska korta bestämde jag att tröskeln skulle vara 25 sekunder istället för 60. Skriptet sparar tiden det tar att skrolla ner till botten av inlägget, därmed ändrar jag kanske tröskeln senare efter att jag har samlat in mer. Du får gärna justera tiden så att den återspeglar längden av artiklarna på din webbplats bättre

// Set time to read here
    timeToRead = 25;

• Ursprungligen gjorde jag en liten förändring i skriptet jag använde för min blogg: jag ställde sidans titel som händelse åtgärd samt åtgärder Article Loaded, Start Reading, Content Bottom och Page Bottom som händelse etiketter för varje artikel. Skriptet i denna artikel följer Justins installation och använder: Article Loaded, Start Reading, Content Bottom or Page Bottom som händelse åtgärd , och sidtitel som händelse etikett.

Förutsättningar

• Spårningskoden i denna implementering använder jQuery så se till att jQuery är installerat på din webbplats.
• Du behöver att ange gränserna för innehållet i skriptet. Koden sänder en händelse när användaren nått botten av ett inlägg. I min blogg är alla blogginlägg insvepta i en <div> märkt med ”.thn_post_wrap”, och jag förvarar denna information i contentElement variabeln. Du behöver att hitta behållaren som rymmer i dina blogginlägg eller artiklar och tilldela contentElement variabeln med selektorn som är specifik för din webbplats:

// Change this selector to match the main content element of your site
    var contentElement = '.thn_post_wrap';

• I ditt Google Analytics-konto behöver du skapa tre nya anpassade mätvärden och en anpassad dimension för egendomen där du vill sätta upp spårning. Namnge mätvärden Time to Scroll, Time to Content End and Total Time samt namnge  den anpassade dimensionen Reader Type. Ta del av indexnummer för alla nyskapade mätvärden och dimension.

De anpassade mätvärden används för att lagra tidsmått: tid att skrolla, tid till innehålls botten och tid till sidans botten.

Den anpassade dimensionen används för att kategorisera besökare som har börjat läsa en artikel som scrollare eller läsare.

• Data Layer (datalager) måste ställas in om du inte har gjort det ännu.

<script>
dataLayer = [];
</script>

• Du kan också ställa in hur långt ner besökarna skulle rulla innan vi börjar registrera dem som läsare. Det är inställd på 150 pixlar som standard:

// # px before tracking a reader
    var readerLocation = 150;

Kod genomförande

Steg 1: I ditt Google Tag Manager skapa en ny trigger (utlösare) av typ Custom Event (anpassad händelse) och ställ Händelsenamn till scrollEvent.

Steg 2: Skapa nya datalager variabler

Dessa variabler kommer att användas för att ta fram information från datalagret . Till att börja med, skapa en ny datalagervariabel och namnge den scrollAction. Under Data Layer Variable Name använda scrollAction.

På ett liknande sätt skapa följande datalager variabler:

scrollCategory med Data Layer Variable Name scrollCategory

scrollLabel med Data Layer Variable Name scrollLabel

scrollValue med Data Layer Variable Name scrollValue

scrollNonInteraction med Data Layer Variable Name scrollNonInteraction

Time to Scroll med Data Layer Variable Name scrollMetric1

Time to Content End med Data Layer Variable Name scrollMetric2

Total Time med Data Layer Variable Name scrollMetric3

Reader Time med Data Layer Variable Name scrollDimension

Den kompletta listan med variablerna kommer att se ut så här:

Steg 3: Skapa en ny händelsetagg

I nästa steg ska du skapa en ny Universal Analytics-tagg, välj event som Track type och fyll i följande fält:

Category: {{scrollCategory}}

Action: {{scrollAction}}

Label: {{scrollLabel}}

Value: {{scrollValue}}

Non-Interaction Hit: {{scrollNonInteraction}}

Under More settings lägg till en anpassad dimension: i Dimension Value fältet skriv {{Reader Type}} och i indexfältet använd indexet denna dimension har i ditt Google Analytics-egendom.
På samma sätt, lägg till tre anpassade mätvärden som du har skapat tidigare under Custom Metrics. Tilldela {{Time to Scroll}}, {{Time to Content End}} och {{Total Time}} som mätvärden och respektive index från GA.
Taggen kommer att aktiveras på scrollEvent trigger som du skapade i det första steget.
Som resultat kommer taggen att se ut så här:

Dimension och mätvärden index på bilden är specifika för min webbsida, så kom ihåg att använda dina egna.

Steg 4: Skapa en ny Custom HTML Tag:

Ställ in att den aktiveras på sidor där du vill spåra skrollning djup samt kopiera och klistra in den följande koden.

<script>
jQuery(function($) {
    // Debug flag
    var debugMode = false;
    
    // Change this selector to match the main content element of your site
    var contentElement = '.thn_post_wrap';

    // Default time delay before checking location
    var callBackTime = 100;

    // # px before tracking a reader
    var readerLocation = 150;
  
    // Set time to read here
    var timeToRead = 25;

    // 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) {
        window.dataLayer.push({
            'event' : 'scrollEvent',
            'scrollCategory' : 'Reading',
            'scrollAction' : 'ArticleLoaded',
            'scrollLabel' : pageTitle,
            'scrollValue' : undefined,
            'scrollNonInteraction' : 1,
            'scrollMetric1' : undefined,
            'scrollMetric2' : undefined,
            'scrollMetric3' : undefined,
            'scrollDimension' : undefined
        });
    } 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) {
                window.dataLayer.push({
                    'event' : 'scrollEvent',
                    'scrollCategory' : 'Reading',
                    'scrollAction' : 'StartReading',
                    'scrollLabel' : pageTitle,
                    'scrollValue' : timeToScroll,
                    'scrollNonInteraction' : 0,
                    'scrollMetric1' : timeToScroll,
                    'scrollMetric2' : undefined,
                    'scrollMetric3' : undefined,
                    'scrollDimension' : undefined
                });
            } else {
                alert('started reading ' + timeToScroll);
            }
            scroller = true;
        }

        // If user has hit the bottom of the content send an event
        if (bottom >= $(contentElement).scrollTop() + $(contentElement).innerHeight() && !endContent) {
            currentTime = new Date();
            contentScrollEnd = currentTime.getTime();
            timeToContentEnd = Math.round((contentScrollEnd - scrollStart) / 1000);
            if (!debugMode) {
                var readerType; 
                if (timeToContentEnd < timeToRead) {
                    readerType = 'Scanner'; 
                } else {
                    readerType = 'Reader';
                }
                window.dataLayer.push({
                    'event' : 'scrollEvent',
                    'scrollCategory' : 'Reading',
                    'scrollAction' : 'ContentBottom',
                    'scrollLabel' : pageTitle,
                    'scrollValue' : timeToContentEnd,
                    'scrollNonInteraction' : 0,
                    'scrollMetric1' : undefined,
                    'scrollMetric2' : timeToContentEnd,
                    'scrollMetric3' : undefined,
                    'scrollDimension' : readerType
                });
            } 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) {
                window.dataLayer.push({
                    'event' : 'scrollEvent',
                    'scrollCategory' : 'Reading',
                    'scrollAction' : 'PageBottom',
                    'scrollLabel' : pageTitle,
                    'scrollValue' : totalTime,
                    'scrollNonInteraction' : 0,
                    'scrollMetric1' : undefined,
                    'scrollMetric2' : undefined,
                    'scrollMetric3' : totalTime,
                    'scrollDimension' : undefined
                });  
            } 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>

Steg 5: förhandsvisa och felsöka taggarna. Om du är nöjd med resultatet, publicera behållaren. Det är allt!

Hoppas att artikeln var till hjälp. I min nästa inlägg kommer jag att prata om viss statistik från min blogg som grundar sig på genomförandet.