Obrati se podršci

Odgovaramo e-poštom, obično u roku od dva dana.

Google reCAPTCHA provjerava ovu prijavu radi zaštite od zlouporabe; podaci se šalju tvrtki Google. Skripta se učitava tek kada se otvori ovaj obrazac.

← Sve objave

Dodavanje brojača Stats4U uz Google Tag Manager

· Lukas Wojcik

O sadržaju i njegovoj provjeri

U ovom članku

Na blogu postoji vodič iz 2015.. Njegove snimke zaslona prikazuju Tag Manager koji više ne izgleda tako, a jedan od sedam koraka – označavanje opcije document.write – više uopće nije potreban. Ovo ga zamjenjuje.

Također odgovara na pitanje od kojeg je stari vodič odustao. On je preporučivao nevidljivi brojač uz Tag Manager zato što se položaj slike statistike nije mogao kontrolirati. Može se. Objašnjenje je na dnu ove stranice.

Kratka verzija

U alatu Tag Manager: Tags → New → Custom HTML, a u HTML polje zalijepite jedan redak:

20157 — korakadanas3 — polja i okidačkorak document.write više ne postoji — skripta ga više ne koristi 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

Okidač postavite na All Pages; zatim spremite i objavite spremnik. Atribut data-id prima broj brojača koji je naveden na stranici statistike.

To je cijeli posao – tri polja i okidač, ondje gdje je 2015. trebalo sedam koraka. Ništa ne treba označavati za document.write jer ga skripta više ne koristi.

Što to zapravo radi i zašto možda nije pravi izbor

Skripta postavlja brojač neposredno iza sebe na stranici. Kada je zalijepljena izravno u ručno pisani HTML, to je upravo kako treba: brojač se pojavljuje ondje gdje se nalazi kod.

Putem alata Tag Manager drukčije je jer položaj više nije slobodan izbor. Odlučuje spremnik, a on se obično nalazi u zaglavlju dokumenta ili ondje gdje je ugrađen njegov isječak. Zato se brojač umeće ondje – ne u podnožje ni u bočnu traku, nego gdje god je Tag Manager umetnuo oznaku.

Za nevidljivi brojač to nimalo nije važno, zbog čega ga je stari vodič i preporučivao. Dizajn 980 ne prikazuje ništa, a dizajn 981 prikazuje samo malu ikonu s poveznicom na stranicu statistike. U tom je slučaju kratka verzija iznad potpuna, a ostatak članka neobvezan.

Za postavljanje vidljivog brojača na određeno mjesto potrebno je nešto više.

Određivanje mjesta prikaza brojača

Skripta ima drugi način rada koji stari vodič nikad nije spomenuo. Umjesto atributa data-id prima popis i traži zamjenske elemente prema ID-ju.

Prvi korak – zamjenski element na stranici, ondje gdje brojač treba biti. Stavlja se u sam predložak web-mjesta, a ne u Tag Manager jer upravo utjecaj alata Tag Manager pokušavamo isključiti iz te odluke:

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

Drugi korak – u alatu Tag Manager ovo zamjenjuje onaj jedan redak. Ista vrsta oznake Custom 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>

Treći korak – promijenite okidač. Ovdje se ljudi često prevare. All Pages aktivira se čim Tag Manager može, a to je često prije nego što zamjenski element postoji u dokumentu. Ugrađeni okidač DOM Ready ovdje je pravi izbor. Brojač mora stići nakon elementa div, a ne prije njega.

Brojač se sada pojavljuje unutar tog elementa div i nigdje drugdje.

Određivanje stranica na kojima se pojavljuje

Ovdje postoje dvije neovisne mogućnosti upravljanja i vrijedi ih razumjeti zasebno.

Zamjenski element jedna je od njih. Prvi redak u funkciji obavlja posao: ako element s4u_cp0 nije prisutan na stranici, izvršavanje se zaustavlja i skripta se uopće ne preuzima. Zato predložak koji uključuje div dobiva brojač, a onaj koji ga ne uključuje ne dobiva ga – odluka se donosi u samim predlošcima web-mjesta, bez promjene u alatu Tag Manager i bez koraka objavljivanja.

Okidač je druga. Ista odluka umjesto toga može se donijeti u alatu Tag Manager: uvjetom na okidaču, tako da se pri događaju DOM Ready aktivira samo ondje gdje odgovara Page Path. Okidač odgovara pravilima o URL-ovima, a zamjenski element pravilima o predlošcima.

Više od jednog brojača na stranici

Popis prima onoliko brojača koliko je potrebno. Položaj na popisu broj je u ID-ju zamjenskog elementa:

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

Prvi ide u s4u_cp0, drugi u s4u_cp1. Oba su provjerena u pregledniku tijekom pisanja: prvi se prikazao kao ikona veličine 20 × 20, a drugi kao traka veličine 162 × 25, svaki unutar vlastitog zamjenskog elementa i nigdje drugdje na stranici.

Četiri stvari koje stvaraju poteškoće

  • Te dvije metode ne kombiniraju se. Oznaka koja ima atribut data-id istodobno i postavlja popis stvara dva brojača, a ta se dva pregleda broje zasebno.
  • Popis uvijek zahtijeva s4ustyleid. Atribut data-style neprimjetno koristi dizajn 30 kao zamjenu kada nije naveden. Verzija s popisom nema takvu zamjenu i zatražit će prazan dizajn.
  • Nedostajući zamjenski element ne izaziva poruku o pogrešci. Nema brojača, nema pogreške, nema ničega u konzoli. Kada se ništa ne pojavi, prvo treba posumnjati na ID – s4u_cp0, s nulom, a ne slovom O.
  • Nevidljivi brojač namjerno nema poveznicu. Dizajn 980 iscrtava se bez nje jer je prozirna klikabilna meta od jednog piksela na tuđoj stranici zamka, a ne funkcija. Za poveznicu služi dizajn 981 s malom ikonom.

Provjera uspješnosti

Način rada alata Tag Manager Preview učitava stranicu s aktivnim spremnikom. Oznaka bi se trebala pojaviti među aktiviranim oznakama za događaj DOM Ready. Stranica statistike zatim to potvrđuje – posjet putem načina Preview broji se kao i svaki drugi, pa bi se broj trebao promijeniti unutar nekoliko sekundi.

Ako se oznaka aktivira, ali ništa se ne pojavi, razlog je zamjenski element ili okidač, tim redoslijedom vjerojatnosti.

Oglas