Śledzenie scrollowania strony w Google Analytics


Ilość ocen: 583 Średnia ocena: 4.86/5
Polecaj to innym: 

W przypadku strony typu "One page" i podstawowej konfiguracji Google Analytics często występuje problem z bardzo dużym współczynnikiem odrzuceń ze względu na brak podstron serwisu otwieranych przez przeładowanie strony. Chcąc lepiej poznać zachowanie użytkowników na stronie bardzo przydatne może być wdrożenie śledzenia scrollowania. Nie jest to jedyne i najlepsze rozwiązanie, ale jedno z prostszych i szybszych do zaimplementowania, które pozwoli nam wyciągać wiele wniosków z zaangażowania użytkowników w naszą stronę.

Na początek warto wspomnieć, że rozwiązanie to można zastosować na każdej stronie - a nie tylko na stronie typu "One page". Śledzenie scrollowania jest również bardzo przydatne na stronach kontentowych - czyli takich, na których mamy dużo angażujących treści - np. blogi.

Moim zdaniem to rozwiązanie jest dużo lepsze i dostarcza nam dużo więcej ciekawych danych niż urealnianie współczynnika odrzuceń poprzez automatyczne uruchamianie zdarzenia po upływie 10 sekund.

Dzięki wdrożeniu scrollowania na stronie uzyskamy dodatkowe informacje takie jak:

  1. jak użytkownicy wchodzą w interakcje z naszymi treściami,
  2. czy nasze treści angażują użytkowników,
  3. urealniony współczynnik odrzuceń,
  4. urealniony czas trwania sesji.

Wpływ na współczynnik odrzuceń

Jak zapewne dobrze wiesz współczynnik odrzuceń to odsetek sesji z tylko jedną interakcją (standardowo odsłoną). Jeśli mamy stronę "One page" to mimo klikania zakładek w menu lub scrollowania strony do Google Analytics nie są przesyłane żadne dane o interakcji użytkownika ze stroną. W związku z tym taka wizyta - o ile użytkownik nie przeładuje strony - nawet jeśli trwała np. 10 minut to w Google Analytics traktowana jest jako wizyta z odrzuceniem, jedną odsłoną i zerowym czasem trwania. A to przecież nieprawda!

Podobnie jest gdy mamy np. bloga z bardzo ciekawymi i angażującymi treściami. Gdy użytkownik trafi na naszą stronę i zainteresuje go artykuł, spędzi na stronie 20 minut, ale nie przejdzie do żadnej innej strony - również w rezultacie do GA zostanie przesłana tylko jedna odsłona, a sesja będzie miała zerowy czas trwania. Znów mamy sesję z odrzuceniem mimo iż ewidentnie odrzucenia nie było!

Dzięki zastosowaniu śledzenia scrolowania gdy użytkownik wejdzie w interakcję z Twoją stroną i ją przewinie do GA zostanie wysłane zdarzenie, które będzie miało wpływ na współczynnik odrzuceń. W takiej sytuacji sesja użytkownika - nawet jeśli nie przejdzie do kolejnej podstrony - nie będzie policzona jako odrzucenie.

Wpływ na średni czas trwania sesji

Ponieważ czas trwania sesji w Google Analytics liczony jest od pierwszej do ostatniej interakcji użytkownika na stronie dlatego w przypadku standardowej implementacji kodu Google Analytics czas podawany w raportach jest zawsze niedokładny, gdyż nie uwzględnia czasu, jaki użytkownik spędził na ostatniej stronie zaraz przed wyjściem. 

Czasem ta ostatnia strona jest jedyną stroną jaką odwiedza użytkownik (np. dla stron "One page" lub wpisów na blogu) i wóczas mamy zerowy czas trwania sesji.

Dzięki zastosowaniu śledzenia scrollowania możemy tą wartość skorygować, gdyż scrolowanie strony prześle do GA zdarzenie, które zostanie uwzględnione przy obliczaniu czasu spędzonego na stronie.

Pamiętaj o limitach danych w GA

Ponieważ w Google Analytics istnieją pewne limity przesyłanych danych warto o nich wspomnieć, ponieważ przy każdej odsłonie i pełnym przewinięciu strony do GA zostaje wysyłanych aż 5 dodatkowych hitów.

W związku z tym warto pamiętać, że podczas jednej sesji jednego użytkownika może zostać przesłanych do GA maksymalnie 500 hitów. Hitem jest między innymi każda odsłona strony i każde zdarzenie w związku z tym jeśli śledzisz bardzo dużo różnych czynności wykonywanych przez użytkownika i istnieje ryzyko osiągnięcia limitu choćby przez część użytkowników warto dobrze przemyśleć kwestię wdrożenia śledzenia scrollowania.

Wymagania

Poniższe rozwiązanie wymaga użycia na stronie biblioteki jQuery i korzystania z wersji kodu Universal Analytics. Dotyczy implementacji bezpośrednio na stronie. Niemniej jeżeli korzystasz z Menedżera Tagów Google lub używasz kodu w wersji klasycznej pokazany kod możesz łatwo przerobić.

Gotowy kod do wklejenia na stronę

To jest ta część, która zapewne Ciebie najbardziej interesuje, ale mam nadzieję, że to co było napisane wcześniej również przeczytasz :)

Jeżeli na Twojej stronie znajduje się już biblioteka jQuery pierwszą linię poniższego kodu możesz pominąć.

Kod należy wstawić w części <head> strony za kodem Google Analytics.

Jeśli kod Google Analytics na Twojej stronie nie znajduje się w sekcji <head> strony koniecznie go tam przenieś.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
(function(){

  function sendScrollEvent(p){
    //console.log("Poziom scrollowania: "+p+"%");
    ga("send","event","User interaction","Page scroll","Depth:"+p+"%");
  }
  try{
    var p25=0,p50=0,p75=0,p100=0;
    var d = jQuery(document);
    var w = jQuery(window);
    w.on('scroll', function(){
      var p = parseInt(100 * d.scrollTop() / (d.height() - w.height()));
      if(p>=25 && p25==0){
        p25=1;
        sendScrollEvent(25);
      }
      if(p>=50 && p50==0){
        p50=1;
        sendScrollEvent(50);
      }
      if(p>=75 && p75==0){
        p75=1;
        sendScrollEvent(75);
      }
      if(p>=99 && p100==0){
        p100=1;
        sendScrollEvent(100);
      }
    });
  }
  catch(e){
    console.error("Wystąpił błąd: "+e.message);
  }
}());
</script>

Jak to działa?

Powyższy kod wyśle do Google Analytics zdarzenia, jeśli użytkownik przewinie stronę do 25, 50, 75 i 100%. Zrobi to tylko raz na danej podstronie. Dzięki temu jeśli użytkownik będzie wielokrotnie scrollować jedną stronę w górę i w dół każdy poziom zagłębienia prześle się tylko raz.

Zdarzenie zostanie umieszczone w kategorii "User interaction" z akcją "Page scroll" i etykietą odpowiadającą poziomowi scrollowania. 

Alternatywnie możemy wysłać zaraz po wysłaniu odsłony zdarzenie, które będzie odpowiadało zainicjowaniu wyświetlenia - użyjemy go następnie przy tworzeniu raportu.

ga("send","event","Tracking","Page scroll","Depth: 0%",{"nonInteraction": 1});

Dla zdarzenia tego ustawiamy dodatkowy parametr nonInteraction na wartość 1 informując Google Analytics, że zdarzenie to nie jest związane z interakcją użytkownika i nie ma mieć wpływu na współczynnik odrzuceń. Dzięki temu dopiero gdy użytkownik zacznie scrollować naszą stronę i dojdzie przynajmniej do 25% wówczas wyśle się do GA pierwsze zdarzenie, który spowoduje, że sesja użytkownika zostanie potraktowana jak sesja bez odrzucenia.

Powyższą dodatkową linię kodu należy wstawić bezpośrednio za kodem przesyłającym odsłonę, czyli za linią:

ga("send","pageview");

Przygotowanie raportu

Jeżeli zaczniemy zbierać dane dobrze jest zrobić z nich użytek. W tym celu należy przygotować odpowiedni raport, który przedstawi nam poziom scrollowania strony dla poszczególnych podstron naszego serwisu.

Poniżej opisuję poszczególne kroki jak należy przygotować raport.

  • przejdź na kartę Raportowanie i wybierz raport Zachowanie > Zdarzenia > Strony zdarzeń,
  • wybierz zakres dat np. Ostatnich 7 dni,
  • przełącz sposób wyświetlania danych na Tabela przestawna,
  • w polu "Tabela przestawna według:" wybierz "Etykieta zdarzenia", a główne dane Całkowita liczba zdarzeń

  • utwórz zaawansowany filtr Uwzględnij Etykieta zdarzenia Dopasowanie do wyrażenia regularnego Depth:(0|25|50|75|100)\%

  • na koniec utwórz skrót do raportu, by nie tworzyć go za każdy razem od nowa. Po utworzeniu skrótu będziemy mieli szybki dostęp do wstępnie zdefiniowanego raportu po przejściu na kartę "Skróty".

Jak wdrożyć śledzenie scrollowania za pomocą Menedżera Tagów Google?

Wykorzystujemy dokładnie ten sam kod, co przedstawiony wcześniej we wpisie i robimy jedną drobną modyfikację - zamieniamy poniższą linijkę kodu:

ga("send","event","User interaction","Page scroll","Depth:"+p+"%");

na następującą:

dataLayer.push({"event":"pageScroll", "eventLabel": p});

a następnie:

  1. tworzymy w GTM regułę uruchamianą niestandardowym zdarzeniem "pageScroll",
  2. tworzymy nową zmienną warstwy danych "eventLabel",
  3. tworzymy tag Google Analytics przesyłający zdarzenia do GA z kategorią "User interaction", akcją "Scroll" i etykietą Depth:{{eventLabel}}%

Cały kod można wstawić bezpośrednio na stronie lub za pomocą niestandardowego tagu HTML w GTM.

Gdy coś pójdzie nie tak...

To czy kod działa prawidłowo można szybko sprawdzić w raportowaniu na żywo na karcie Zdarzenia. Jeśli mimo scrollowania stron nie będziemy widzieć pojawiających się zdarzeń oznacza to, że coś jest nie tak.

Wówczas należy zajrzeć do konsoli javascript (w przeglądarce Chrome kombinacja klawiszy ctrl + shift + i) i zobaczyć czy w konsoli nie pojawiają się błędy.

Możemy dodatkowo odkomentować linijkę:

console.log("Poziom scrollowania: "+p+"%");

by sprawdzić, czy podczas scrollowania jest poprawnie wykrywany poziom scrollowania. Wóczas w konsoli powinna pojawić się informacja np.:

Poziom scrollowania: 25%

Jeżeli będziecie mieć problemy z wdrożeniem piszcie w komentarzach do wpisu - postaram się pomóc :)

UPDATE (gtag.js)

Jeżeli na stronie korzystasz z biblioteki gtag.js wówczas składnia kodu dla przesyłania zdarzenia będzie wyglądać nieco inaczej i zamiast standardowego kodu:

ga("send","event","User interaction","Page scroll","Depth:"+p+"%");

musisz użyć kodu odpowiedniego dla biblioteki gtag.js:

gtag("event", "Page scroll", {"event_category": "User interaction","event_label": "Depth:"+p+"%"});

Opublikowane przez:

O autorze

Tomasz Ciepłucha

Cześć, nazywam się Tomasz Ciepłucha i jestem Certyfikowanym specjalistą Google Ads i Analytics oraz ekspertem na forum reklamodawców Google.

Jeżeli szukasz pomocy w zakresie prowadzenia kampanii reklamowych Google Ads, konfiguracji lub wdrożenia Google Analytics oraz wdrożeń z zakresu GTM (Menedżera Tagów Google) to zapraszam do kontaktu ze mną!

Google+ Dodaj mnie do kręgów na Google+

YouTube Zasubskrybuj mój kanał na YouTube!

Lista komentarzy

Orzech
Witam, zmieniłem "ga" na "gtag" i w konsoli widzę, np: Poziom scrollowania: 25% natomiast w GA nie wykonują się żadne zdarzenia w czasie rzeczywistym. Uprzejmie proszę o wskazówki :-) Pozdrawiam,
Tomek
Na stronie używasz biblioteki gtag.js, a powyższy kod został napisany pod bibliotekę analytics.js.
Nie wystarczy w kodzie podmienić funkcję ga na gtag :)
Zrobiłem w artykule na samym końcu UPDATE, w którym podaję, jak powinien wyglądać kod dla gtag.js
Orzech
Tomek, dziękuję. Nie wiem jeszcze z jakiego powodu odkomentowana definicja w konsoli Chrome nie za każdym razem pokazuje komentarz poziomu scrollowania przy przewijaniu strony ale w GA w czasie rzeczywistym pojawiło się zdarzenie więc jutro sprawdzę dzień dzisiejszy. Dziękuję. Będę śledził Twoją stronę. Pzdr :-)

Twoja opinia jest dla nas cenna!