Kontaktovat podporu

Odpovíme e-mailem, obvykle do dvou dnů.

Google reCAPTCHA kontroluje toto odeslání kvůli ochraně před zneužitím; data se přitom předávají společnosti Google. Skript se načte až při otevření tohoto formuláře.

← Všechny články

Jak přidat počítadlo Stats4U přes Google Tag Manager

· Lukas Wojcik

Na blogu je návod k tomu z roku 2015. Jeho snímky obrazovky ukazují Tag Manager, který už tak nevypadá, a jeden z jeho sedmi kroků – zaškrtnutí document.write – už vůbec není potřeba. Tento článek ho nahrazuje.

Odpovídá také na otázku, kterou starý návod vzdal. Ten s Tag Managerem doporučoval neviditelné počítadlo s odůvodněním, že pozici obrázku statistik nelze ovlivnit. Lze. Návod je na konci této stránky.

Krátká verze

V Tag Manageru: Značky → Nová → Vlastní HTML, pak do pole HTML vložte jeden řádek:

20157 — krokůdnes3 — pole a spouštěčkrok document.write odpadl — skript ho už nepoužívá 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

Spouštěč nastavte na Všechny stránky; pak kontejner uložte a publikujte. Atribut data-id obsahuje číslo počítadla, které je uvedeno na stránce statistik.

To je celá práce – tři pole a spouštěč, kde rok 2015 potřeboval sedm kroků. Ohledně document.write není třeba nic zaškrtávat, protože ho skript už nepoužívá.

Co to ve skutečnosti dělá a proč to nemusí být správná volba

Skript umístí počítadlo hned za sebe na stránce. Vložený přímo do ručně psaného HTML je to přesně správně: počítadlo se objeví tam, kde je kód.

Přes Tag Manager je to jiné, protože umístění už není volné. Rozhoduje kontejner a ten obvykle sedí v hlavičce dokumentu nebo tam, kam byl nainstalován jeho kód. Počítadlo se tedy vloží tam – ne do patičky, ne do postranního panelu, ale tam, kam Tag Manager zrovna značku vložil.

Pro neviditelné počítadlo to vůbec nevadí, a proto ho starý návod doporučoval. Design 980 nezobrazuje nic, design 981 zobrazuje jen malou ikonu s odkazem na stránku statistik. V tom případě je krátká verze výše úplná a zbytek článku je nepovinný.

Umístit viditelné počítadlo na konkrétní místo dá trochu víc práce.

Jak určit, kde se počítadlo objeví

Skript má druhý režim, o kterém starý návod nikdy nemluvil. Místo atributu data-id přijímá seznam a hledá zástupné prvky podle ID.

Krok jedna – zástupný prvek na stránce, kdekoli má počítadlo být. Patří přímo do šablony webu, ne do Tag Manageru, protože právě Tag Manager se snažíme z tohoto rozhodnutí vynechat:

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

Krok dva – v Tag Manageru toto nahradí jednořádkový kód. Stejný typ značky Vlastní 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>

Krok tři – změňte spouštěč. Tady se lidé nejčastěji spálí. Všechny stránky se spouští tak brzy, jak to Tag Manager zvládne, což je často dřív, než zástupný prvek v dokumentu existuje. Vestavěný spouštěč DOM Ready je tu ten správný. Počítadlo musí přijít až po divu, ne před ním.

Počítadlo se teď objeví uvnitř toho divu a nikde jinde.

Jak určit, na kterých stránkách se objeví

Jsou tu dvě nezávislé páky a vyplatí se porozumět každé zvlášť.

Jednou z nich je zástupný prvek. Práci udělá první řádek uvnitř funkce: pokud chybí s4u_cp0 na stránce, skončí a skript se vůbec nestáhne. Šablona, která div obsahuje, tedy počítadlo dostane a ta, která ho neobsahuje, ne – rozhoduje se přímo v šablonách webu, bez změny v Tag Manageru a bez publikování.

Tou druhou je spouštěč. Stejné rozhodnutí lze udělat i v Tag Manageru: podmínka na spouštěči, aby se při DOM Ready spustil jen tam, kde odpovídá Page Path. Spouštěč se hodí pro pravidla podle URL, zástupný prvek pro pravidla podle šablon.

Více počítadel na jedné stránce

Seznam jich pojme, kolik je potřeba. Pozice v seznamu je číslo v ID zástupného prvku:

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

První jde do s4u_cp0, druhé do s4u_cp1. Obojí bylo při psaní tohoto článku ověřeno v prohlížeči: první se vykreslilo jako ikona 20 × 20, druhé jako proužek 162 × 25, každé uvnitř svého zástupného prvku a nikde jinde na stránce.

Čtyři věci, které kousnou

  • Tyto dvě metody nekombinujte. Značka, která má data-id jako atribut a zároveň nastavuje seznam, vytvoří dvě počítadla a oba přístupy se započítají zvlášť.
  • Seznam vždy potřebuje s4ustyleid. Když atribut data-style chybí, použije se potichu design 30. Verze se seznamem žádnou takovou zálohu nemá a vyžádá si prázdný design.
  • Chybějící zástupný prvek selže potichu. Žádné počítadlo, žádná chyba, nic v konzoli. Když se nic neobjeví, je ID první podezřelý – s4u_cp0, s nulou, ne s písmenem O.
  • Neviditelné počítadlo nemá odkaz schválně. Design 980 se vykresluje bez něj, protože průhledný jednopixelový cíl kliknutí na cizí stránce je past, ne funkce. Pro odkaz slouží design 981 s malou ikonou.

Jak ověřit, že to funguje

Režim Náhled Tag Manageru načte stránku s aktivním kontejnerem. Značka by se měla objevit mezi spuštěnými značkami u události DOM Ready. Stránka statistik to pak potvrdí – návštěva přes náhled se počítá jako každá jiná, takže by se číslo mělo během pár sekund pohnout.

Pokud se značka spustí, ale nic se neobjeví, je chyba v zástupném prvku nebo ve spouštěči, v tomto pořadí pravděpodobnosti.

Reklama