Aggiungere un contatore Stats4U con Google Tag Manager

Su questo blog esiste una guida del 2015. Le sue schermate mostrano un Tag Manager che oggi ha un aspetto diverso, e uno dei suoi sette passaggi — spuntare document.write — non serve più affatto. Questo articolo la sostituisce.

Risponde anche alla domanda che la vecchia guida aveva lasciato in sospeso. Diceva che con Tag Manager si dovrebbe usare il contatore invisibile, perché «non è possibile controllare dove verrà mostrata l'immagine Stats». Invece è possibile. Si trova in fondo a questa pagina.

La versione breve

In Tag Manager: Tags → New → Custom HTML, e una riga da incollare nel campo HTML:

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

Il trigger va impostato su All Pages, poi si salva e si pubblica il container. Il segnaposto YOUR-ID va sostituito con il numero del contatore, che si trova nella pagina delle statistiche.

Tutto qui — tre campi e un trigger, dove il 2015 ne richiedeva sette. Non c'è nulla da spuntare riguardo a document.write, perché lo script non lo usa più.

Cosa fa realmente, e perché potrebbe non essere quello che serve

Lo script posiziona il contatore subito dopo se stesso nella pagina. Incollato direttamente nell'HTML del sito questo è esattamente corretto: il contatore compare dove è stato messo il codice.

Con Tag Manager è diverso, perché la posizione del codice non la decide più chi lo incolla. La decide il container, che di solito si trova nell'head del documento o comunque dove è stato installato lo snippet del container. Il contatore viene quindi inserito lì — non nel footer, non nella sidebar, ma ovunque Tag Manager abbia iniettato il tag.

Per un contatore invisibile questo non ha alcuna importanza, ed è per questo che la vecchia guida ne consigliava uno. Il design 980 non mostra nulla, il design 981 mostra solo una piccola icona che rimanda alla pagina delle statistiche. Se è tutto ciò che serve, la versione breve qui sopra è completa e la lettura può fermarsi qui.

Per un contatore visibile in un punto specifico, il resto dell'articolo continua.

Controllare dove compare il contatore

Lo script ha una seconda modalità che la vecchia guida non menzionava. Invece dell'attributo data-id riceve una lista, e cerca elementi segnaposto in base all'ID.

Primo passaggio — un segnaposto nella pagina, dove deve stare il contatore. Questo va nel template del sito, non in Tag Manager, perché è proprio Tag Manager che stiamo cercando di tenere fuori da questa decisione:

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

Secondo passaggio — in Tag Manager va questo al posto della riga singola. Stesso tipo di tag, Custom 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>

Terzo passaggio — cambiare il trigger. È la parte in cui la gente inciampa più spesso. All Pages scatta il prima possibile per Tag Manager, il che spesso avviene prima che il segnaposto esista nel documento. Serve invece il trigger integrato DOM Ready. Il contatore deve arrivare dopo il div, non prima.

Ora il contatore compare dentro quel div, e da nessun'altra parte.

Controllare su quali pagine compare

Le leve indipendenti sono due, ed è utile capirle separatamente.

Il segnaposto è una di queste. Nella prima riga dentro la funzione: se sulla pagina non c'è nessun s4u_cp0, lo script si ferma e non viene nemmeno scaricato. Quindi un template che include il div ottiene un contatore, e uno che non lo include no — deciso nei template stessi, senza alcuna modifica in Tag Manager e senza dover pubblicare nulla.

Il trigger è l'altra. Per decidere in Tag Manager basta assegnare una condizione al trigger — far scattare DOM Ready solo dove Page Path corrisponde. Questo approccio serve quando la regola riguarda gli URL, il segnaposto quando riguarda i template.

Più di un contatore su una pagina

La lista ne accetta quanti ne servono. La posizione nella lista corrisponde al numero nell'ID del segnaposto:

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

Il primo va in s4u_cp0, il secondo in s4u_cp1. Entrambi sono stati verificati in un browser durante la stesura di questo articolo: il primo si è generato come un'icona 20 per 20, il secondo come una barra 162 per 25, ciascuno dentro il proprio segnaposto e in nessun altro punto della pagina.

Quattro cose su cui si inciampa

• I due metodi non vanno usati insieme. Se il tag ha un attributo data-id e imposta anche la lista, si ottengono due contatori, e i due hit vengono conteggiati separatamente.
• s4ustyleid va sempre impostato nella lista. L'attributo data-style, se omesso, ripiega silenziosamente sul design 30. La versione con la lista non ha questo ripiego e richiederà un design vuoto.
• Un segnaposto mancante fallisce in silenzio. Nessun contatore, nessun errore, niente nella console. Se non compare nulla, il primo controllo è sull'ID — s4u_cp0, con uno zero, non la lettera O.
• Il contatore invisibile non ha link di proposito. Il design 980 si genera senza, perché un'area cliccabile trasparente di un pixel sulla pagina di qualcun altro è una trappola, non una funzionalità. Il link c'è nel 981, che è la piccola icona.

Verificare che abbia funzionato

Con la modalità Preview di Tag Manager si carica la pagina. Il tag dovrebbe comparire tra i tag attivati per l'evento DOM Ready. Poi si controlla la pagina delle statistiche — una visita tramite Preview viene conteggiata come qualsiasi altra, quindi il numero dovrebbe muoversi entro pochi secondi.

Se il tag scatta ma non compare nulla, il problema è il segnaposto o il trigger, in quest'ordine di probabilità.