Pobieranie informacji o „prawdziwej” rozdzielczości ekranu

Prawdziwej, w cudzysłowie, ponieważ chodzi nie o rozdzielczość ekranu, ale o to, jaki fragment naszej strony jest realnie widziany w przeglądarce. No bo przecież oprócz tego, że mamy pasek systemowy, to w przeglądarce dodatkowo miejsce zajmują karty, paski narzędzi, a nierzadko dodatkowe toolbary (czasem wciskane na siłę nieświadomym użytkownikom przy instalacji przeróżnych programów). To wszystko ogranicza obszar, jaki zostaje użytkownikowi na oglądanie naszej strony. Google Analytics nie pokazuje tej wartości w standardowych raportach, ale jest dość prosty sposób na pozyskanie takiej informacji.

Mimo, że GA nie raportuje tego, to taką informację posiada. Wystarczy sprawdzić co kryje się w requeście wysyłanym na serwer Google:

vp_size_1

Jak widać mamy tu informację zarówno o rozdzielczości ekranu, jak i o tym, jaki obszar tak na prawdę jest widziany przez użytkownika – Viewport size. I własnie tą wartość będziemy chcieli pobrać, a następnie wykorzystać w raportach.

Ale właściwie po co taka informacja? Jest ona bardzo przydatna dla osób, które tworzą Landing Page pod kampanie, gdzie jest zastosowany jakiś element zachęcający użytkowników do kliknięcia. Dla witryn e-commerce może to być istotne ze względu na projektowanie banerów dla promocji wewnętrznych. W procesie zakupowym ważne jest, aby użytkownik cały czas widział najważniejsze informacje, dlatego warto wiedzieć jak zaprojektować położenie elementów, aby większość naszych użytkowników miała przyjemne doświadczenie z przebywania na stronie.

Na początek musimy wybrać metodę, za pomocą której wyślemy te dane do Google Analytics. Możemy to zrobić za pomocą zdarzenia lub jako wymiar dodatkowy. Ponieważ nie jestem zwolennikiem odpalania zbyt dużej liczby eventów na stronie (ze względu na limit hitów na sesję użytkownika), postanowiłem użyć wymiaru dodatkowego.

Pierwszym krokiem będzie więc zdefiniowanie wymiaru dodatkowego w GA.

W ustawieniach usługi odnajdujemy „Niestandardowe definicje” i wybieramy „Niestandardowe wymiary”.

wym_niest

Następnie klikamy na „+ Nowy wymiar niestandardowy”, konfigurujemy jak poniżej i klikamy „Utwórz”.

wym_niest_2

Po utworzeniu wyświetli nam się taki ekran:

wym_niest_3

Stąd bierzemy numer naszego dodatkowego wymiaru (w tym przypadku nr 1), który będzie nam potrzebny do późniejszej konfiguracji tagu w GTM.

Po utworzeniu dodatkowego wymiaru możemy przystąpić do konfiguracji GTM. Musimy tu zrobić 2 rzeczy:

  • Pobrać informację o viewport size
  • Wysłać tą informację do Google Analytics

W celu pobrania informacji o wysokości i szerokości widzianego pola posłużymy się zmienną „Custom Javascript” w GTM i wykorzystamy fragment kodu javascript znaleziony na stackoverflow.

 

vp_gtm

function() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var vp = w + 'x' + h;
return vp;
}

taki kod spowoduje, że otrzymamy dane w postaci 111×222, czyli tak jak domyślnie zdefiniowany jest format danych dla rozdzielczości ekranu w raportach Google Analytics. Gdybyśmy chcieli zmienić ten format, należy zmodyfikować linijkę

var vp = w + 'x' + h;

Zapisujemy zmienną i pobranie informacji o viewport size mamy załatwione.

Teraz należy to przesłać do Google Analytics. W tym celu należy wykorzystać któryś z istniejących tagów i w dodatkowych ustawieniach przekazać informację o naszym wymiarze dodatkowym, który skonfigurowaliśmy na początku. Ja do tego celu wykorzystam główny tracker Google Analytics.

vp_gtm_2

W pole „Index” wpisujemy cyfrę, którą wcześniej odczytaliśmy z konfiguracji dodatkowego wymiaru w Google Analytics, w pole „Dimension Value” wstawiamy nazwę zmiennej javascript zwracającej obszar widziany w przeglądarce.

Po zapisie i opublikowaniu kontenera dane zaczną się zbierać w Google Analytics:

vp_cd

 

Żeby przeanalizować dane, należy utworzyć raport niestandardowy

vp_raport

Oczywiście oprócz sesji można tam dodać informację również o innych metrykach, które chcemy analizować.

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.