Adăugarea unui contor Stats4U cu Google Tag Manager

Există un ghid pe această temă pe blog, din 2015. Capturile sale de ecran arată un Tag Manager care nu mai arată așa, iar unul dintre cei șapte pași ai săi — bifarea opțiunii document.write — nu mai este deloc necesar. Acest articol îl înlocuiește.

Răspunde și la întrebarea la care vechiul ghid renunțase. Acela recomanda contorul invizibil în combinație cu Tag Manager, pe motiv că poziția imaginii Stats nu putea fi controlată. Poate fi. Explicația se află în partea de jos a acestei pagini.

Versiunea scurtă

În Tag Manager: Tags → New → Custom HTML, apoi lipiți o singură linie în câmpul HTML:

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

Declanșatorul se setează pe All Pages; apoi salvați și publicați containerul. Atributul data-id primește numărul contorului, care este afișat pe pagina de statistici.

Asta este tot — trei câmpuri și un declanșator, acolo unde în 2015 erau necesari șapte pași. Nu trebuie bifat nimic legat de document.write, pentru că scriptul nu îl mai folosește.

Ce face de fapt și de ce s-ar putea să nu fie alegerea potrivită

Scriptul plasează contorul imediat după el însuși în pagină. Lipit direct într-un HTML scris de mână, este exact ce trebuie: contorul apare acolo unde se află codul.

Prin Tag Manager lucrurile stau altfel, pentru că amplasarea nu mai este o alegere liberă. Decide containerul, iar acesta se află de obicei în secțiunea head a documentului sau oriunde a fost instalat fragmentul de cod al containerului. Așa că acolo este inserat contorul — nu în subsol, nu în bara laterală, ci oriunde s-a nimerit ca Tag Manager să injecteze eticheta.

Pentru un contor invizibil acest lucru nu contează deloc, motiv pentru care vechiul ghid recomanda unul. Designul 980 nu afișează nimic, designul 981 afișează doar o pictogramă mică, cu link către pagina de statistici. În acest caz, versiunea scurtă de mai sus este completă, iar restul articolului este opțional.

Plasarea unui contor vizibil într-un loc anume necesită ceva mai mult.

Controlul locului în care apare contorul

Scriptul are un al doilea mod, pe care vechiul ghid nu l-a menționat niciodată. În locul atributului data-id primește o listă și caută după ID elemente substituente (placeholder).

Pasul unu — un element substituent în pagină, acolo unde trebuie să apară contorul. Acesta se pune chiar în șablonul site-ului, nu în Tag Manager, pentru că tocmai pe Tag Manager vrem să-l ținem departe de această decizie:

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

Pasul doi — în Tag Manager, acesta înlocuiește codul de o singură linie. Același tip de etichetă, 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>

Pasul trei — schimbați declanșatorul. Aceasta este partea la care se greșește cel mai des. All Pages se declanșează cât de devreme poate Tag Manager, adesea înainte ca elementul substituent să existe în document. Declanșatorul încorporat DOM Ready este cel potrivit aici. Contorul trebuie să apară după div, nu înaintea lui.

Contorul apare acum în interiorul acelui div și nicăieri altundeva.

Controlul paginilor pe care apare

Există aici două pârghii independente și merită înțelese separat.

Elementul substituent este una dintre ele. Prima linie din funcție face treaba: dacă nu există s4u_cp0 în pagină, se oprește, iar scriptul nici măcar nu este descărcat. Așadar, un șablon care conține div-ul primește un contor, iar unul care nu îl conține nu primește — decizia se ia chiar în șabloanele site-ului, fără nicio modificare în Tag Manager și fără vreun pas de publicare.

Declanșatorul este cealaltă. Aceeași decizie poate fi luată și în Tag Manager: o condiție pe declanșator, astfel încât acesta să se declanșeze la DOM Ready doar acolo unde Page Path se potrivește. Declanșatorul este potrivit pentru reguli legate de URL-uri, elementul substituent pentru reguli legate de șabloane.

Mai multe contoare pe o pagină

Lista acceptă câte sunt necesare. Poziția în listă este numărul din ID-ul elementului substituent:

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

Primul ajunge în s4u_cp0, al doilea în s4u_cp1. Ambele au fost verificate într-un browser în timpul redactării: primul s-a afișat ca pictogramă de 20 pe 20, al doilea ca bandă de 162 pe 25, fiecare în propriul element substituent și nicăieri altundeva în pagină.

Patru capcane

Cele două metode nu se combină. O etichetă care are data-id ca atribut și setează lista produce două contoare, iar cele două accesări sunt numărate separat.
Lista are întotdeauna nevoie de s4ustyleid. Atributul data-style revine discret la designul 30 când lipsește. Varianta cu listă nu are o astfel de valoare de rezervă și va cere un design gol.
Un element substituent lipsă eșuează fără niciun semnal. Niciun contor, nicio eroare, nimic în consolă. Când nu apare nimic, primul suspect este ID-ul — s4u_cp0, cu cifra zero, nu cu litera O.
Contorul invizibil nu are link, în mod intenționat. Designul 980 se afișează fără link, pentru că o țintă de clic transparentă de un pixel pe pagina altcuiva este mai degrabă o capcană decât o funcție. Pentru un link există designul 981, cu pictograma sa mică.

Verificarea funcționării

Modul Preview din Tag Manager încarcă pagina cu containerul activ. Eticheta ar trebui să apară printre etichetele declanșate la evenimentul DOM Ready. Pagina de statistici confirmă apoi — o vizită prin Preview se numără ca oricare alta, așa că numărul ar trebui să se schimbe în câteva secunde.

Dacă eticheta se declanșează, dar nu apare nimic, de vină este elementul substituent sau declanșatorul, în această ordine a probabilității.