Warstwa danych

Warstwa danych to obiekt używany przez Menedżera tagów Google i gtag.js do przekazywania informacji tagom. Zdarzenia lub zmienne można przekazywać za pomocą warstwy danych, a reguły można konfigurować na podstawie wartości zmiennych.

Jeśli na przykład chcesz uruchamiać tag remarketingowy, gdy wartość purchase_total jest większa niż 100 PLN, lub na podstawie określonych zdarzeń, takich jak kliknięcie przycisku, możesz skonfigurować warstwę danych tak, aby udostępniała te dane tagom. Obiekt warstwy danych ma strukturę JSON. Na przykład:

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

Tagi Google są zaprojektowane tak, aby odwoływać się do informacji dodanych do warstwy danych w uporządkowany i przewidywalny sposób, a nie przez analizowanie zmiennych, informacji o transakcjach, kategorii stron i innych sygnałów rozproszonych na stronie. Implementacja warstwy danych wypełnionej zmiennymi i powiązanymi z nimi wartościami pomoże zapewnić dostępność odpowiednich danych, gdy będą potrzebne tagom.

Instalacja

W przypadku instalacji Menedżera tagów na stronie internetowej musisz utworzyć warstwę danych. Poniższy przykładowy kod pokazuje, gdzie warstwa danych jest ustanawiana przed wczytaniem Menedżera tagów.

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

W standardowych implementacjach tagu gtag.js, w których tag został skopiowany z usługi i dodany do strony internetowej, kod do utworzenia warstwy danych jest już podany. W niestandardowych implementacjach tagu Google dodaj kod warstwy danych na początku skryptu, jak w tym przykładzie kodu:

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

Uwaga: identyfikator kontenera w źródłowym adresie URL fragmentu kodu (np. GTM-, G- lub AW-) określa uprawnienia i możliwości wykonywania skryptu. Więcej informacji znajdziesz w artykule Typy kontenerów i prefiksy identyfikatorów.

Sposób przetwarzania informacji z warstwy danych

Po wczytaniu kontenera Menedżer tagów zacznie przetwarzać wszystkie wiadomości push z warstwy danych oczekujące w kolejce. Menedżer tagów przetwarza wiadomości zgodnie z metodą FIFO (pierwsze weszło, pierwsze wyszło): każda wiadomość jest przetwarzana pojedynczo w kolejności jej otrzymania. Jeśli wiadomość jest zdarzeniem, wszystkie tagi, których warunki reguły zostały spełnione, zostaną uruchomione, zanim Menedżer tagów przejdzie do następnej wiadomości.

Jeśli wywołanie gtag() lub dataLayer.push() jest wykonywane przez kod na stronie, w szablonie niestandardowym lub w niestandardowym tagu HTML, powiązana wiadomość jest umieszczana w kolejce i przetwarzana po ocenie wszystkich innych oczekujących wiadomości. Oznacza to, że nie ma gwarancji, że zaktualizowane wartości warstwy danych będą dostępne dla następnego zdarzenia. Aby obsłużyć takie przypadki, dodaj nazwę zdarzenia do komunikatu, gdy jest on przekazywany do warstwy danych, a potem nasłuchuj tej nazwy zdarzenia za pomocą reguły Zdarzenie niestandardowe.

Ważne: nie używaj niestandardowych tagów HTML do wdrażania kodu gtag.js. Zamiast tego skorzystaj z natywnych szablonów Menedżera tagów dla Google Ads, Analytics i Floodlight.

Ważne: nie używaj niestandardowych tagów HTML do konfigurowania ustawień zgody użytkownika w Menedżerze tagów. Ustawienia zgody użytkownika muszą zostać zastosowane, zanim w kontenerze Menedżera tagów zostaną uruchomione odpowiednie tagi, dlatego musisz użyć interfejsów API Menedżera tagów do zarządzania zgodą użytkowników, aby skonfigurować domyślne zachowanie i aktualizacje. Użyj interfejsów API do zarządzania zgodą użytkowników Menedżera tagów, aby mieć pewność, że aktualizacje stanu zgody użytkownika są przetwarzane przed elementami znajdującymi się w kolejce w warstwie danych. Dzięki temu dla wszystkich tagów uruchomionych przez to samo zdarzenie będzie widoczny ten sam stan zgody użytkownika.

Ważna uwaga: możesz użyć rozszerzenia Google Tag Assistant, aby sprawdzić stan warstwy danych w dowolnym momencie w łańcuchu zdarzeń.

Używanie warstwy danych z modułami obsługi zdarzeń

Obiekt dataLayer używa polecenia event, aby zainicjować wysyłanie zdarzeń.

Tag Google i Menedżer tagów używają specjalnej zmiennej warstwy danych o nazwie event, która jest używana przez detektory zdarzeń JavaScript do uruchamiania tagów, gdy użytkownik wchodzi w interakcję z elementami witryny. Możesz na przykład uruchamiać tag śledzenia konwersji, gdy użytkownik kliknie przycisk potwierdzenia zakupu. Zdarzenia mogą być wywoływane za każdym razem, gdy użytkownik wchodzi w interakcję z elementami witryny, takimi jak linki, przyciski, przewijanie itp.

Ta funkcja jest realizowana przez wywołanie dataLayer.push(), gdy wystąpi zdarzenie. Składnia do wysyłania zdarzenia za pomocą dataLayer.push() wygląda tak:

dataLayer.push({'event': 'event_name'});

Gdzie event_name to ciąg znaków opisujący zdarzenie, np. 'login', 'purchase' lub 'search'.

Użyj dataLayer.push(), aby wysyłać dane zdarzenia, gdy wystąpi działanie, które chcesz zmierzyć. Aby na przykład wysłać zdarzenie, gdy użytkownik kliknie przycisk, zmodyfikuj moduł obsługi onclick przycisku, aby wywoływał funkcję dataLayer.push():

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

Możesz dynamicznie przekazywać zmienne warstwy danych do warstwy danych, aby rejestrować informacje takie jak wartości wpisane lub wybrane w formularzu, metadane powiązane z filmem odtwarzanym przez użytkownika, kolor produktu (np. samochodu) dostosowany przez użytkownika, docelowe adresy URL klikniętych linków itp.

Podobnie jak w przypadku zdarzeń, ta funkcja jest realizowana przez wywołanie interfejsu API push() w celu dodania lub zastąpienia zmiennych warstwy danych w warstwie danych. Podstawowa składnia ustawiania dynamicznych zmiennych warstwy danych wygląda tak:

dataLayer.push({'variable_name': 'variable_value'});

Gdzie 'variable_name' to ciąg znaków wskazujący nazwę zmiennej warstwy danych, którą chcesz ustawić, a 'variable_value' to ciąg znaków wskazujący wartość zmiennej warstwy danych, którą chcesz ustawić lub zastąpić.

Jeśli na przykład chcesz ustawić zmienną warstwy danych z preferencją koloru, gdy użytkownik korzysta z narzędzia do dostosowywania produktu, możesz przekazać tę dynamiczną zmienną warstwy danych:

dataLayer.push({'color': 'red'});

Jedno przekazanie, wiele zmiennych

Możesz przekazywać wiele zmiennych i zdarzeń naraz:

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

Ważne: jeśli do warstwy danych prześlesz zmienną o takiej samej nazwie jak zmienna, która już istnieje, dotychczasowa wartość zostanie zastąpiona nową.

Utrzymywanie zmiennych warstwy danych

Aby zachować zmienne warstwy danych między stronami internetowymi, wywołaj dataLayer.push() po utworzeniu instancji warstwy danych przy każdym wczytaniu strony i przekaż zmienne do warstwy danych. Jeśli chcesz, aby te zmienne warstwy danych były dostępne dla Menedżera tagów po wczytaniu kontenera, dodaj wywołanie dataLayer.push() nad kodem kontenera Menedżera tagów, jak w tym przykładzie:

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
  'event': 'Pageview',
  'pagePath': 'https://www.googleanalytics.dev/pancakes',
  'pageTitle': 'Pancake Event Signup',
  'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Każda zmienna zadeklarowana w obiekcie warstwy danych będzie przechowywana tylko tak długo, jak użytkownik pozostanie na bieżącej stronie. Zmienne warstwy danych, które są istotne na różnych stronach (np. visitorType), muszą być zadeklarowane w warstwie danych na każdej stronie witryny. Nie musisz umieszczać tego samego zestawu zmiennych w warstwie danych na każdej stronie, ale musisz stosować spójną konwencję nazewnictwa. Innymi słowy: jeśli ustawisz kategorię strony na stronie rejestracji za pomocą zmiennej o nazwie pageCategory, strony produktów i zakupów powinny również używać zmiennej pageCategory.

Rozwiązywanie problemów

Oto kilka wskazówek dotyczących rozwiązywania problemów z warstwą danych:

Nie zastępuj zmiennej window.dataLayer: gdy używasz bezpośrednio warstwy danych (np. dataLayer = [{'item': 'value'}]), zastąpi ona wszystkie dotychczasowe wartości w dataLayer. Instalacje Menedżera tagów powinny tworzyć instancję warstwy danych jak najwyżej w kodzie źródłowym, nad fragmentem kodu kontenera, za pomocą window.dataLayer = window.dataLayer || [];. Po zadeklarowaniu dataLayer użyj dataLayer.push({'item': 'value'}), aby dodać do niej dodatkowe wartości. Jeśli te wartości mają być dostępne dla Menedżera tagów podczas wczytywania strony, wywołanie dataLayer.push() musi znajdować się nad kodem kontenera Menedżera tagów.

W nazwie obiektu dataLayer wielkość liter ma znaczenie: jeśli spróbujesz przekazać zmienną lub zdarzenie bez odpowiedniej wielkości liter, przekazanie nie zadziała.

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

Funkcja dataLayer.push musi być wywoływana z prawidłowymi obiektami w JavaScripcie. Wszystkie nazwy zmiennych warstwy danych powinny być ujęte w cudzysłów.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

Używaj spójnych nazw zmiennych na różnych stronach: jeśli na różnych stronach używasz różnych nazw zmiennych dla tego samego pojęcia, tagi nie będą mogły być konsekwentnie uruchamiane we wszystkich zamierzonych lokalizacjach.

Źle:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

Dobrze:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

Zmienianie nazwy warstwy danych

Domyślna nazwa obiektu warstwy danych inicjowanego przez tag Google lub Menedżera tagów to dataLayer. Jeśli chcesz użyć innej nazwy warstwy danych, możesz to zrobić, edytując wartość parametru warstwy danych we fragmencie kodu kontenera tagu Google lub Menedżera tagów i wpisując wybraną nazwę.

Menedżer tagów

Zastąp wartość parametru warstwy danych (wyróżnioną poniżej) w kodzie kontenera wybraną przez siebie nazwą.

Ważne: nie zastępuj wartości parametru, która nie jest wyróżniona.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

gtag.js

Dodaj do adresu URL parametr zapytania o nazwie „l”, aby ustawić nową nazwę warstwy danych, np. l=myNewName. Zastąp wszystkie wystąpienia argumentu dataLayer we fragmencie kodu tagu Google nową nazwą.

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

Po zmianie nazwy wszystkie odwołania do warstwy danych (np. podczas deklarowania warstwy danych nad fragmentem kodu lub podczas przekazywania zdarzeń lub dynamicznych zmiennych warstwy danych do warstwy danych za pomocą polecenia .push()) muszą zostać dostosowane do niestandardowej nazwy warstwy danych:

<script>
  window.myNewName = window.myNewName || [];
  window.myNewName.push({'variable_name': 'variable_value'});
</script>

Ważne: na każdej stronie używaj tylko jednej warstwy danych

Na stronie obsługiwany jest tylko 1 obiekt dataLayer. Menedżer tagów Google i gtag.js korzystają z pojedynczej globalnej tablicy w Javascripcie o nazwie window.dataLayer, aby odbierać, umieszczać w kolejce i przetwarzać wszystkie zdarzenia i zmienne w kolejności, w jakiej zostały dodane. Fragmenty kodu kontenera dołączają detektory i logikę przetwarzania do tej konkretnej tablicy. Próba użycia więcej niż 1 instancji warstwy danych lub nieprawidłowa ponowna inicjalizacja warstwy danych (np. zastąpienie jej przez window.dataLayer = [] po wczytaniu Menedżera tagów Google) może spowodować poważne problemy:

• Tagi mogą się nie uruchamiać: zdarzenia i zmienne przekazywane do instancji dataLayer, której Menedżer tagów Google lub tag Google nie monitorują aktywnie, nie będą uruchamiać tagów.
• Niespójne zbieranie danych: różne części strony lub różne skrypty mogą przekazywać dane do oddzielnych, odizolowanych tablic dataLayer, co powoduje, że do tagów analitycznych i tagów marketingowych docierają niepełne lub nieprawidłowe informacje.
• Utrata danych: informacje przeznaczone do śledzenia mogą zostać utracone, jeśli zostaną wysłane do niewłaściwej instancji dataLayer.
• Problemy z debugowaniem: trudno jest diagnozować problemy z tagowaniem, ponieważ przepływ danych śledzenia jest nieprzewidywalny.

Sprawdzona metoda: zawsze utwórz instancję warstwy danych za pomocą window.dataLayer = window.dataLayer || []; raz na stronę, zwykle wysoko w sekcji <head> strony, przed fragmentem kodu Menedżera tagów Google lub gtag.js. Zawsze używaj dataLayer.push(), aby dodać kolejne zdarzenia lub zmienne. Nigdy nie zastępuj ani nie przypisuj ponownie zmiennej window.dataLayer.

Niestandardowe metody warstwy danych

Jeśli prześlesz funkcję do warstwy danych, zostanie ona wywołana z ustawieniem this ustawionym na abstrakcyjny model danych. Ten abstrakcyjny model danych może pobierać i ustawiać wartości w magazynie par klucz-wartość, a także umożliwia resetowanie warstwy danych.

Ważne: aby korzystać z niestandardowych metod warstwy danych, musisz używać funkcji .push do wysyłania danych bezpośrednio do zmiennej dataLayer. Jeśli użyjesz gtag, funkcja zostanie zinterpretowana jako nieprawidłowe polecenie i zignorowana.

zestaw

Funkcja set w abstrakcyjnym modelu danych umożliwia ustawianie wartości do pobrania za pomocą funkcji get.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

get

Funkcja get w abstrakcyjnym modelu danych umożliwia pobieranie ustawionych wartości.

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
});

zresetuj

Funkcja reset w abstrakcyjnym modelu danych umożliwia resetowanie danych w warstwie danych. Jest to najbardziej przydatne w przypadku strony, która pozostanie otwarta, a rozmiar warstwy danych będzie się z czasem zwiększać. Aby zresetować warstwę danych, użyj tego kodu:

window.dataLayer.push(function() {
  this.reset();
});