Migracja zdarzeń zakodowanych w klasycznym Analytics (ga.js) do Universal Analytics (analytics.js)

U jednego z naszych Klientów całe śledzenie odbywało się do tej pory za pomocą kodów klasycznego Analytics (ga.js). Ze względu na zalety Google Tag Managera zdecydowaliśmy się wdrożyć to rozwiązanie oraz przejść na kody z biblioteki Universal Analytics (analytics.js). Problem pojawił się w momencie gdy trzeba było przenieść zdarzenia.

Na stronie znajdowało się prawie 80 zdarzeń, zarówno zapisanych inline-owo w kodzie:

_gaq.push(['_trackEvent', 'Kategoria', 'Akcja', 'Etykieta', 'Wartość', true])

jak i wywoływanych np. po kliknięciu:

<a href="#" onClick="_gaq.push(['_trackEvent', 'Kategoria', 'Akcja', 'Etykieta', 'Wartość',true]);">Event</a>

Zdarzenia były wykorzystywane np. do przekazywania zmiennej niestandardowej z informacją na temat statusu logowania użytkownika. Przeniesienie wszystkich kodów z Klasycznego Analytics (ga.js) zajęłoby bardzo dużo czasu zespołowi IT, który w tym momencie nie miał dostępnych wystarczająco dużych zasobów. Wszelkie opóźnienia w procesie migracji spowodowałyby sytuację, w której zdarzenia nie byłyby raportowane do Google Analytics, czyli brakowałoby pełnych danych do analizy.

Aby nowo wdrożony Google Tag Manager mógł rejestrować zdarzenia powinny być one przekazane do warstwy danych (dataLayer), np. za pomocą dataLayer.push, czyli wyglądać w następujący sposób:

dataLayer.push({'event': 'GAEvent', 'EventCategory': 'Kategoria‘, 'EventAction': 'Akcja', 'EventLabel': 'Etykieta', 'EventValue': 'Wartość', 'EventInteraction': 'true, false lub jak nie ma to puste'});

Analogiczna sytuacja pojawiła się w przypadku wirtualnych odsłon oraz zmiennych niestandardowych, zapisanych za pomocą kodów klasycznego Analytics (ga.js):

  1. Wirtualne odsłony:
  2.  _gaq.push(['_trackPageview', '/wirtualna_odsłona.html']);
    
  3. Zmienne niestandardowe:
  4. 
    _gaq.push(['_setCustomVar',1,'Zalogowany','Tak',2]);
    

które powinny być przekazane do warstwy danych (dataLayer), w postaci:

  • Wirtualne odsłony:
  • dataLayer.push({'event': 'GAPageview', 'pageview': 'przekazywana odsłona np. /wirtualna_odsłona.html' });
    
  • Zmienne niestandardowe:
  • dataLayer.push({'event': 'GAEventCustomVar', 'CustomVarIndex': , 'CustomVarName': '', 'CustomVarValue': '', 'CustomVarScope': });
    

    Dodatkowo należało uwzględnić przypadek, w którym jednocześnie wywołuje się zdarzenie oraz wirtualna odsłona, czyli:

     _gaq.push(['_trackEvent','Kategoria','Akcja','Etykieta', 'Wartość'],['_trackPageview', '/wirtualna_odsłona.html']);
    

    Aby uniknąć kosztownego i czasochłonnego przepisywania wszystkich zdarzeń, wirtualnych odsłon oraz zmiennych niestandardowych z kodów ga.js na kody Universal Analytics zdecydowaliśmy się znaleźć inne rozwiązanie, które w szybki sposób umożliwi migrację zdarzeń zakodowanych w ga.js do Universal Analytics.

    Rozwiązanie – skrypt migrujący zdarzenia zakodowane w klasycznym Analytics (ga.js) do Universal Analytics (analytics.js)

    Skutecznym rozwiązaniem okazało się stworzenie skryptu JS, który automatycznie przeniesie zdarzenia zakodowane w klasycznym Analytics do Universal Analytics. Skrypt po umieszczeniu na stronie przechwytuje zdarzenia, wirtualne odsłony oraz zmienne niestandardowe zapisane za pomocą kodów klasycznego Analytics (ga.js) a następnie przekazuje je do warstwy danych (dataLayer). Za pomocą odpowiednio skonfigurowanych tagów zdarzenia zostaną przekazane do Google Tag Managera.

    Poniżej skrypt:

    var _gaq =[];
    var dataLayer = [];
    
    _gaq.push = function (){
    	for (var i = 0; i < arguments.length; ++i) {
    		DataLayerProcessor.triggerEvent.apply(null, arguments[i])
    	}
        return Array.prototype.push.apply(this,arguments);
    }
    
    var DataLayerProcessor = {
    	triggerEvent: function() {
    		switch (arguments[0]) {
    			case "_trackEvent":
    				DataLayerProcessor.sendTrackEvent.apply(null, arguments)
    				break;
    			case "_trackPageview":
    				DataLayerProcessor.sendPageView.apply(null, arguments)
    				break;
    			case "_setCustomVar":
    				DataLayerProcessor.sendCustomVar.apply(null, arguments)
    				break;
    		}		
    	},
    
    	sendTrackEvent: function() {
    		dataLayer.push({
    	         'event' : 'GAEvent',
    	         'EventCategory' : arguments[1],
    	         'EventAction' : arguments[2],
    	         'EventLabel' : arguments[3],
    	         'EventValue' : arguments[4],
    	         'EventInteraction' : arguments[5]
    	     })
    	},
    	sendPageView: function(){
    		dataLayer.push({
    	         'event' : 'GAPageview',
    	         'pageview' : arguments[1]
    	     })
    	},
    	sendCustomVar: function(){
    		dataLayer.push({
    	         'event' : 'GAEventCustomVar',
    	         'CustomVarIndex' : arguments[1],
    	         'CustomVarName' : arguments[2],
    	         'CustomVarValue' : arguments[3],
    	         'CustomVarScope' : arguments[4],
    	     })
    	}
    
    }
    
    

    Wdrożenie skryptu oraz konfiguracja tagów Google Tag Managera:

    1. Kod należy umieścić na każdej stronie przed kontenerem GTM np. w części Head. Warto umieścić kod jak najwyżej w strukturze strony, ponieważ jeśli jakieś zdarzenia wywołają się przed nim to nie zostaną one przekazane.
    2. Ze strony koniecznie należy usunąć stary kod śledzący (kod który wczytuje ga.js), żeby całość działała poprawnie.
    3. W Google Tag Manager należy skonfigurować 3 tagi, które będą odpowiedzialne za odbiór zdarzeń, wirtualnych odsłon oraz zmiennych niestandardowych:
    4. Konfiguracja tagów Google Tag Manager
    5. W tagu dla zdarzeń, należy wybrać rodzaj śledzenia: Zdarzenie, a parametry przekazać za pomocą makr:
    6. a. Śledzenie:

      Śledzenie zdarzeń Google Tag Manager

      b. Typ makra, należy ustawić jako zmienną warstwy danych, dla EventCategory, EventAction, EventLabel oraz EventValue:

      Edycja makra Google Tag Manager

      c. Reguła, która umożliwi wywołanie tagu w odpowiednim momencie:

      Reguła Google Tag Manager
    7. Ustawienie tagu dla wirtualnych odsłon oraz zmiennych niestandardowych: analogicznie konfigurujemy tagi dla wirtualnych odsłon oraz zmiennych niestandardowych.

    Wcześniej czy później każda strona stanie przed koniecznością migracji z klasycznego kodu Google Analytics na Universal Analytics. W zależności o liczby śledzonych elementów za pomocą zdarzeń, wirtualnych odsłon czy zmiennych niestandardowych, migracja może być mniej lub bardziej czasochłonna.

    Przedstawiony w powyższym artykule skrypt jest rozwiązaniem, które umożliwia szybkie przeniesienie zdarzeń, wirtualnych odsłon oraz zmiennych niestandardowych zakodowanych w klasycznym Analytics (ga.js) do Universal Analytics (analytics.js).

    Zaprezentowane rozwiązanie nie powinno być rozwiązaniem docelowym, tylko tymczasowym. Zastosowanie skryptu umożliwiło nam zachowanie ciągłości i poprawności zbieranych danych w okresie od migracji aż do momentu kiedy zespół IT przeniesie całą instalację na Universal Analytics.

    Autor: Karol

    Karol na co dzień zajmuje się analizą danych. Wie jak wyciągnąć z nich jak najwięcej i jak przekuć je na rekomendacje dla naszych Klientów. Karol lubi uczyć się nowych rzeczy. Na szczęście w przypadku analityki internetowej ma ogromne pole do popisu i może śmiało zgłębiać wiedzę, którą implementuje później w projektach :) Jest absolwentem Szkoły Głównej Handlowej. W wolnych chwilach gotuje.





    x

    Pobierz najnowsze case study

    Przeczytaj jak Limango Polska wykorzystuje potencjał analityki internetowej w swojej organizacji.

    Pobierz case study
    Przeczytaj poprzedni wpis:
    Atrybucja konwersji w Google Analytics – jak wybrać odpowiedni model?

    Przy planowaniu budżetów marketingowych i tworzeniu planu działań na kolejny rok, pytaniem, które pojawia się najczęściej jest: który z wykorzystywanych...

    Zamknij