Kontaktovať podporu

Odpovedáme e-mailom, zvyčajne do dvoch dní.

Google reCAPTCHA kontroluje toto podanie na ochranu pred zneužitím; údaje sa prenášajú spoločnosti Google. Skript sa načíta až pri otvorení tohto formulára.

← Všetky príspevky

Pridanie počítadla Stats4U cez Google Tag Manager

· Lukas Wojcik

O obsahu a jeho overovaní

V tomto článku

Na blogu je návod z roku 2015. Jeho snímky obrazovky zobrazujú nástroj Tag Manager, ktorý už tak nevyzerá, a jeden z jeho siedmich krokov – zaškrtnutie document.write – už vôbec nie je potrebný. Toto ho nahrádza.

Zodpovedá aj otázku, na ktorú starý návod rezignoval. Ten odporúčal pri nástroji Tag Manager neviditeľné počítadlo, pretože polohu obrázka so štatistikami nebolo možné ovládať. Dá sa to. Je to v spodnej časti tejto stránky.

Stručná verzia

V nástroji Tag Manager: Značky → Nová → Vlastné HTML, a do poľa HTML vložte jeden riadok:

20157 — krokovdnes3 — polia a spúšťačkrok document.write je preč — skript ho už nepoužíva 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

Spúšťač sa nastaví na Všetky stránky; potom uložte a zverejnite kontajner. Atribút data-id obsahuje číslo počítadla, ktoré je uvedené na stránke so štatistikami.

To je celá práca – tri polia a spúšťač tam, kde bolo v roku 2015 treba sedem krokov. Pri document.write netreba nič zaškrtávať, pretože ho skript už nepoužíva.

Čo to vlastne robí a prečo to nemusí byť správna voľba

Skript umiestni počítadlo bezprostredne za seba na stránke. Pri vložení priamo do ručne písaného HTML je to presne správne: počítadlo sa objaví tam, kde je kód.

Cez nástroj Tag Manager je to iné, pretože umiestnenie už nie je slobodnou voľbou. Rozhoduje kontajner a ten je zvyčajne v hlavičke dokumentu alebo tam, kde bol nainštalovaný jeho úryvok. Počítadlo sa teda vloží tam – nie do päty, nie do bočného panela, ale kamkoľvek nástroj Tag Manager vložil značku.

Pri neviditeľnom počítadle na tom ani trochu nezáleží, a preto ho starý návod odporúčal. Dizajn 980 nezobrazuje nič, dizajn 981 zobrazuje iba malú ikonu s odkazom na stránku so štatistikami. V takom prípade je stručná verzia vyššie úplná a zvyšok tohto článku je voliteľný.

Umiestnenie viditeľného počítadla na konkrétne miesto si vyžaduje trochu viac.

Ovládanie miesta zobrazenia počítadla

Skript má druhý režim, ktorý starý návod nikdy nespomínal. Namiesto atribútu data-id prijíma zoznam a hľadá zástupné prvky podľa ID.

Prvý krok – zástupný prvok na stránke, kamkoľvek počítadlo patrí. Patrí priamo do šablóny webu, nie do nástroja Tag Manager, pretože práve nástroj Tag Manager sa snažíme z tohto rozhodovania vylúčiť:

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

Druhý krok – v nástroji Tag Manager toto nahradí jednoriadkový kód. Ten istý 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>

Tretí krok – zmeňte spúšťač. Toto je časť, na ktorej ľudia stroskotávajú. Spúšťač Všetky stránky sa spustí tak skoro, ako to nástroj Tag Manager dokáže, čo je často ešte pred existenciou zástupného prvku v dokumente. Vstavaný spúšťač DOM Ready je tu správnou voľbou. Počítadlo musí prísť po prvku div, nie pred ním.

Počítadlo sa teraz zobrazuje vnútri tohto prvku div a nikde inde.

Ovládanie stránok, na ktorých sa zobrazuje

Sú tu dve nezávislé možnosti ovládania a oplatí sa pochopiť ich samostatne.

Jednou z nich je zástupný prvok. Prvý riadok vo funkcii urobí svoju prácu: ak chýba s4u_cp0 na stránke, zastaví sa a skript sa ani nestiahne. Šablóna, ktorá obsahuje prvok div, teda dostane počítadlo a tá, ktorá ho neobsahuje, nie – rozhoduje sa priamo v šablónach webu bez zmeny nástroja Tag Manager a bez kroku zverejnenia.

Druhou je spúšťač. Namiesto toho možno rovnaké rozhodnutie urobiť v nástroji Tag Manager: podmienkou spúšťača, aby sa pri udalosti DOM Ready spustil iba tam, kde vyhovuje hodnota Page Path. Spúšťač sa hodí na pravidlá o URL, zástupný prvok na pravidlá o šablónach.

Viac než jedno počítadlo na stránke

Zoznam prijme toľko počítadiel, koľko treba. Pozícia v zozname je číslom v ID zástupného prvku:

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

Prvé patrí do s4u_cp0, druhé do s4u_cp1. Obe boli pri písaní overené v prehliadači: prvé sa vykreslilo ako ikona 20 × 20, druhé ako pásik 162 × 25, každé vo vlastnom zástupnom prvku a nikde inde na stránke.

Štyri veci, ktoré vedia potrápiť

  • Obe metódy sa nedajú miešať. Značka, ktorá má atribút data-id a zároveň nastavuje zoznam, vytvorí dve počítadlá a obe zobrazenia sa započítajú samostatne.
  • Zoznam vždy potrebuje s4ustyleid. Ak atribút data-style chýba, potichu sa použije dizajn 30. Verzia so zoznamom takúto náhradnú voľbu nemá a vyžiada si prázdny dizajn.
  • Chýbajúci zástupný prvok zlyhá potichu. Žiadne počítadlo, žiadna chyba, nič v konzole. Keď sa nič neobjaví, prvé podozrenie padá na ID – s4u_cp0, s nulou, nie písmenom O.
  • Neviditeľné počítadlo nemá odkaz zámerne. Dizajn 980 sa vykresľuje bez neho, pretože priehľadný jednopixelový cieľ kliknutia na cudzej stránke je skôr pasca než funkcia. Odkaz poskytne dizajn 981 so svojou malou ikonou.

Overenie funkčnosti

V nástroji Tag Manager režim Ukážka načíta stránku s aktívnym kontajnerom. Značka by sa mala objaviť medzi spustenými značkami pre udalosť DOM Ready. Stránka so štatistikami to potom potvrdí – návšteva cez režim Ukážka sa počíta ako každá iná, takže číslo by sa malo do niekoľkých sekúnd zmeniť.

Ak sa značka spustí, ale nič sa neobjaví, ide o zástupný prvok alebo spúšťač, v tomto poradí pravdepodobnosti.

Reklama