Kontakt z pomocą

Odpowiadamy e-mailem, zwykle w ciągu dwóch dni.

Google reCAPTCHA sprawdza to zgłoszenie pod kątem nadużyć; dane trafiają do Google. Skrypt ładuje się dopiero po otwarciu formularza.

← Wszystkie wpisy

Dodawanie licznika Stats4U za pomocą Google Tag Managera

· Lukas Wojcik

Istnieje poradnik na ten temat na blogu z 2015 roku. Jego zrzuty ekranu pokazują Tag Managera, który już tak nie wygląda, a jeden z siedmiu kroków – zaznaczenie document.write – nie jest już w ogóle potrzebny. Ten wpis go zastępuje.

Odpowiada też na pytanie, przy którym poddał się stary poradnik. Ten twierdził, że z Tag Managerem należy używać niewidocznego licznika, ponieważ „nie ma się wpływu na to, gdzie pojawi się obraz Stats”. Da się to kontrolować. Opisano to na dole tej strony.

Wersja skrócona

W Tag Managerze: Tags → New → Custom HTML, a w pole HTML trafia jeden wiersz:

20157 — krokówdziś3 — pola i wyzwalaczkrok z document.write odpada — skrypt już tego nie używa 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

Wyzwalacz ustawia się na All Pages, po czym kontener zostaje zapisany i opublikowany. W miejsce YOUR-ID wpisuje się numer licznika widoczny na stronie statystyk.

To cała robota – trzy pola i wyzwalacz, tam gdzie w 2015 roku potrzeba było siedmiu kroków. Nie trzeba już niczego zaznaczać przy document.write, ponieważ skrypt już go nie używa.

Co to naprawdę robi i dlaczego może nie być tym, o co chodzi

Skrypt umieszcza licznik bezpośrednio po sobie samym na stronie. Wklejony bezpośrednio we własny kod HTML robi dokładnie to, o co chodzi: licznik pojawia się tam, gdzie wstawiono kod.

Przez Tag Managera jest inaczej, bo o miejscu kodu nie decyduje już autor strony. Decyduje o tym kontener, a ten zwykle siedzi w head dokumentu albo tam, gdzie zainstalowano fragment kontenera. Licznik zostaje więc wstawiony właśnie tam – nie w stopce, nie w panelu bocznym, tylko tam, gdzie akurat Tag Manager wstrzyknął tag.

Dla niewidocznego licznika nie ma to najmniejszego znaczenia, dlatego stary poradnik go zalecał. Wzór 980 nie pokazuje niczego, wzór 981 pokazuje tylko małą ikonę prowadzącą do statystyk. Jeśli to wszystko, o co chodzi, powyższa wersja skrócona wystarczy i dalsza lektura nie jest potrzebna.

Widoczny licznik w konkretnym miejscu wymaga dalszej lektury.

Kontrolowanie, gdzie pojawia się licznik

Skrypt ma drugi tryb, o którym stary poradnik nigdy nie wspominał. Zamiast atrybutu data-id dostaje listę, a elementów placeholder szuka po identyfikatorze (ID).

Krok pierwszy – placeholder na własnej stronie, tam, gdzie ma być licznik. Trafia on do własnego szablonu, a nie do Tag Managera, bo to właśnie Tag Managera staramy się w tej decyzji pominąć:

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

Krok drugi – w Tag Managerze wchodzi poniższy kod zamiast jednowierszowca. Ten sam typ tagu, 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>

Krok trzeci – zmiana wyzwalacza. To jest część, na której ludzie się wykładają. All Pages uruchamia się najwcześniej, jak Tag Manager potrafi, co często następuje zanim placeholder w ogóle zaistnieje w dokumencie. Zamiast niego służy wbudowany wyzwalacz DOM Ready. Licznik musi pojawić się po divie, nie przed nim.

Licznik pojawia się teraz wewnątrz tego diva i nigdzie indziej.

Kontrolowanie, na których stronach się pojawia

Do dyspozycji są dwie niezależne dźwignie i warto zrozumieć każdą z osobna.

Jedną z nich jest placeholder. Rozstrzyga pierwsza linia wewnątrz funkcji: jeśli na stronie nie ma s4u_cp0, funkcja się zatrzymuje i skrypt nawet nie zostaje pobrany. Szablon, który zawiera div, dostaje więc licznik, a ten, który go nie zawiera, nie dostaje – a decyduje o tym własny szablon, bez żadnej zmiany w Tag Managerze i bez publikowania.

Drugą jest wyzwalacz. Decyzja może też zapaść w samym Tag Managerze: wyzwalacz dostaje warunek i uruchamia się na DOM Ready tylko tam, gdzie pasuje Page Path. Ten sposób sprawdza się, gdy reguła dotyczy adresów URL, a placeholder – gdy dotyczy szablonów.

Więcej niż jeden licznik na stronie

Lista przyjmuje ich dowolnie wiele. Pozycja na liście to numer w ID placeholdera:

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

Pierwszy trafia do s4u_cp0, drugi do s4u_cp1. Oba zostały sprawdzone w przeglądarce podczas pisania tego tekstu: pierwszy wyrenderował się jako ikona 20 na 20, drugi jako pasek 162 na 25, każdy wewnątrz swojego własnego placeholdera i nigdzie indziej na stronie.

Cztery rzeczy, które wychodzą bokiem

  • Nigdy obu metod naraz. Jeśli tag ma atrybut data-id i jednocześnie ustawia listę, powstają dwa liczniki, a oba trafienia są liczone osobno.
  • s4ustyleid zawsze ustawiony na liście. Atrybut data-style po cichu przełącza się na wzór 30, gdy go brak. Wersja z listą nie ma takiego zabezpieczenia i zażąda pustego wzoru.
  • Brakujący placeholder zawodzi po cichu. Żadnego licznika, żadnego błędu, nic w konsoli. Jeśli nic się nie pojawia, pierwsze do sprawdzenia jest ID – s4u_cp0, z cyfrą zero, nie literą O.
  • Niewidoczny licznik celowo nie ma odnośnika. Wzór 980 renderuje się bez niego, bo przezroczysty, jednopikselowy obszar klikalny na cudzej stronie to pułapka, a nie funkcja. Odnośnik daje dopiero 981, czyli mała ikona.

Sprawdzanie, czy zadziałało

Tryb Preview w Tag Managerze wczytuje stronę i pokazuje tag wśród uruchomionych dla zdarzenia DOM Ready. Potem przychodzi kolej na stronę statystyk – wizyta przez Preview liczy się tak samo jak każda inna, więc liczba zmienia się w ciągu kilku sekund.

Jeśli tag się uruchamia, ale nic się nie pojawia, winny jest placeholder albo wyzwalacz – w takiej właśnie kolejności prawdopodobieństwa.

Reklama