Code snippet (Google Analytics)

Uit De Vliegende Brigade
(Doorverwezen vanaf Code snippet (Analytics)
Naar navigatie springen Naar zoeken springen

Zie ook Contact Form 7 & Conversion Tracking.

Google Analytics werks met het JavaScript Tracking Snippet, een stukje uiterst compacte code. Hierbij een glimps in de werking hiervan. Dit is work in progress:

Op hoofdlijnen

Wat de snippet doet:

  1. Creëert een <script>-element dat asynchroon de analytics.js-bibliotheek download
  2. Initiëert de globale ga command queue-functie. Hiermee worden commando's in een wachtrij geplaatst, die worden uitgevoerd zodra de analytics.js-bibliotheek beschikbaar is
  3. Roept ga aan, om een nieuw tracker-object te registreren
  4. Roept ga aan, om een pageview te registreren.

Code

Voorbeeld van een snippet

(function(i,s,o,g,r,a,m)
   {
     i['GoogleAnalyticsObject']=r;
     i[r]=i[r]||function()
     {
        (i[r].q=i[r].q||[]).push(arguments)
     },
     i[r].l=1*new Date();
     a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];
     a.async=1;
     a.src=g;
     m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Geannoteerd

/**
 * Creates a temporary global ga object and loads analytics.js.
 * Parameters o, a, and m are all used internally. They could have been
 * declared using 'var', instead they are declared as parameters to save
 * 4 bytes ('var ').
 *
 * @param {Window}        i The global context object.
 * @param {HTMLDocument}  s The DOM document object.
 * @param {string}        o Must be 'script'.
 * @param {string}        g Protocol relative URL of the analytics.js script.
 * @param {string}        r Global name of analytics object. Defaults to 'ga'.
 * @param {HTMLElement}   a Async script tag.
 * @param {HTMLElement}   m First script tag in document.
 */

(function(i, s, o, g, r, a, m)
   {
        // Acts as a pointer to support renaming.
        // --------------------------------------
        //
        i['GoogleAnalyticsObject'] = r; 

        // Creates an initial ga() function.
        // The queued commands will be executed once analytics.js loads.
        // -------------------------------------------------------------
        //
        i[r] = i[r] || function() 
        {
           (i[r].q = i[r].q || []).push(arguments)
        },

        // Sets the time (as an integer) this tag was executed.
        // Used for timing hits.
        // -----------------------------------------------------
        //
        i[r].l = 1 * new Date();

        // Insert the script tag asynchronously.
        // Inserts above current tag to prevent blocking in addition to using the
        // async attribute.
        // ----------------------------------------------------------------------
        //
        a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
   }
)
(
   window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'
);

// Creates a default tracker with automatic cookie domain configuration.
// ---------------------------------------------------------------------
//
ga('create', 'UA-XXXXX-Y', 'auto');

// Sends a pageview hit from the tracker just created.
// ---------------------------------------------------
//
ga('send', 'pageview');

function(i,s,o,g,r,a,m)

Dit is een naamloze functie met zeven variabelen. Begin en eind: 

(function (i, s, o, g, r, a, m) {
...
 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

De variabelen/parameters i, s, o, g & r kunnen gesubstitueerd worden voor hun definities. De parameters a en m zijn waarschijnlijk resultaat-variabelen. Resultaat: 

(function (i, s, o, g, r, a, m) {
     window['GoogleAnalyticsObject'] = 'ga';
     window['ga'] = window['ga'] || function () {
         (window['ga'].q = window['ga'].q || []).push(arguments)
     }, window['ga'].l = 1 * new Date();
     a = document.createElement('script'),
     m = document.getElementsByTagName('script')[0];
     a.async = 1;
     a.src = '//www.google-analytics.com/analytics.js';
     m.parentNode.insertBefore(a, m)
 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

Het gedeelte 

     window['ga'] = window['ga'] || function () {
         (window['ga'].q = window['ga'].q || []).push(arguments)
     }, window['ga'].l = 1 * new Date();

defineert een nieuwe globale functie ga. Het pushet de bijbehorende argumenten in een queue array, genaamd q

Wat de complete functie doet:

  • Een nieuw script ga wordt gedefineerd
  • Dit script is ingesteld om asynchroon te laden (async=true)
  • Dit script wordt in het document ingevoerd vóór de eerste script tag.

analytics.js-bibliotheek

Standaard wordt de analytics.js-bibliotheek gedownload. Er valt een kleine prestatieverbetering te boeken, door gebruik te maken van preloading. Zie dit artikel voor details. Ik vind het zelf niet de moeite waard om te doen (sep. 2017).

Het is dankzij de analytics.js-bibliotheek, dat je allerlei verschillende soorten gebeurtenissen kunt traceren, plus waarschijnlijk nog een hoop meer. Waarschijnlijk is dit artikel een leuk startpunt om hier meer over te weten te komen.

Gebeurtenissen & registratie

Je kunt van alles en nog wat doen met de ga()-functie. Zie bv. [1] en [2] voor details.

Onder andere kun je met behulp van het eerste argument send, verschillende soorten gebeurtenissen registreren.

Syntaxis

Standaard: 

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

Vereenvoudigd: 

ga('send', [hitType], [...fields], [fieldsObject]);

Hierbij zijn fields afhankelijk van hittype [3]: 

HitType    fields
--------   ---------------------------------------------------
pageview   page
event      eventCategory, eventAction, eventLabel, eventValue   
social     socialNetwork, socialAction, socialTarget
timing     timingCategory, timingVar, timingValue, timingLabel

Deze velden zijn daarbij user-defined (zo ver ik kon nagaan). Zo kun je bv. een registratie met een event-hittype gebruiken om dynamisch een conversie in een webwinkel te registreren. In dat geval moet je bv. zorgen voor de juiste waarde voor het veld eventValue. Zie hier voor een overzicht van deze velden.

Voorbeelden

ga('send', 'pageview');

ga('send', 'event', 'Contact Form', 'submit' );

// Sends an event hit for the tracker named "myTracker" with the
// following category, action, and label, and sets the nonInteraction
// field value to true.
//
ga('send', 'event', 'link', 'click', 'http://example.com', {nonInteraction: true});

// Een (theoretische) registratie van een webwinkel-conversie
// ----------------------------------------------------------
//
ga('send', 'event', 'conversie', 'conversie', 12.95)

Bronnen

Overgenomen van "https://wiki.devliegendebrigade.nl/index.php?title=Code_snippet_(Google_Analytics)&oldid=8873"