Stats4U-számláló hozzáadása Google Tag Manager segítségével

A blogon már van egy 2015-ös útmutató erről a témáról. A képernyőképein látható Tag Manager már nem így néz ki, és hét lépése közül az egyik – a document.write bejelölése – már egyáltalán nem szükséges. Ez a bejegyzés váltja fel.

Arra a kérdésre is választ ad, amelyet a régi útmutató feladott. Az a Tag Managerhez a láthatatlan számlálót ajánlotta, azzal az indokkal, hogy a statisztikakép helyét nem lehet szabályozni. Lehet. Hogy hogyan, az ennek az oldalnak az alján olvasható.

Röviden

A Tag Managerben: Címkék → Új → Egyéni HTML, majd illesszen be egyetlen sort a HTML mezőbe:

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

Az eseményindító: Minden oldal; ezután mentse, és tegye közzé a tárolót. A data-id attribútum értéke a számlálószám, amely a statisztikaoldalon látható.

Ennyi az egész – három mező és egy eseményindító, ahol 2015-ben hét lépés kellett. A document.write miatt semmit sem kell bejelölni, mert a szkript már nem használja.

Mit csinál ez valójában, és miért nem biztos, hogy ez a jó választás

A szkript a számlálót közvetlenül saját maga után helyezi el az oldalon. Ha kézzel írt HTML-be illesztik be, ez pontosan így helyes: a számláló ott jelenik meg, ahol a kód áll.

A Tag Manageren keresztül ez másképp van, mert az elhelyezés már nem szabad választás kérdése. A tároló dönt, és az általában a dokumentum head részében ül, vagy ott, ahová a tároló kódrészletét telepítették. Így a számláló is oda kerül – nem a láblécbe, nem az oldalsávba, hanem oda, ahová a Tag Manager éppen beszúrta a címkét.

Egy láthatatlan számlálónál ez a legkevésbé sem számít, ezért is ezt ajánlotta a régi útmutató. A 980 számú dizájn semmit sem jelenít meg, a 981 számú pedig csak egy kis ikont, amely a statisztikaoldalra mutat. Ebben az esetben a fenti rövid változat teljes, a cikk további része pedig elhagyható.

Ha egy látható számlálót egy adott helyre szeretne tenni, az egy kicsit több munkát igényel.

Hol jelenjen meg a számláló

A szkriptnek van egy második módja is, amelyet a régi útmutató meg sem említett. A data-id attribútum helyett egy listát kap, és azonosító alapján helyőrző elemeket keres.

Első lépés – helyőrző az oldalon, ott, ahová a számláló való. Magába a weboldal sablonjába kerül, nem a Tag Managerbe, mert éppen a Tag Managert szeretnénk kihagyni ebből a döntésből:

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

Második lépés – a Tag Managerben ez váltja fel az egysoros kódot. Ugyanaz az Egyéni HTML címketípus:

<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>

Harmadik lépés – módosítsa az eseményindítót. Ez az a rész, amelyen sokan elcsúsznak. A Minden oldal olyan korán aktiválódik, amennyire a Tag Manager csak tudja, gyakran még azelőtt, hogy a helyőrző létezne a dokumentumban. Itt a beépített DOM kész eseményindító a helyes választás. A számlálónak a div után kell megérkeznie, nem előtte.

A számláló most ebben a divben jelenik meg, és sehol máshol.

Mely oldalakon jelenjen meg

Itt két egymástól független eszköz áll rendelkezésre, és érdemes őket külön megérteni.

Az egyik a helyőrző. A munkát a függvény első sora végzi: ha nincs s4u_cp0 az oldalon, leáll, és a szkript le sem töltődik. Így az a sablon, amely tartalmazza a divet, kap számlálót, amelyik nem, az nem – ezt magukban a weboldal sablonjaiban dönti el, Tag Manager-módosítás és közzététel nélkül.

A másik az eseményindító. Ugyanezt a döntést a Tag Managerben is meg lehet hozni: egy feltétellel az eseményindítón, hogy csak ott aktiválódjon a DOM kész eseménynél, ahol a Page Path egyezik. Az eseményindító az URL-ekre vonatkozó szabályokhoz illik, a helyőrző a sablonokra vonatkozókhoz.

Több számláló egy oldalon

A lista annyi számlálót fogad, amennyi szükséges. A listában elfoglalt hely a helyőrző azonosítójában szereplő szám:

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

Az első helye: s4u_cp0, a másodiké: s4u_cp1. Mindkettőt ellenőriztük böngészőben a cikk írása közben: az első 20 × 20 méretű ikonként jelent meg, a második 162 × 25 méretű csíkként, mindkettő a saját helyőrzőjében, és sehol máshol az oldalon.

Négy buktató

• A két módszer nem keverhető. Ha egy címkének van data-id attribútuma, és emellett a listát is beállítja, két számláló jön létre, és a két megtekintés külön számolódik.
• A listához mindig kell s4ustyleid. A data-style attribútum hiányában a szkript csendben a 30-as dizájnt használja. A listás változatnak nincs ilyen tartaléka, és üres dizájnt fog kérni.
• A hiányzó helyőrző csendben hibázik. Nincs számláló, nincs hibaüzenet, semmi a konzolban. Ha semmi sem jelenik meg, az azonosító az első gyanúsított – s4u_cp0, nullával, nem O betűvel.
• A láthatatlan számlálónak szándékosan nincs linkje. A 980-as dizájn link nélkül jelenik meg, mert egy átlátszó, egypixeles kattintási célpont valaki más oldalán csapda, nem funkció. Ha linket szeretne, a 981-es dizájn ezt nyújtja, a kis ikonjával.

Ellenőrzés

A Tag Manager Előnézet módja aktív tárolóval tölti be az oldalt. A címkének a DOM kész eseménynél az aktivált címkék között kell megjelennie. Ezután a statisztikaoldal is megerősíti – az Előnézeten keresztüli látogatás ugyanúgy számít, mint bármely más, így a számnak néhány másodpercen belül el kell mozdulnia.

Ha a címke aktiválódik, de semmi sem jelenik meg, akkor a helyőrzővel vagy az eseményindítóval van gond – ebben a valószínűségi sorrendben.