Home Blog Śledzenie przewijania głębokości strony poprzez Google Tag Manager – Poradnik

Śledzenie przewijania głębokości strony poprzez Google Tag Manager – Poradnik

Mateusz Kochman

Czas czytania : 5 min

08 września 2020

Analityka PPC

Z tego artykułu dowiesz się:

Jak zbierać dane związane z głębokością przewijania strony oraz czasem w Twojej witrynie?
Jak wdrożyć tag na swojej stronie poprzez gotowe reguły dostępne w Google Tag Managerze?
Jak wdrożyć niestandardowe rozwiązanie śledzące przewijanie głębokości strony?

Posiadając stronę internetową, zależy nam na najdokładniejszym zebraniu informacji, danych odnośnie ruchu jaki powstaje poprzez wejścia użytkowników na stronę. Prowadząc różne serwisy internetowe, typu blog, portal informacyjny, forum, jedną z ciekawszych danych do analizy ruchu na stronie jest możliwość sprawdzenia, jak użytkownicy zachowują się na stronie. Jednak przy blogu czy stronie typu one page nie zawsze jest to tak proste. Jeśli nie wykona on żadnej akcji, to nawet jeśli spędzi na niej pół godziny czytając artykuł, Google Analytics pokaże 0 sekund spędzonych na stronie i 100% współczynnik odrzuceń. Na szczęście jest na to rozwiązanie.

Głębokość przewijania strony, a czas spędzony na stronie

Chcąc mierzyć efektywnie głębokość przewijania strony, powinniśmy mieć pewność, że użytkownik nie przewinął jej w ekspresowym tempie. Załóżmy, że chcielibyśmy uzyskiwać dane od takich użytkowników, którzy przewinęli stronę do pewnej głębokości, ale spędzili nad tym określony czas.

Dla przykładu: użytkownik przewinął do głębokości strony wynoszącej 75%, w czasie nie krótszym niż 30 sekund. Inaczej mówiąc, zdarzenie to będzie spełnione, jeśli użytkownik po wejściu na stronę, przewinie ją do 75%, ale nie przed upływem 30 sekund.

Aby wykonać taką implementację tagu, posłużymy się gotową regułą, jaką oferuje nam Google Tag Manager:

1.Tworzymy nowy tag.

Jako typ tagu wybieramy “Google Analytics – Universal Analytics”.
“Typ śledzenia” wybieramy z listy Zdarzenie.
Określamy “Parametry śledzenia zdarzeń”.
Kategoria – możemy podać nazwę związaną z rodzajem zdarzenia.
Działanie – określić nazwę związaną z działaniem zdarzenia.
Wybieramy z listy, bądź też tworzymy nową zmienną Google Analytics.

2. Tworzymy regułę.

Poniżej w obszarze “Reguły” klikamy “Wybierz regułę, aby ten tag był uruchamiany…”.
Klikamy w niebieski “+” po prawej stronie u góry.
Następnie klikamy “Skonfiguruj regułę”, z listy wybieramy “Grupa wyzwalaczy”.

W pozycji “Triggers” wybieramy wyzwalacze.
Przechodzimy do “Choose a trigger”.
Klikamy w niebieski “+”.
Wybieramy z listy po prawej stronie “Głębokość przewijania”.

3. Przechodzimy do konfiguracji reguły Głębokości przewijania.

Zaznaczamy Głębokość przewijania w pionie.
Podajemy wartość obszaru głębokości przewijania strony w % lub w pikselach – można podać jedną lub kilka wartości, rozdzielając je przecinkami.
Ustal działanie reguły, : zdarzenie „Container Load (gtm.js)” od razu podczas wczytywania strony; zdarzenie „DOM Ready (gtm.dom)”, kiedy DOM jest gotowy; zdarzenie „Window Load (gtm.load)”, kiedy wszystkie elementy strony zostaną załadowane.

Aby nasza reguła była ograniczona i spełniała tylko wybrane przez nas warunki np. aby zdarzenie było wykorzystywane tylko na stronie “/blog/”, powinniśmy uruchomić regułę “Niektóre strony”.

W “Uruchom tę regułę, gdy nastąpi zdarzenie i wszystkie te warunki zostaną spełnione” wybieramy począwszy od lewej strony z listy zmienną “Page URL”. Wybieramy potrzebny operator – jeśli np. artykuły na naszym blogu zawarte są na ścieżce /blog/ możemy wybrać operator “zawiera”, wtedy zdarzenie będzie uruchamiane na wszystkich stronach, które w linku strony zawierają “/blog/”.

4. Przechodzimy do konfiguracji reguły Minutnik.

Dodajemy regułę, która dotyczy czasu zdarzenia (reguła licznika czasu).
Z listy reguł wybieramy “Minutnik”.
Nazwa zdarzenia – Jako nazwę zdarzenia pozostawiamy domyślną wartość “gtm.timer”. Wartość ta określa nazwę zdarzenia, która jest przydzielana do Warstwy danych Tag Managera.
Przerwa – Określamy długość przerwy. Przerwa jest to czas jaki ma upłynąć pomiędzy każdym wywołaniem zdarzenia. W naszym przypadku jest to czas, jaki ma upłynąć do momentu zescrollowania strony przez użytkownika do 75%. Przerwa określana jest w milisekundach (np. 30000 ms = 30 s).
Limit – Jako Limit przyjmujemy maksymalną liczbę wywołań zdarzenia.

Możemy tak jak w poprzedniej regule “głębokości”, ustawić także warunek, przy którym reguła zostanie spełniona. W tym przypadku w “Włącz tę regułę, gdy wszystkie te warunki są spełnione” wybieramy począwszy od lewej strony: zmienną “Page URL”, operator “zawiera” i jako wartość podajemy fragment ścieżki strony np. “/blog/”.

4. Sprawdzenie poprawności działania.

Aby sprawdzić poprawność zaimplementowanego tagu, w obszarze roboczym Google Tag Manager klikamy “Prześlij”, aby zmiany mogły być opublikowane.
Po opublikowaniu zmian, przechodzimy w “Podgląd”, a następnie klikamy w pomarańczowy przycisk “Odśwież”.
W nowej karcie wchodzimy na naszą stronę i w podglądzie Tag Managera, po spełnionym warunku, zdarzenie uruchomi się w “Tags Fired”.

Niestandardowa implementacja kodu śledzącego poprzez wtyczkę CU – Scroll Tracking – wtyczka LunaMetrics

Dowiedzieliśmy się już, jak dodać głębokość przewijania strony oraz zliczanie czasu, przy pomocy gotowych reguł.
W Google Tag Managerze oprócz wykorzystania gotowych rozwiązań implementacyjnych w postaci reguł rozróżniamy także skrypty niestandardowe. Przy pomocy takich niestandardowych skryptów możemy wdrożyć własny kod, który będzie śledził poczynania użytkowników na stronie.

Przyjrzyjmy się implementacji niestandardowego kodu śledzącego głębokość przewijania strony poprzez wtyczkę CU – Scroll Tracking – wtyczka LunaMetrics.

Plik z gotowym kontenerem możemy pobrać ze strony:
https://www.bounteous.com/insights/2017/09/27/scroll-tracking-recipe-gtm/?ns=l

Przy pomocy tego kodu, domyślnie śledzimy głębokość przewijania strony przez użytkownika dla: 10%, 25%, 50%, 75%, 90% oraz 100%.
Możemy także zmodyfikować te wartości, aby móc śledzić inne % głębokości przewijania.

1. Import kontenera

Pobrany plik importujemy w panelu Google Tag Managera.
Administracja -> kolumna “Kontener” -> “Import kontenerów”

Klikamy w “Wybierz plik kontenera”
Wybieramy obszar roboczy jako “Istniejąca”.
Opcję importowania zaznaczamy jako “Scal”, a następnie “Zmień nazwy sprzecznych tagów, reguł i zmiennych.”
Na końcu zatwierdzamy zmiany przyciskiem “Potwierdź”.

2. Ustawienie Identyfikatoru śledzenia Google Analytics.

Przechodzimy do obszaru roboczego, w zakładkę “Tagi”.
Wyszukujemy tag o nazwie “GA – Event – Scroll Tracking” i przechodzimy do niego.
Z poziomu konfiguracji tagu musimy wybrać opcję “Włącz zastępowanie ustawień w tym tagu”. Z Google Analytics kopiujemy identyfikator śledzenia w formacie: UA-XXXXXXXX-X i wklejamy do pola “Identyfikator śledzenia”.

3. Konfiguracja reguły.

W regule GA – Event – Scroll Tracking, pod Konfiguracją tagu przechodzimy do Reguł.

W obszarze “Ta reguła uruchamia się, gdy jest spełniony warunek” możemy wybrać, czy reguła ma być uruchamiana np. w całej witrynie, czy tylko na wybranych stronach.
Po wybraniu opcji “Wszystkie zdarzenia niestandardowe” reguła uruchomi się zgodnie z naszym zaimplementowanym tagiem w całej witrynie.
Jeśli chcemy, aby reguła była uruchomiona tylko na wybranej przez nas stronie: w pierwszym polu od od lewej z listą zmiennych wybieramy Page URL, następnie w środkowym boxie wybieramy operator “zawiera” i na końcu podajemy wartość pełnej ścieżki, bądź też fragment ścieżki adresu URL, z której to chcemy zliczać zdarzenia.
Klikamy “Zapisz”.

4. Sprawdzenie poprawności działania.

Aby sprawdzić poprawność zaimplementowanego tagu, w obszarze roboczym Google Tag Manager klikamy “Prześlij”, aby zmiany mogły być opublikowane.
Po opublikowaniu zmian, przechodzimy w “Podgląd”, a następnie klikamy w pomarańczowy przycisk “Odśwież”.

Możemy przejść do strony docelowej i powoli przewijać stronę. W podglądzie Google Tag Managera widzimy nowe pojawiające się zdarzenia głębokości strony.

Zdarzenia te, możemy zauważyć także w Google Analytics.

W tym celu przechodzimy do odpowiedniego konta Analyticsa, wybieramy usługę oraz widok, które dotyczą witryny, na której zaimplementowaliśmy kod związany ze śledzeniem przewijania głębokości strony.
Otwieramy Panel “Raporty” – lewa zakładka. Wybieramy kolejno Czas rzeczywisty -> Zdarzenia.
Podczas naszej ingerencji scrollowania strony zdarzenia będą kolejno wyświetlane.

Mając zaimplementowany na stronie Tag śledzący głębokość, będziemy mogli określić, do jakiego położenia pionowego doszedł użytkownik, podczas przeglądania strony. Będziemy mogli przez to stwierdzić, jaka liczba osób schodzi na sam dół strony, a ile użytkowników nie przekracza choćby 50% całości strony.

Dobrym pomysłem będzie także implementacja tagu śledzącego przewijania głębokości wraz z minimalnym czasem określającym warunek minimalnego pobytu na stronie przez użytkownika. Dzięki temu będziemy mogli mierzyć nie tylko ilość użytkowników przewijających określone głębokości stron, ale także takich użytkowników, którzy pozostają na stronie w zakładanym przez nas czasie.

Źródła:
https://www.bounteous.com/insights/2017/09/27/scroll-tracking-recipe-gtm/?ns=l