W tym przewodniku zintegrujemy aplikację/witrynę typu Single Page Application (SPA) z Google Analytics. Problem ze śledzeniem tego typu stron i aplikacji polega na tym, że w tych witrynach nie dochodzi do przeładowania strony internetowej i nie wystarczy dodać wygenerowanego w Google Analytics skryptu do śledzenia. Musimy ręcznie zmienić bieżącą ścieżkę a następnie wysłać do usługi Analytics zdarzenie pageview.
Krok 1: Dodanie analytics.js i inicjalizacja
Na początek, dodajmy kod analytics do naszej aplikacji typu Single Page. W tym momencie wystarczy tradycyjny kod jaki można znaleźć w dokumentacji. Możemy go dodać w jednym miejscu, np. w głównym skrypcie naszej aplikacji SPA:
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
Pamiętaj aby dodać w przedostatniej linii własny identyfikator śledzenia.
Krok 2: Ustawienie nowej strony za pomocą komendy set
W przypadku zmiany widoku w aplikacji SPA, musimy ręcznie wysłać informację do Google Analytics, że nastąpiła zmiana bieżącego adresu URL. W tym celu wystarczy użyć komendy set:
ga('set', 'page', link);
Zmienna link przechowuje ścieżkę jako zwykły ciąg znaków typu 'o-mnie.html’.
Krok 3: Wywołanie wyświetlenia strony
Kiedy już prześlemy informację, że adres uległ zmianie należy wywołać zdarzenie „pageview”:
ga('send', 'pageview');
Aby mieć miarodajne i rzeczywiste wyniki, należy go wywołać dopiero po załadowaniu się nowego widoku (czyli po wszystkich animacjach ładowania itp.).
Uwagi końcowe
Pamiętaj aby wywoływać set i send za kazdym razem kiedy:
- użytkownik dokonuje wizyty lub odświeża całą stronę (zdarzenie onload),
- użytkownik kilka w link,
- użytkownik używa przycisków wstecz i dalej.
Jeżeli przysłała cię tutaj instrukcja programowania stron Single Page Applications dodamy te instrukcje zarówno w metodzie mainMenu.click(); oraz window.addEventListener(’popstate’, function(event){}))
Podsumowanie
Jak widać, śledzenie Single Page Application w Google Analytics to nic trudnego. Wystarczy zajrzeć do oficjalnej dokumentacji, wygenerować kod śledzenia i dodać odpowiednie komendy w metodach odpowiedzialnych za ładowanie widoków. Posiadanie strony lub sklepu wykonanego w technologi SPA zupełnie nie przeszkadza w korzystaniu z analityki z Google Analytics a doniesienia o tym, że jest to trudne można włożyć między mity.
Źródła
https://developers.google.com/analytics/devguides/collection/analyticsjs/
https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
Odpowiedz lub skomentuj