Poradnik GTM server-side tagging – wysłanie danych do GA4

Z artykułu dowiesz się:

Czym jest Google Tag Manager serve-side?

GTM server side jest nowym typem kontenera zlokalizowanym po stronie serwera, w związku z tym nie jest uruchamiany po stronie klienta, ale właśnie na serwerze. Możemy porównać go do serwera proxy, który odbiera żądania ze strony klienta, a następnie na ich podstawie uruchamia tagi, które przesyłają informacje do wymaganych endpointów. Warto tu wspomnieć, że dla naszego GTM możemy podać własną customową domenę.

Żeby lepiej zrozumieć działanie GTM server-side posłużmy się przykładem. Przy klasycznym GTM client-side po uruchomieniu tagu GA informacje wysyłaliśmy bezpośrednio do Analyticsa. Z wykorzystaniem tagowania server-side informacje wysyłamy najpierw do naszego GTM’a na serwerze i dopiero jest ona przesyłana do Analyticsa.

serverside_gtm_ga4
W pracy analityka internetowego częstym problemem jest utrata danych na poziomie zbierania, nie tylko z powodu odrzuconych zgód cookie consent, ale również przez różnego rodzaju ad blocki czy przeglądarki, które zwyczajnie blokują skrypty Google Analytics lub innego narzędzia analitycznego. Mechanizm blokowania zazwyczaj opiera się o wykrywanie żądań do konkretnych serwerów i blokowaniu ich.

Za pomocą GTM server-side możemy w pewien sposób oszukać” ad block lub przeglądarkę, że komunikujemy się z własnym serwerem, co w teorii powinno przełożyć się na większą ilość zbieranych danych. Innym z powodów, dla których warto wykorzystać server-side tagging jest większe bezpieczeństwo, w przypadku, gdy chcemy wysłać dane do end pointu dla, którego musimy podać poświadczenia a nie chcemy ich eksponować po stronie klienta. Oprócz tego pozwala on też na optymalizacje tagowania po stronie klienta, gdyż na podstawie jednego odebranego żądania na serwerze, możemy tą samą informacje przesłać do wielu miejsc, przez co zwiększamy zarówno kontrole jak i zmniejszamy ilość akcji dziejących się po stronie klienta, co może podnieść wydajność naszej strony.

Brak pixela w GA4

Pracując jako analityk internetowy napotykamy sytuacje w których musimy wysłać do Google Analytics informacje za pomocą pixela. Najbardziej powszechnym powodem, kiedy korzystaliśmy z tej metody było mierzenie open rate dla email’a, aczkolwiek w swojej karierze wykorzystywałem tę metodę do mierzenie wyświetleń pop-up w aplikacji, gdyż CMS nie pozwalał na wgranie bardziej skomplikowanej funkcji.

W przypadku Universal Analytics sprawa była dosyć prosta. Wykorzystywaliśmy do tego meauserement protocol. W hit builderze (https://ga-dev-tools.web.app/hit-builder/) generowaliśmy odpowiednie żądanie http typu post, a następnie wystarczyło umieścić je w odpowiednim dla pixela znaczniku.
hit_ga4_measurement promotocl

< img src=https://google-analytics.com/collect?v=1&t=event&tid=UA-11111111-1&cid=0e902354-e098-4f6a-97b4-bc3c6e4fda8f&ec=pixel&ea=test&el=hit>

Tak przygotowane, żądanie mogliśmy umieścić w miejscu, w którym chcieliśmy je wywołać i w momencie wyświetlenia naszego pixela dane zostały wysłane do Analytics’a zgodnie z konfiguracją naszego hita.

W Google Analytics 4 sprawa jest bardziej skomplikowana ponieważ measurment prtocol dla GA4 nie daje nam możliwości stworzenie żądania http typu post, które moglibyśmy zaszyć w kod strony. Oznacza to, że musimy znaleźć alternatywne rozwiązanie. Alternatywnym rozwiązaniem w tym przypadku jest właśnie tagowanie server-side. W dalszej części na przykładzie potrzeby wysłania danych do GA4 za pomocą pixela dowiesz się jak krok po kroku wdrożyć tagowanie server-side.

Konfiguracja GTM Server Side

Do konfiguracji GTM server-side potrzebny będzie nam konto rozliczeniowe Google Cloud Project, ponieważ konfigurując kontener automatycznie utworzymy dla niego projekt Google Cloud Platform (GCP), dlatego jeżeli nie posiadamy jeszcze konta rozliczeniowego GCP dobrze jest je stworzyć przed rozpoczęciem konfigurowania GTM, aczkolwiek będziemy mieli możliwość utworzenie go również w trakcie konfiguracji. W tym miejscu warto dodać, że używanie GTM server-side wiąże się z niewielkimi kosztami, które zostaną dopisane do naszego projektu GCP.

Możemy teraz przystąpić do konfiguracji kontenera GTM po stronie serwera. W kreatorze musimy podać nazwę, wybrać typ server oraz kliknąć przycisk utwórz.
konfiguracja_gtm_server side
W następnym kroku kreator poprosi nas o konfiguracje serwera tagowania, zalecam wybranie opcji automatycznej.

W ostatnim kroku wybieramy konto rozliczeniowe do którego chcemy podłączyć projekt GCP, który zostanie dla nas utworzony (jeżeli nie mamy konta rozliczeniowego to w tym momencie musimy je utworzyć).

Po kilku chwilach nasz serwer tagowanie powinien zostać skonfigurowany.

Wysłanie żądania do GTM server-side

Teraz musimy wysłać żądanie do naszego kontenera na serwerze. Żeby sprawdzić jak to działa uruchomimy tryb debug naszego kontenera, a następnie w innym oknie przeglądarki wyślemy następujące żądanie:
https://gtm-nzvzk8x-mtnio.uc.r.appspot.com/test.
W którym /test jest zdarzeniem, które nasz GTM powinien odczytać:

Jeżeli w naszym żądaniu zmienimy /test na /test2 to właśnie to GTM odczyta jako zdarzenie.

gtm_instalacja_2

W tym momencie już takie żądanie możemy zaszyć w formę pixela i wykorzystać je jako trigger, który uruchomi tag GA4 po stronie serwera.

< img src=’https://gtm-nzvzk8x-mtnio.uc.r.appspot.com/test2′>

Niestety tym sposobem przekażemy do serwera tylko ostatnią część żądania po “/”, która zostanie zinterpretowana jako event.

Oczywiście możemy ustawić strukturę tej części naszego call’a i parsować ją za pomocą funkcji java script po stronie serwera, ale nie jest to optymalne rozwiązanie.

Żeby wysłać żądanie do naszego serwera z większą ilością informacji lepszym rozwiązaniem wydaje się wykorzystanie pixela dla measurement protocol Universal Analytics. Jeżeli Google zapowiedział, że do lipca 2024 UA w wersji 360 będzie dostępny to do tego czasu również dostępny powinien być measurement protocol UA, zwłaszcza, że nie chcemy się komunikować z konkretną usługą, a tylko wysłać do naszego serwera informacje w przyjaznej formie.

Co musimy zrobić? W naszym wcześniej przygotowanym pixelu UA podmienić adres serwera Google Analytics na adres naszego serwera.


Przed:

< img src=’https://google-analytics.com/collect?v=1&t=event&tid=UA-11111111-1&cid=0e902354-e098-4f6a-97b4-bc3c6e4fda8f&ec=pixel&ea=test&el=hit’>

Po:

< img src=’https://gtm-nzvzk8x-mtnio.uc.r.appspot.com/collect?v=1&t=event&tid=UA-11111111-1&cid=0e902354-e098-4f6a-97b4-bc3c6e4fda8f&ec=pixel&ea=test&el=hit’>

Odebranie żądania GTM server-side i przesłanie go dalej

W tak wysłanym żądaniu do GTM server side w przyjazny sposób, będziemy mogli odczytać parametry zaszyte w kodzie pixela, a potem wykorzystać je do przesłania ich dalej.
Oczywiście tak jak w przypadku GTM client-side musimy skonfigurować zmienne, które przechwycą odpowiednie wartości – w tym przypadku musimy wykorzystać zmienną typu parametr zapytania, a jako nazwę parametru podać nazwę klucza z naszego żądania. Dla akcji zdarzenia kluczem jest ea więc tą wartość podajemy w konfiguracji zmiennej:
Tak skonfigurowane zmienne po ich przechwyceniu będziemy mogli wykorzystać do wysłania do innego endpoint’u, w naszym przypadku GA4:

Żeby skategoryzować odbierane żądań po stronie serwera, musimy skonfigurować klienta. Domyślnie, mamy skonfigurowanych dwóch klientów: Universal Analytics oraz Google Analytics 4. Jeżeli użyjemy powyższego żądania to automatycznie nasz request zostanie rozpoznany jako Universal Analytics, co mogliśmy zauważyć na powyższym filmiku. W obawie przed wysyłaniem wielu żądań w celu doprecyzowania skonfigurujemy klienta pod nasz kod pixela.

W sekcji klienci klikamy przycisk nowy i przystępujemy do konfiguracji naszego klienta. Wybieramy typ measurement protocol, zmieniam priorytet na 1, żeby mieć pewność, że ten klient zostanie sprawdzony w pierwszej kolejności oraz dodaje ścieżkę aktywacji z wartością /bettersteps. To po tym zostanie zidentyfikowany mój klient.
Dodaje jeszcze zmienną wbudowaną client name, żeby móc ją potem wykorzystać w regule uruchamiającej.
Zanim wykonam test muszę jeszcze zmienić ścieżkę mojego żądania aby uwzględniała moją zdefiniowaną ścieżkę aktywacji – string collect zamieniam na bettersteps.
Przed:

< img src=’https://gtm-nzvzk8x-mtnio.uc.r.appspot.com/collect?v=1&t=event&tid=UA-11111111-1&cid=0e902354-e098-4f6a-97b4-bc3c6e4fda8f&ec=pixel&ea=test&el=hit’>

Po:

< img src=’https://gtm-nzvzk8x-mtnio.uc.r.appspot.com/bettersteps?v=1&t=event&tid=UA-11111111-1&cid=0e902354-e098-4f6a-97b4-bc3c6e4fda8f&ec=pixel&ea=test&el=hit’>

Teraz w trybie podglądu mogę przetestować czy moja konfiguracja działa.

Przesłanie informacji do Google Analytics 4

Ostatnim elementem jest przesłanie informacji do Google Analytics 4 i jest to najprostszy element procesu, ponieważ jest niemal identyczny, jak w przypadku tagowania client-side.
Typ tagu, który wybieramy to Google Analytics: GA4, podajmy identyfikator pomiaru naszej usługi GA4 a następnie konfigurujemy parametry które chcemy przesłać:
Przy konfiguracji reguły wybieramy typ zdarzenia niestandardowego i podajemy jego wartość, jako dodatkowy warunek wybieramy nazwę klienta i tam wybieramy nazwę naszego skonfigurowanego wcześniej klienta:
Jak widzimy w podglądzie tak przygotowana konfiguracja działa i możemy ją opublikować.
Analogiczny proces możemy wykorzystać do każdego innego tagowania, szablony tagów GA w klasycznym GTM posiadają już opcje wysyłania danych do serwera, gdzie możemy wzbogacać nasze zdarzenia o informacje dostępne na serwerze lub po prostu wykorzystać ten proces do oszukiwania ad block’ów lub nieprzyjaznych przeglądarek.
0 0 votes
Ocena artykułu
Subscribe
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments

Inne artykuły

+48 796 393 332

kontakt@bettersteps.pl

Napisz do nas