Wprowadzenie do tagowania po stronie serwera

Tagowanie po stronie serwera to nowy sposób na wykorzystanie aplikacji na różnych urządzeniach za pomocą Menedżera tagów Google. Kontenery serwera używają tego samego modelu tagów, reguły i zmiennych, a jednocześnie udostępniają nowe narzędzia umożliwiające pomiary aktywności użytkownika w dowolnym miejscu.

Typowa konfiguracja tagowania bez tagowania po stronie serwera wykorzystuje kontener na stronie służący do wysyłania danych pomiarowych do różnych serwerów gromadzenia danych. Ilustracja 1 pokazuje, jak kontener internetowy Menedżera tagów działający w przeglądarce wysyła dane do wielu serwerów.

Schemat witryny przystosowanej do używania kontenera internetowego Menedżera tagów Google

Rysunek 1. Schemat witryny przystosowanej do korzystania z kontenera internetowego Menedżera tagów Google

Z kolei kontener serwera nie działa w przeglądarce użytkownika ani w jego telefonie. Zamiast tego działa na serwerze, nad którym masz kontrolę.

Schemat witryny instrumentowanej za pomocą kontenera do tagowania po stronie serwera.

Ilustracja 2.Przykład konfiguracji tagowania korzystającej z kontenera serwera

Serwer działa we własnym projekcie Google Cloud Platform (lub w innym wybranym środowisku) i tylko Ty masz dostęp do danych na serwerze, dopóki nie zdecydujesz się go wysłać gdzie indziej. Masz pełną kontrolę nad tym, jak kształtują się te dane i gdzie są kierowane z serwera. Tagi są tworzone przy użyciu technologii JavaScript w trybie piaskownicy. Uprawnienia dają wgląd w możliwości tagu, a zasady pozwalają ustawiać granice wokół kontenera.

Serwer odbiera żądania internetowe z urządzenia użytkownika i przekształca je w zdarzenia. Każde zdarzenie jest przetwarzane przez tagi, reguły i zmienne kontenera. Tagi, reguły i zmienne w kontenerze serwera działają dokładnie tak samo jak w przypadku innych typów kontenerów: reguły sprawdzają każde zdarzenie pod kątem określonych warunków, a w razie potrzeby uruchamiają tagi, które wysyłają dane zdarzenia do przetworzenia.

Ten model wprowadza dwa ważne pytania dotyczące kontenerów serwera:

  • Skąd pochodzą dane pomiarowe z urządzenia użytkownika do kontenera serwera?
  • Jak dane pomiarowe wysyłane do kontenera serwera są przekształcane w zdarzenia?

Odpowiedź na oba pytania to nowy rodzaj encji w kontenerach serwera: klient.

Jak działają klienci

Klient to połączenie między oprogramowaniem na urządzeniu użytkownika a kontenerem serwera. Klient otrzymuje dane pomiarowe z urządzenia, przekształca je w jedno lub więcej zdarzeń, przesyła dane do przetworzenia w kontenerze i pakuje wyniki, aby wysłać je z powrotem do osoby wysyłającej prośbę.

To naprawdę dużo! Przyjrzyjmy się dokładniej każdemu z tych elementów. Ilustracja 3 przedstawia dane napływające do kontenera serwera z przeglądarki internetowej użytkownika i z serwera WWW do kontenera serwera.

Schemat witryny instrumentowanej za pomocą kontenera do tagowania po stronie serwera.

Ilustracja 3.Każdy klient używa innego strumienia danych

Klienci otrzymują dane pomiarowe z urządzenia. Załóżmy, że chcesz mierzyć aktywność użytkowników w 3 miejscach: witrynie, aplikacji telefonicznej i inteligentnym tosterze. Twoja witryna korzysta z Google Analytics, aplikacja do telefonów używa Firebase Analytics, a toster używa zastrzeżonego protokołu o nazwie „Toastmierz”.

W przypadku przystosowania tych 3 urządzeń do Menedżera tagów Google potrzebny jest zwykle inny kontener dla każdej platformy. Kontener serwera nie działa na urządzeniu, więc ten sam kontener może obsługiwać narzędzia analityczne na wszystkich 3 platformach urządzeń. Wystąpił problem. Nie wszystkie urządzenia komunikują się w ten sam sposób. Protokół Google Analytics różni się od protokołu ToastMeasurement. Tu trafiają klienci.

Zamiast tych trzech kontenerów kontener zawiera 3 klienty. Każde żądanie przychodzące do kontenera zostanie przetworzone przez każdego klienta w kolejności według priorytetu. Pierwszą rzeczą, jaką zrobi klient, jest ustalenie, czy wie, jak przetworzyć tego typu prośbę. Jeśli to możliwe, klient „odbiera” żądanie i przechodzi do kolejnego etapu przetwarzania. Akcja odebrania żądania uniemożliwia kolejnym klientom jego uruchomienie. Jeśli klient nie może przetworzyć żądania, nie wykonuje żadnych działań, a pozostali klienci mogą zdecydować, czy obsługiwać żądanie.

Klient przekształca dane o żądaniach w co najmniej jedno zdarzenie. Gdy klient ToastMeasurement odebrał żądanie, musi przekształcić to żądanie w coś, co rozumie reszta kontenera. Jest to zestaw zdarzeń.

Zdarzenia to zdarzenia, które chcesz mierzyć. Mogą to być: start_toasting, finish_toasting lub buy_bread. Istnieją pewne zalecenia na temat struktury zdarzeń generowanych przez klienta, ale jedyne wymaganie, aby reszta kontenera je zrozumiała.

Klient uruchamia kontener. Klient odebrał żądanie i przekształcił je w zdarzenia. Czas na tagi, reguły i zmienne. Klient przekazuje każde zdarzenie do pozostałej części kontenera, aby je przetworzyć.

Klienci pakują wyniki, aby przesłać je z powrotem na urządzenie. Po uruchomieniu kontenera czas odpowiedzieć na toster. Odpowiedź może przybierać różne formy. Może po prostu powiedz „OK, gotowe”. Być może jeden z tagów chce przekierować żądanie na inny serwer kolekcji. Albo jeden z tagów informuje oświetlenia na ostonie, żeby zmienił kolor. Zadaniem klienta jest spakowanie wyników i odesłanie ich do osoby zgłaszającej.

Na szczęście większość aspektów zajmuje się Menedżerem tagów. Zawierają one 3 klienty: Google Analytics 4, Google Analytics: Universal Analytics i Measurement Protocol. Klienty te zapewniają narzędzia potrzebne do rozpoczęcia pracy z aplikacją od razu po utworzeniu kontenera.

Krótki przykład

Przyjrzyjmy się krótkiemu przykładowi, aby zobaczyć, jak wszystkie elementy pasują do siebie. W tym przykładzie utworzysz te elementy:

  1. Prosta witryna, która korzysta z tagu gtag.js do wysyłania zdarzenia click do kontenera serwera.
  2. Klient Google Analytics 4, który odbiera zdarzenie.
  3. Reguła, która uruchamia się przy zdarzeniu click.
  4. Tag Google Analytics 4, który wysyła dane zdarzenia do Google Analytics w celu przetworzenia.

W tym przykładzie zakładamy, że masz już utworzony i wdrożony kontener serwera.

Konfiguracja tagu gtag.js

Najpierw skonfiguruj tag gtag.js, aby wysyłał dane do kontenera serwera. Dzięki tagowi gtag.js wysyłanie danych do kontenera serwera działa tak samo jak wysyłanie danych do Google Analytics z jedną zmianą. Tak jak na przykładowej stronie poniżej, ustaw opcję konfiguracji transport_url tak, aby wskazywała kontener serwera.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    transport_url: 'https://analytics.example.com',
  });
</script>

Zastąp TAG_ID swoim identyfikatorem tagu. Zastąp https://analytics.example.com adresem URL kontenera serwera.

Następnie dodaj funkcję sendEvent() do obsługi zdarzeń click:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    transport_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

Zastąp TAG_ID swoim identyfikatorem tagu. Zastąp https://analytics.example.com adresem URL kontenera serwera.

W tej konfiguracji moduły obsługi zdarzeń, takie jak funkcja sendEvent() w tym przykładzie, wysyłają zdarzenie click do kontenera serwera.

Klient Google Analytics 4

Twój kontener wymaga od klienta odebrania zdarzenia, gdy dotrze ono do serwera. Na szczęście kontenery serwerów mają fabrycznie zainstalowany klient Google Analytics 4, więc nie musisz już tego robić.

Reguła kliknięcia

Następnie utwórz regułę, która uruchamia się przy zdarzeniu click. Utwórz regułę niestandardową uruchamianą, gdy wbudowana zmienna Nazwa zdarzenia jest równa „kliknięcie”.

konfiguracja aktywatora

Tag Google Analytics 4

Na koniec dodaj tag GA4 do reguły. Podobnie jak w przypadku klientów, kontener serwera zawiera tag GA4. Wystarczy, że utworzysz tag, skonfigurujesz ustawienia i będziesz mieć połączenie z kontenerem. Klienty GA4 i tagi GA4 zaprojektowano z myślą o ich współdziałaniu. Oznacza to, że musisz tylko utworzyć tag GA4, a jego konfiguracja będzie pobierana automatycznie ze zdarzeń pochodzących z klienta.

Podgląd kontenera

Po skonfigurowaniu kontenera kliknij Podgląd. Otwórz swoją witrynę w innym oknie przeglądarki. W miarę wysyłania żądań i zdarzeń do kontenera serwera zobaczysz te żądania i zdarzenia w lewej części strony podglądu.

Gdy wprowadzisz zmiany, opublikuj kontener serwera.

Konfigurowanie serwera do pracy w trybie produkcyjnym z własnym wyświetlaniem

Zanim wyślesz ruch produkcyjny do kontenera serwera, zalecamy zainstalowanie go w domenie własnej i uaktualnienie serwera do trybu produkcyjnego.