Integracja Single-Page Application z Google Analytics

Web Design Blog

Kategoria:
Programowanie

Data publikacji:
27 maja 2019

Autor:
Paweł Mansfeld

Integracja Single-Page Application z Google Analytics

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

Integracja Single-Page Application z Google Analytics Integracja Single-Page Application z Google Analytics 4.6 na 5 na podstawie 9 ocen Integracja Single-Page Application z Google Analytics