Instalacja narzędzia Google Tag Manager z tagiem Google Analytics w sklepach internetowych, na przykładzie platformy PrestaShop

Posted on Grudzień 18th, 2014 - Szymon Fabiański

Google Tag Manager to narzędzie,  pozwalające między innymi na stosunkowo łatwą implementację tagów śledzenia, ściśle związanych z marketingiem i analizą. Przykładem zastosowania może być przeniesienie kodów śledzących Google Analytics lub Google Adwords do GTMa. Największą zaletą tego rozwiązania jest ograniczenie konieczności korzystania z usług działu IT, oczywiście po skutecznym wdrożeniu Tag Managera.

Wiele platform sklepowych posiada moduły, pozwalające na wygodne wstawienie kodu narzędzi Google lub umożliwiające szybką instalację, poprzez wypełnienie formularza. To zdecydowanie ułatwia instalację Tag Managera. W niektórych przypadkach może być potrzebne bezpośrednie wklejenie lub dołączenie kodu GTM do pliku widoku (kod odpowiedzialny za wyświetlenie HTMLa).

Niestety, zdarzają się przypadki braku jakiegokolwiek wsparcia ze strony platformy.  Na przykład sklep może znajdować się na „zamkniętym” serwerze dostawcy (często w modelu SaaS). Nie mając do niego dostępu, nie mamy możliwości edytowania kodu źródłowego. W takim przypadku, pozostaje prosić dostawcę o przeprowadzenie zmian.

W uproszczeniu,  Manager Tagów działa w następujący sposób:

  • Na (zazwyczaj) wszystkich podstronach witryny lub sklepu umieszcza się, tzw.  „kontener”, który po konfiguracji daje możliwość wstawiania kodu tagów (z poziomu Menadżera), odpowiedzialnych za przesyłanie informacji do stron trzecich. Dla przykładu: aby kod Google Analytics działał poprawnie bez GTMa, należałoby fizycznie wstawić kod GA w źródło strony. W przypadku zaimplementowanego Google Tag Managera wystarczy skonfigurować Analyticsa z poziomu GTMa, co zostało przedstawione poniżej w artykule.

Instalacja:

  • Po wykonaniu powyższej czynności mamy możliwość założenia konta Menadżera Tagów (zazwyczaj jedno konto na firmę). W tym kroku wystarczy podać nazwę konta i nazwę kontenera (1. kontener na witrynę, Google zaleca używanie tej samej nazwy dla konta i kontenera) oraz ustalenie gdzie będzie używany kontener (strony lub aplikacje mobilne). 1

  • Po wybraniu opcji strefy czasowej i domeny (opcjonalnie) oraz akceptacji regulaminu,  otrzymujemy dostęp do kodu kontenera.

2

  • Gotowy kod należy wkleić zaraz po znaczniku <body> na każdej stronie,  gdzie będzie wykorzystywany (zazwyczaj cała strona). Ta czynność będzie prawdopodobnie wymagała pracy programisty lub web developera. W przypadku PrestaShop, jednym z prostszych rozwiązań będzie wklejenie kodu w pliku themes/twój-szablon/header.tpl (twój-szablon – nazwa używanego szablonu, często default). Do przeprowadzenia zmian będziemy potrzebowali dostępu do ftp oraz programu do edycji kodu (do tej operacji polecam Total Commander Power Pack, ponieważ posiada narzędzia do obsługi ftp oraz narzędzia do edycji kodu). W przypadku osób, które nie mają (przynajmniej) dobrej wiedzy o htmlu i podstaw programowania, proponowałbym zlecić instalację na zewnątrz.  Całość należy „opakować” w {literal}… {/literal}, żeby nie doszło do próby interpretacji kodu, zawartego w nawiasach klamrowych przez bibliotekę Smarty (wykorzystywana przez PrestaShop). Wszystko zapisujemy na serwerze (zwykłe nadpisanie pliku).

 

3

Przedstawiony sposób wklejenia kodu nie jest najbardziej wysublimowaną metodą, ale do prawidłowego działania, w pełni wystarczy. W sieci można znaleźć różnego rodzaju moduły, które mogą przeprowadzić integrację, częściowo za nas. Jak w przypadku wszystkich modułów -  trzeba dobrze poszukać, ponieważ znajdą się firmy/osoby, które koszt modułu szacują nawet na 80 Euro (PrestaShop).

 

  • Po instalacji, możemy podglądnąć źródło strony w dowolnej przeglądarce. W związku z tym że, kod został wklejony do pliku heather.tpl, skrypt Tag Managera będzie dostępny na wszystkich podstronach sklepu, ponieważ ww. plik dołączany jest na każdej stronie.

  • Ostatnim krokiem instalacji będzie weryfikacja, czy kod faktycznie działa. W tym celu należy stworzyć pierwszy Tag. Żeby nie podawać zupełnie niepraktycznego przykładu, posłużę się implementacją kodu Google Analytics w wersji Universal. Zakładam, że etap tworzenia i konfigurowania GA (po stronie aplikacji) mamy za sobą (założenie konta, konfiguracja – podstawowa instalacja nie jest trudna i każdy powinien sobie z nią dać radę). Żeby rozpocząć tworzenie nowego Tagu, wystarczy kliknąć przycisk „Nowe”, a następnie wybrać „Tag”.

 

4

  • Do uzupełnienia mamy jeszcze kilka pól. Nazwa Tagu powinna odnosić się do roli jaką ma pełnić Tag, w tym przypadku warto wpisać w pole np. „Universal Analytics”. Następne pole to typ Tagu, które definiuje rodzaj Tagu i decyduje o wyświetleniu kolejnych pól w formularzu. W tym miejscu, z rozwijanej listy, wybieramy Google Analytics, a następnie Universal Analytics. Ostatnim polem, które musimy obowiązkowo uzupełnić jest identyfikator śledzenia, który należy przekopiować z konta GA (np. UA-00000000-00, Administrator -> Usługa -> Ustawienia i usługi).

 

5

  • Następną czynnością, jaka jest potrzebna do tego żeby Tag zadziałał, jest ustalenie reguł w jakich ma odpalać się Tag. W przypadku GA chcemy, żeby kod uruchamiał się na każdej stronie serwisu. W celu konfiguracji klikamy przycisk „+Dodaj” w prawym górnym rogu. Następnie wybieramy predefiniowaną regułę, odpowiadającą za uruchomienie Tagu na wszystkich stronach. Klikamy przycisk „Zapisz” i ponownie „Zapisz”.

  • Powinniśmy zostać przekierowani na stronę podsumowania, gdzie w (domyślnej) zakładce z tagami powinien widnieć tag Universal Analytics.

  • Kolejnym krokiem jest sprawdzenie, czy kod będzie działał poprawnie. W tym celu należy kliknąć przycisk „Utwórz wersję”. Zostanie przypisana liczba reprezentująca wersję kontenera. Następnie przycisk „Podgląd” i „Debuguj”. Teraz można podglądnąć w przeglądarce na stronie miejsca, w których odpalane są tagi, przemieszczając się po stronie.

 

6

 

  • Ostatnim krokiem jest powrót do Tag Managera i klikniecie przycisku „Opublikuj”. Dopiero po wykonaniu tego kroku, tagi będą działały na stronie.

  • Jeśli do Twojej strony był wcześniej dodany kod Google Analytics lub implementacja była zrobiona przez zewnętrzny moduł, należy usunąć kod ze strony lub wyłączyć moduł.

 

Bonus: Żeby sprawdzić czy Google Tag Manager działa na Twojej i innych stronach warto zainstalować dodatek do przeglądarki Chrome o nazwie Google Tag Assistant.