Stats4U skaitiklio įterpimas per Google Tag Manager

Yra 2015 metų šio tinklaraščio vadovas šia tema. Jo ekrano kopijose Tag Manager atrodo kitaip nei dabar, o vieno iš septynių žingsnių – pažymėti document.write – apskritai nebereikia. Šis vadovas jį pakeičia.

Jis taip pat atsako į klausimą, kurį senasis vadovas paliko nuošalyje. Anas rekomendavo su Tag Manager naudoti nematomą skaitiklį, nes statistikos paveikslėlio padėties nebuvo galima valdyti. Galima. Tai aprašyta šio puslapio apačioje.

Trumpai

Tag Manager sąsajoje: Tags → New → Custom HTML, ir įklijuokite vieną eilutę į HTML lauką:

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

Suaktyvinimo taisyklės parinktis – All Pages; tada išsaugokite ir paskelbkite konteinerį. Atribute data-id nurodomas skaitiklio numeris, pateiktas statistikos puslapyje.

Tai visas darbas – trys laukai ir suaktyvinimo taisyklė ten, kur 2015 m. reikėjo septynių žingsnių. Nereikia nieko žymėti dėl document.write, nes scenarijus jo nebenaudoja.

Ką tai iš tiesų daro ir kodėl gali būti netinkamas pasirinkimas

Scenarijus įdeda skaitiklį iškart po savęs puslapyje. Įklijavus tiesiai į ranka rašytą HTML, tai kaip tik teisinga: skaitiklis pasirodo ten, kur yra kodas.

Per Tag Manager yra kitaip, nes vietos jau nebegalima laisvai rinktis. Sprendžia konteineris, o jis paprastai būna dokumento antraštėje arba ten, kur įdiegtas konteinerio fragmentas. Taigi skaitiklis įterpiamas ten – ne poraštėje, ne šoninėje juostoje, o ten, kur Tag Manager įterpė žymą.

Naudojant nematomą skaitiklį tai visai nesvarbu, todėl senasis vadovas jį ir rekomendavo. Dizainas 980 nieko nerodo, dizainas 981 rodo tik mažą piktogramą su nuoroda į statistikos puslapį. Tokiu atveju pirmiau pateikto trumpo varianto visiškai pakanka, o likusią straipsnio dalį skaityti nebūtina.

Norint matomą skaitiklį įdėti į konkrečią vietą, reikia šiek tiek daugiau.

Kaip valdyti skaitiklio vietą

Scenarijus turi antrą režimą, kurio senasis vadovas nepaminėjo. Vietoj atributo data-id jis priima sąrašą ir pagal ID ieško vietą rezervuojančių elementų.

Pirmas žingsnis – vietą rezervuojantis elementas puslapyje, ten, kur turi būti skaitiklis. Jis įdedamas į patį svetainės šabloną, o ne į Tag Manager, nes būtent Tag Manager ir siekiame neleisti priimti šio sprendimo:

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

Antras žingsnis – Tag Manager sąsajoje šis kodas pakeičia vienos eilutės fragmentą. Tas pats Custom HTML žymos tipas:

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

Trečias žingsnis – pakeiskite suaktyvinimo taisyklę. Štai kur žmonės suklysta. All Pages suaktyvinama, kai tik Tag Manager gali tai padaryti, dažnai dar prieš dokumente atsirandant rezervuojančiam elementui. Čia tinkama įtaisytoji DOM Ready suaktyvinimo taisyklė. Skaitiklis turi atsirasti po div, o ne prieš jį.

Skaitiklis dabar pasirodo tame div ir niekur kitur.

Kaip valdyti, kuriuose puslapiuose jis rodomas

Čia yra dvi nepriklausomos priemonės, kurias verta suprasti atskirai.

Viena jų – vietą rezervuojantis elementas. Darbą atlieka pirmoji funkcijos eilutė: jei nėra s4u_cp0 puslapyje, ji sustoja ir scenarijus net neatsisiunčiamas. Taigi šablonas su div gauna skaitiklį, o šablonas be jo – ne; sprendžiama pačiuose svetainės šablonuose, nekeičiant Tag Manager ir nieko jame neskelbiant.

Kita – suaktyvinimo taisyklė. Tą patį sprendimą galima priimti Tag Manager: suaktyvinimo taisyklės sąlyga leidžia ją vykdyti per DOM Ready tik ten, kur sutampa Page Path. Suaktyvinimo taisyklė tinka URL taisyklėms, o rezervuojantis elementas – šablonų taisyklėms.

Daugiau nei vienas skaitiklis puslapyje

Sąrašas priima tiek, kiek reikia. Vieta sąraše yra skaičius rezervuojančio elemento ID:

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

Pirmasis patenka į s4u_cp0, antrasis – į s4u_cp1. Rašant šį tekstą abu patikrinti naršyklėje: pirmasis atvaizduotas kaip 20 × 20 dydžio piktograma, antrasis – kaip 162 × 25 dydžio juostelė, kiekvienas savo rezervuotame elemente ir niekur kitur puslapyje.

Keturi keblumai

• Abiejų būdų maišyti negalima. Žyma, kuri turi data-id atributą ir nustato sąrašą, sukuria du skaitiklius, o dvi peržiūros užskaitomos atskirai.
• Sąrašui visada reikia s4ustyleid. Jei atributo data-style nėra, tyliai pasirenkamas 30 dizainas. Sąrašo versija tokio atsarginio varianto neturi ir prašys tuščio dizaino.
• Trūkstamas rezervuojantis elementas nesukelia pranešimo. Skaitiklio nėra, klaidos nėra, konsolė tuščia. Kai niekas nepasirodo, pirmiausia įtartinas ID – s4u_cp0, su nuliu, o ne raide O.
• Nematomas skaitiklis sąmoningai neturi nuorodos. 980 dizainas atvaizduojamas be jos, nes skaidri vieno pikselio spustelėjimo sritis svetimame puslapyje yra spąstai, o ne funkcija. Nuorodą suteikia 981 dizainas su maža piktograma.

Kaip patikrinti, ar pavyko

Tag Manager režimas Preview įkelia puslapį su aktyviu konteineriu. Žyma turėtų būti rodoma tarp įvykio DOM Ready suaktyvintų žymų. Statistikos puslapis tuomet tai patvirtina – apsilankymas per Preview skaičiuojamas kaip bet kuris kitas, todėl skaičius turėtų pasikeisti per kelias sekundes.

Jei žyma suaktyvinama, bet niekas nepasirodo, tikėtinos priežastys – rezervuojantis elementas arba suaktyvinimo taisyklė, tokia tikimybės tvarka.