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.
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
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.
< 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’>
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
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.
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ć).
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.
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
Ż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.
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’>
Przesłanie informacji do Google Analytics 4
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ć:
