Een Stats4U-teller toevoegen met Google Tag Manager

Er staat een handleiding hierover op de blog uit 2015. De schermafbeeldingen daarin tonen een Tag Manager die er niet meer zo uitziet, en een van de zeven stappen — document.write aanvinken — is helemaal niet meer nodig. Dit bericht vervangt die handleiding.

Het beantwoordt ook de vraag waar de oude handleiding het bij liet. Die raadde de onzichtbare teller aan bij Tag Manager, omdat de positie van de Stats-afbeelding niet te sturen zou zijn. Dat kan wel. Het staat onder aan deze pagina.

De korte versie

In Tag Manager: Tags → Nieuw → Aangepaste HTML, en plak één regel in het HTML-veld:

<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

De trigger komt op Alle pagina's; daarna de container opslaan en publiceren. Het kenmerk data-id krijgt het tellernummer, dat op de statistiekpagina staat.

Dat is het hele werk — drie velden en een trigger, waar 2015 zeven stappen nodig had. Er hoeft niets aangevinkt te worden over document.write, want het script gebruikt het niet meer.

Wat dat eigenlijk doet, en waarom het misschien niet de juiste keuze is

Het script plaatst de teller onmiddellijk achter zichzelf in de pagina. Rechtstreeks in met de hand geschreven HTML geplakt is dat precies goed: de teller verschijnt waar de code staat.

Via Tag Manager ligt het anders, want de plaatsing is geen vrije keuze meer. De container bepaalt hem, en die staat meestal in de head van het document of daar waar het containerstukje geïnstalleerd is. De teller wordt daar dus ingevoegd — niet in de voettekst, niet in de zijbalk, maar daar waar Tag Manager de tag toevallig injecteerde.

Voor een onzichtbare teller maakt dat niet het minste uit, en daarom raadde de oude handleiding er een aan. Ontwerp 980 toont niets, ontwerp 981 toont alleen een klein pictogram dat naar de statistiekpagina linkt. In dat geval is de korte versie hierboven volledig en is de rest van dit artikel facultatief.

Een zichtbare teller ergens specifieks plaatsen kost iets meer.

Sturen waar de teller verschijnt

Het script heeft een tweede werkwijze die de oude handleiding nooit noemde. In plaats van het kenmerk data-id neemt het een lijst, en zoekt het naar plaatshoudende elementen op ID.

Stap één — een plaatshouder in de pagina, daar waar de teller hoort. Die gaat in het sjabloon van de site zelf en niet in Tag Manager, want Tag Manager is juist wat we uit dit besluit willen houden:

<div id="s4u_cp0"></div>

Stap twee — in Tag Manager vervangt dit de eenregelaar. Hetzelfde tagtype Aangepaste HTML:

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

Stap drie — verander de trigger. Dit is het deel waarop mensen struikelen. Alle pagina's vuurt zo vroeg als Tag Manager het voor elkaar krijgt, wat vaak is voordat de plaatshouder in het document bestaat. De ingebouwde trigger DOM Ready is hier de juiste. De teller moet ná de div aankomen, niet ervoor.

De teller verschijnt nu binnen die div, en nergens anders.

Sturen op welke pagina's hij verschijnt

Er zijn hier twee onafhankelijke knoppen, en het loont ze los van elkaar te begrijpen.

De plaatshouder is er een van. De eerste regel binnen de functie doet het werk: staat er geen s4u_cp0 op de pagina, dan stopt hij en wordt het script niet eens gedownload. Een sjabloon dat de div bevat krijgt dus een teller en een sjabloon dat hem niet bevat niet — beslist in de sjablonen van de site zelf, zonder wijziging in Tag Manager en zonder publicatiestap.

De trigger is de andere. Hetzelfde besluit kan ook in Tag Manager genomen worden: een voorwaarde op de trigger, zodat hij alleen bij DOM Ready vuurt waar Page Path overeenkomt. De trigger past bij regels over URL's, de plaatshouder past bij regels over sjablonen.

Meer dan één teller op een pagina

De lijst neemt er zoveel als nodig. De positie in de lijst is het nummer in de ID van de plaatshouder:

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

De eerste gaat in s4u_cp0, de tweede in s4u_cp1. Beide zijn tijdens het schrijven hiervan in een browser nagekeken: de eerste tekende als een pictogram van 20 bij 20, de tweede als een strook van 162 bij 25, elk binnen zijn eigen plaatshouder en nergens anders op de pagina.

Vier dingen die bijten

• De twee werkwijzen mengen niet. Een tag die een kenmerk data-id heeft en de lijst zet, levert twee tellers op, en de twee treffers worden apart geteld.
• De lijst heeft altijd s4ustyleid nodig. Het kenmerk data-style valt stilletjes terug op ontwerp 30 wanneer het ontbreekt. De lijstversie heeft die terugval niet en zal om een leeg ontwerp vragen.
• Een ontbrekende plaatshouder mislukt geruisloos. Geen teller, geen fout, niets in de console. Verschijnt er niets, dan is de ID de eerste verdachte — s4u_cp0, met een nul, niet met de letter O.
• De onzichtbare teller heeft met opzet geen link. Ontwerp 980 tekent er geen, want een doorzichtig klikdoel van één pixel op andermans pagina is een valstrik en geen voorziening. Voor een link doet ontwerp 981 het, met zijn kleine pictogram.

Nakijken of het gelukt is

De modus Voorbeeld van Tag Manager laadt de pagina met de container actief. De tag hoort onder de afgevuurde tags bij de gebeurtenis DOM Ready te verschijnen. De statistiekpagina bevestigt het daarna — een bezoek via Voorbeeld telt als elk ander, dus het getal hoort binnen een paar seconden te bewegen.

Vuurt de tag wel maar verschijnt er niets, dan is het de plaatshouder of de trigger, in die volgorde van waarschijnlijkheid.