Kontakta supporten

Vi svarar via e-post, oftast inom två dagar.

Google reCAPTCHA kontrollerar det här inskicket mot missbruk; data skickas till Google. Skriptet laddas först när formuläret öppnas.

← Alla inlägg

Lägg till en Stats4U-räknare med Google Tag Manager

· Lukas Wojcik

Det finns en guide till detta på bloggen från 2015. Dess skärmbilder visar ett Tag Manager som inte längre ser ut så, och ett av dess sju steg – att kryssa i document.write – behövs inte längre alls. Det här inlägget ersätter den.

Det besvarar också frågan som den gamla guiden gav upp inför. Den rekommenderade den osynliga räknaren tillsammans med Tag Manager, med motiveringen att placeringen av Stats-bilden inte gick att styra. Det går. Svaret finns längst ned på den här sidan.

Kortversionen

I Tag Manager: Taggar → Ny → Anpassad HTML, och klistra in en rad i HTML-fältet:

20157 — stegi dag3 — fält och en utlösaresteget med document.write är borta — skriptet använder det inte längre 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

Utlösaren ställs in på Alla sidor; spara sedan och publicera behållaren. Attributet data-id tar räknarnumret, som står på statistiksidan.

Det är hela jobbet – tre fält och en utlösare, där det 2015 krävdes sju steg. Ingenting behöver kryssas i för document.write, eftersom skriptet inte längre använder det.

Vad det faktiskt gör, och varför det kanske inte är rätt val

Skriptet placerar räknaren direkt efter sig självt på sidan. Inklistrat direkt i handskriven HTML är det precis rätt: räknaren visas där koden står.

Via Tag Manager är det annorlunda, eftersom placeringen inte längre är ett fritt val. Behållaren bestämmer, och den sitter oftast i dokumentets head eller där behållarens kodavsnitt installerades. Så räknaren infogas där – inte i sidfoten, inte i sidofältet, utan där Tag Manager råkade injicera taggen.

För en osynlig räknare spelar det ingen som helst roll, och därför rekommenderade den gamla guiden en sådan. Design 980 visar ingenting, design 981 visar bara en liten ikon som länkar till statistiksidan. I så fall är kortversionen ovan komplett, och resten av artikeln är valfri.

Att placera en synlig räknare på ett bestämt ställe kräver lite mer.

Styr var räknaren visas

Skriptet har ett andra läge som den gamla guiden aldrig nämnde. I stället för attributet data-id tar det en lista och letar efter platshållarelement via deras ID.

Steg ett – en platshållare på sidan, där räknaren ska sitta. Den läggs i själva webbplatsens mall, inte i Tag Manager, eftersom det är just Tag Manager vi försöker hålla utanför det här beslutet:

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

Steg två – i Tag Manager ersätter detta enradaren. Samma taggtyp, Anpassad 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>

Steg tre – ändra utlösaren. Det är här många går bet. Alla sidor utlöses så tidigt som Tag Manager klarar, vilket ofta är innan platshållaren finns i dokumentet. Den inbyggda utlösaren DOM Ready är den rätta här. Räknaren måste komma efter div-elementet, inte före det.

Nu visas räknaren inuti det div-elementet och ingen annanstans.

Styr vilka sidor den visas på

Det finns två oberoende spakar här, och de är värda att förstå var för sig.

Platshållaren är den ena. Den första raden i funktionen gör jobbet: om det inte finns någon s4u_cp0 på sidan avbryts den, och skriptet laddas aldrig ens ned. En mall som innehåller div-elementet får alltså en räknare, och en som inte gör det får ingen – något som avgörs i själva webbplatsens mallar, utan ändringar i Tag Manager och utan publiceringssteg.

Utlösaren är den andra. Samma beslut kan i stället fattas i Tag Manager: ett villkor på utlösaren, så att den bara utlöses vid DOM Ready där Page Path matchar. Utlösaren passar för regler om URL:er, platshållaren för regler om mallar.

Mer än en räknare på en sida

Listan tar så många som behövs. Positionen i listan är numret i platshållarens ID:

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

Den första hamnar i s4u_cp0, den andra i s4u_cp1. Båda kontrollerades i en webbläsare medan detta skrevs: den första visades som en ikon på 20 × 20, den andra som en remsa på 162 × 25, var och en inuti sin egen platshållare och ingen annanstans på sidan.

Fyra saker som ställer till det

  • De två metoderna går inte att blanda. En tagg som har data-id som attribut och samtidigt sätter listan ger två räknare, och de två visningarna räknas var för sig.
  • Listan kräver alltid s4ustyleid. Attributet data-style faller i det tysta tillbaka på design 30 när det saknas. Listvarianten har ingen sådan reserv och begär då en tom design.
  • En saknad platshållare misslyckas tyst. Ingen räknare, inget fel, ingenting i konsolen. När ingenting visas är ID:t den första misstänkta – s4u_cp0, med en nolla, inte bokstaven O.
  • Den osynliga räknaren saknar länk med avsikt. Design 980 ritas utan länk, eftersom en genomskinlig klickyta på en pixel på någon annans sida är en fälla snarare än en funktion. Vill du ha en länk gör design 981 det, med sin lilla ikon.

Kontrollera att det fungerade

Tag Managers läge Förhandsgranska laddar sidan med behållaren aktiv. Taggen ska synas bland de utlösta taggarna för händelsen DOM Ready. Statistiksidan bekräftar det sedan – ett besök via förhandsgranskningen räknas som vilket annat som helst, så talet bör ändras inom några sekunder.

Om taggen utlöses men ingenting visas ligger felet troligast i platshållaren och i andra hand i utlösaren.

Annons