Od autora
Analityka e-marketing projektowanie
Listopad 03 2014

One page tracking (Google Analytics)

Mierzenie zachowań użytkowników na witrynach opierających się na jednej stronie, to często nie lada problem. Odnotowanie wizyty czy jej czasu nie daje pełnego obrazu do jakich sekcji dotarł użytkownik i czy strona go faktycznie zainteresowała. Badanie skuteczności opierającej się tylko na podstawowych parametrach (np. pageview) niestety mija się celem. Pomocny może być tu prosty JavaScript, który wspomoże analizę przeglądania strony i przesyłanie odpowiednich danych do naszego konta Google Analytics.

Do monitorowania odwiedzin poszczególnych sekcji na stronie polecam wykorzystanie zdarzeń. W odróżnieniu do wywoływań sztucznych odsłon nie zaburzą one ilości sesji oraz wskaźnika odwiedzin. Znając strukturę sekcji strony przy pomocy narzędzie developerskich w przeglądarce można prosto zlokalizować dokładne zakresy poszczególnych sekcji. Można także użyć do tego także prostego skryptu, który zwraca aktualną pozycję (oś y), na której się znajdujemy. Wartość zobaczymy w konsoli (F12):

(function () {

		window.onscroll = function (event) {

			console.log( document.body.scrollTop );

		};

}) ();
W celu odpowiedniego mierzenia należy znać poszczególne zakresy (od-do) sekcji witryny. W momencie gdy użytkownik znajdzie się w jej obrębie zostanie odnotowane zdarzenie. Warto jednak podkreślić, że prosta instrukcja warunkowa ("jeżeli pozycja użytkownika > X i pozycja < Y to odnotuj zdarzenie") niestety tutaj się nie sprawdzi. Użytkownik przewijając stronę w obrębie sekcji nadal będzie spełniał taki warunek i tym samym wywoła zdarzenie kilka razy. O ile statystykę ratować będzie unikalna wartość zdarzeń, to szkoda psuć raport o niepotrzebne wartości globalne. Aby uniknąć tej sytuacji skrypt musi zapamiętywać, czy użytkownik jest w obrębie danej sekcji i poruszanie się w jej zakresie nie oznacza ponownego wywołania odpowiadającego zdarzenia. W moim przykładzie rolę “zapamiętywacza” spełnia zmienna status, której wartość jest nadpisywana w zależności od sekcji. Warunek przyjmuje wtedy formę: "jeżeli pozycja użytkownika > X i pozycja < Y i status nie jest równy statusowi aktualnej sekcji, to odnotuj zdarzenie i ustaw nowy status":
Uwaga! Podane funkcje zdarzeń dotyczą najnowszej wersji GA (Analytics.js). Więcej informacji »
(function () {

	var status = 0; // status sekcji

	window.onscroll = function (event) {

		var scrollPosition = document.body.scrollTop; // aktualna pozycja
		
		// console.log( scrollPosition );
		
		if( scrollPosition > 0 && scrollPosition < 500 && status != 1 ) {
		
			status = 1;

			console.log( "Sekcja: 1, status: "+status );
			
			ga('send', 'event', 'Section #1');
		
		} 
		
		if( scrollPosition > 500 && status != 2 ) {
		
			status = 2;
			
			console.log( "Sekcja: 2, status: "+status );
			
			ga('send', 'event', 'Section #2');
		
		}
		
	};

}) ();
Powyższy przykład pokazuję wywołanie zdarzeń dla dwóch sekcji w pozycjach 0 - 500 px oraz sekcji > 500 px.

Przykład na żywo (3 sekcje, status oraz nazwa widoczna w konsoli przeglądarki) - scroll-ga-demo.html

analyticseventszdarzeniaonepagejavascript
Podziel się! :-)