Nowe funkcjonalności w Google Tag Manager – dlaczego warto je znać?

Nowe funkcjonalności w Google Tag Manager – dlaczego warto je znać?
5 (100%) 4 votes

Mniej więcej 25 lat temu powstała pierwsza strona internetowa. Dwadzieścia lat później, a chcąc być bardziej precyzyjnym, w roku 2012, Google pokazał nam Google Tag Managera. W narzędziu, które od kilku lat niezmiernie ułatwia wdrażanie rozwiązań analitycznych, niedawno, internetowy gigant wprowadził dwie nowe funkcje. Są nimi Reguły (ang. triggers).

Na wstępie warto zaznaczyć, że nowa funkcjonalność Google Tag Menegera dzieli się na dwa moduły, odpowiadające za:

  • Głębokość przewijania (ang. scroll depth),
  • Widoczność elementu (ang. element visibility).

Z perspektywy poruszanego zagadnienia, to właśnie druga reguła jest szczególnie warta uwagi. Wprowadza szereg dodatkowych możliwości pomiaru zaangażowania użytkowników na stronie. Ta funkcja może być powodem, dla którego przestudiujesz swój plan mierzenia ruchu internetowego na nowo.

Poniższy artykuł powinien okazać się szczególny interesujący o ile chcesz:

  • Mierzyć wyświetlenia pojedynczego elementu na stronie, np. przycisku call-to-action,
  • Sprawdzać czy użytkownik wyświetlił okienka pop-up,
  • Zbierać liczbę użytkowników, którzy wyświetlili co najmniej x% Twojej strony,

Nie bazuj tylko na wyświetleniach (ang. pageviews)

Podstawową miarą ruchu w witrynie internetowej jest ilość jej wyświetleń. Jest to zazwyczaj punkt wyjścia dla dalszych analiz. Niestety, ta bazowa metryka nie mówi nam wiele o zaangażowaniu użytkowników. Podajmy prosty przykład:

  • W ostatnim tygodniu odnotowaliśmy 1000 wyświetleń strony głównej bloga K2,
  • Średni czas spędzony na stronie głównej to 1 minuta.

Te dane obrazują wielkość ruchu na stronie. Nie wiemy natomiast nic o tym, czy treść naszej witryny jest wystarczająco angażująca. Wysoki czas wyświetlenia strony głównej jest zwodniczą miarą, ponieważ użytkownik może wejść na naszą stronę w przeglądarce, nie przejrzeć ani jednej informacji tam zawartej i zostawić ją jako otwartą kartę na kilka następnych minut. Czas jest nadal mierzony.

Z pomocą przychodzą nam wcześniej wspomniane nowe Reguły w GTM’ie, dzięki którym, w dalszej części tego artykułu, stworzymy odpowiednie Zdarzenia w Google Analytics (ang. events). Jednak, zanim przejdziemy do samej konfiguracji tych Reguł, przypomnijmy jeszcze pojęcie widocznego obszaru strony w przeglądarce (ang.viewport).

Czym jest vieport?

Jest niczym innym jak częścią strony, która wyświetlana jest w przeglądarce w danym momencie. Dlaczego jest tak ważny? Spójrzmy na przykład bloga K2

Cała strona główna:

Wyświetlany obszar na desktopie:

Nie wyświetlamy całych stron na swoich urządzeniach. Wniosek jest trywialny, ale jakże istotny dla analizy zachowań użytkowników na stronie. To, że użytkownik odwiedził witrynę, nie znaczy, że przewinął ją w dół i przeczytał informację, którą chcemy mu przekazać. Nie wszystko przecież możemy umieścić naraz w viewport’cie, chyba, że nie mamy zastrzeżeń do poniższej strony.

Zmieńmy tym samym nasze podejście do miary pageviews i wdróżmy rozwiązania, które umożliwią precyzyjny pomiar zachowania użytkowników.

Reguła – Głębokość przewijania

Reguła ta pozwala na uruchomienie tagów w zależności od obszaru witryny, którą użytkownik widział przewijając stronę. Funkcja uwzględnia dwie osie przewijania:

  • Pionową,
  • Poziomą.

Dodatkowo Reguła pozwala mierzyć wartości względne w x% jak i bezwzględne w x pikselach.

Powyżej skonfigurowana Reguła pozwoli włączyć tag, gdy użytkownik przewinie 50% lub więcej naszej strony. Można wpisać naraz wiele wartości po przecinku, np. 25, 50, 75. Dzięki temu, Reguła zadziała przy przekroczeniu każdej z tych wartości.

W kolejnym kroku możemy ustawić by Reguła działała tylko na wybranych przez nas stronach (przycisk Niektóre strony). Niech naszą docelową stroną dla tej Reguły będzie wpis o heatmapach na blogu K2. Podsumowując, poniższa Reguła włączy tag, gdy użytkownik przewinie 50% lub więcej witryny. Heatmapy to również rozwiązanie służące do precyzyjnego pomiaru zachowania użytkowników na stronie.

Razem z tą Regułą w Google Tag Managerze pojawiły się 3 nowe wbudowane zmienne:

  • Scroll Depth Threshold – wartość głębokości, którą podaliśmy w konfiguracji Reguły,
  • Scroll Depth Units – miarę, jaką wybraliśmy w konfiguracji (% lub piksele),
  • Scroll Direction – oś przewijania.

Zmienne te należy najpierw włączyć w GTMie. W zakładce Zmienne wciśnij Skonfiguruj i odhacz odpowiednie pozycje.

Co nam umożliwią te zmienne? Automatyczne posługiwanie się nimi w narzędziu GTM (np. przy tworzeniu tagów Niestandardowy kod HTML) i przekazywanie ich wartości do Google Analytics. Rozwińmy tę myśl na przykładzie.

Stworzyliśmy Regułę. Przejdźmy teraz do zakładki Tagi. Konfigurujemy nowy tag Google Analytics (Universal Analytics) dla zdarzenia.

Kategorię zdarzenia ustawiamy jako ‘Głębokość przewijania’. Działanie w tym przypadku to będzie strona w naszym serwisie na którym mierzymy to zdarzenie (wbudowana zmienna {{Page Path}}), a etykieta to wartość części przewiniętej strony w %. Tu właśnie wykorzystujemy wbudowaną zmienną, którą wcześniej włączyliśmy {{Scroll Depth Threshold}}.

Następnie wybieramy wcześniej stworzoną Regułę, która ma włączać nasz tag.

Podsumowując:

  • Stworzyliśmy Regułę, która włącza się przy przekroczeniu progu 50% głębokości w pionie strony z artykułem o heatmapach,
  • Włączyliśmy wbudowane zmienne, żeby przekazywać odpowiednie wartości do Google Analytics,
  • Stworzyliśmy tag, który wyśle do Google Analytics informację o zaistniałym zdarzeniu.

W Google Analytics będziemy mogli zobaczyć ilość zdarzeń takich, że użytkownik w witrynie z wpisem na bloga przewinął stronę o więcej niż 50%. Będziemy w stanie wnioskować, czy artykuł jest ciekawy a użytkownicy czytają go przynajmniej do połowy, czy może są zniechęceni już po pierwszym akapicie. Same  pageviews nie dostarczyłyby nam takich informacji.

Reguła Głębokości przewijania wyposażyła narzędzie GTM w funkcjonalność możliwą do osiągnięcia już wcześniej przez różne wtyczki. Prawdziwą rewolucją jest to co dopiero przestudiujemy – Reguła Widoczności elementu.

Reguła – Widoczność elementu

Reguła ta pozwala na włączenie tagu, gdy wybrany w niej element strony jest widoczny na wyświetlanym obszarze witryny (wspomniany wyżej viewport). Tymi elementami mogą być formularze, zdjęcia, przyciski, dokładnie wszystko co jesteśmy w stanie wyznaczyć w jej ustawieniach. Można powiedzieć, że jest to bardzo mocno rozbudowany konspekt poprzednio opisanej Reguły. Przejdźmy więc do sposobów jej konfiguracji.

Konfiguracja reguły dzieli się na 3 obszary:

  1. Metoda wyboru,
  2. Kiedy uruchomić regułę,
  3. Zaawansowane

Metoda wyboru

W Metodzie wyboru zaznaczamy w jaki sposób wybieramy element na stronie. Mamy dwie możliwości:

  • Identyfikator – jest to atrybut elementów HTML, którego wartość musi być unikalna w całym dokumencie HTML. Jest on jednocześnie selektorem CSS,
  • Selektor arkusza CSS – mogą to być jednocześnie połączone rodzaje elementów HTML i ich atrybuty (element[atrybut] np. a[href=http://k2search.pl/]).

Dla rozszerzenia wiedzy z obszaru selektorów CSS polecam przejrzeć stronę w3schools.com.

Przejdźmy do przykładu. Na naszym blogu K2 w zakładce kontakt na końcu formularza znajduje się przycisk wyślij. Nie jest on widoczny w viewport bez przewinięcia witryny.

W dokumencie HTML ten element to:  <input type=”submit” value=”Wyślij” class=”wpcf7-form-control wpcf7-submit”>. Jego selektorem CSS będzie: input[value=”Wyślij”]. Można użyć wielu selektorów dla jednej Reguły oddzielając je przecinkami. Należy jednak mieć na uwadze, że poszczególne selektory mogą odnosić się do wielu elementów na stronie. Dla elementów unikalnych zalecam używanie atrybutu id.

Kiedy uruchomić regułę

Reguła Widoczność elementu może działać w różny sposób dla wypisanych wcześniej elementów. Obecnie GTM udostępnia 3 opcje  konfiguracji:

  • Raz na stronę – Reguła zadziała tylko raz, jeśli chociaż jeden z wpisanych selektorów (po przecinku) pojawi się w viewport. Warto stosować w przypadku kiedy na stronie wypisane elementy umieszczone są różnych miejscach, a nam wystarczy mierzyć czy użytkownik wyświetlił chociaż jeden z nich,
  • Raz na element – Reguła zadziała dla każdego z wpisanych elementów (po przecinku), jednak jeśli jeden wpisany selektor odnosi się do większej ilości elementów na stronie to zostanie uwzględnione tylko jedno wyświetlenie. Warto stosować zamiast tworzenia wielu Reguł dla każdego z selektorów. Wpisujemy je po przecinku, a Reguła zadziała dla każdego z nich osobno,
  • Za każdym razem gdy element wyświetla się na ekranie – jak sama nazwa wskazuje

W naszym przykładzie używamy jednego selektora i wystarczy nam zmierzenie wyświetlenia danego elementu chociaż raz na stronie. Wybieramy opcję pierwszą.

Zaawansowane

Minimalny widoczny odsetek – przydaje się w sytuacji gdy element, którego wyświetlenie chcemy zmierzyć jest duży, a zależy nam na wyświetleniu jego całego.

Ustaw minimalny czas wyświetlenia na ekranie – działa zgodnie ze swoją nazwą. Weź pod uwagę, że czas jest kumulowany. Co znaczy, że gdy ustawisz tę zmienna na 10 sekund, a użytkownik wyświetli element pierwszy raz przez 5 sekund, przewinie stronę, przewinie ponownie na element i wyświetli go przez kolejne 5 sekund to Reguła zadziała.

Obserwuj zmiany DOM – jeśli selektor, który wpisaliśmy odnosi się do elementu, którego nie wyświetla się przy pierwszym załadowaniu strony zaznacz tę opcję! Ta konfiguracja umożliwi Ci śledzić wyświetlanie elementów pojawiąjących się dynamicznie, na przykład pop-upów.

Nasz przykład nie jest wymagający i poniższa konfiguracja Reguły w zupełności spełnia nasze oczekiwania:

Wraz z tą Regułą, w Google Tag Managerze pojawiły się nowe wbudowane zmienne:

  • Percent Visible – minimalny widoczny odsetek elementu podany w konfiguracji,
  • On-Screen Duration – minimalny czas wyświetlania na ekranie.

Działają analogicznie do zmiennych dla pierwszej Reguły. Na koniec skonfigurujmy tag Universal Analytics, który wyśle zdarzenie do Google Analytics:

Ciągle poszerzaj swój analityczny arsenał!

Wyżej opisane reguły sprawują się doskonale na ‘głębokich’ stronach z dużą ilością informacji. Często na responsywnych witrynach internetowych położenie elementów, na stronach wyświetlanych na małych ekranach, jest istotnie różne od tych wyświetlanych na desktopach. Z tego powodu odradzam używania Reguły – Głębokość przewijania w celu mierzenia, czy dany element na stronie został wyświetlony (przycisk ‘Wyślij’ który na desktopie jest na głębokości 50% strony internetowej, na urządzeniach mobile może znajdować się niżej, np. na 75% głębokości).

Rozwiązania przedstawione w tym artykule, to tylko niektóre narzędzia dla precyzyjnej analizy zachowania użytkowników na stronie. Jeśli chcesz jeszcze bardziej rozbudować swój analityczny arsenał, zapraszam do lektury innych wpisów na blogu!

Jakub Bartosiewicz on Linkedin
Jakub Bartosiewicz
Junior Web Analyst w K2 Media S.A.

Ambiwertyk od urodzenia, racjonalny pesymista z wykształcenia. Odnalazł się w digitalowym świecie gdzie marketing pisany jest przez duże T-echnologia. Zawodowo lubi ciasteczka i wiele pixeli. W K2 zajmuje się analizą ruchu webowego i optymalizacją konwersji. Po godzinach skacze do kosza, skacze na desce i skacze do basenu :)