Warstwa danych

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

Jeśli np.wywołujesz tag remarketingu, gdy wartość purchase_total jest większa niż 100 PLN, lub na podstawie konkretnych zdarzeń, np. gdy klikniesz przycisk, 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 zostały zaprojektowane tak, aby w uporządkowany i przewidywalny sposób odwoływać się do informacji dodawanych do warstwy danych, a nie analizować zmienne, informacje o transakcjach, kategorie stron i inne sygnały rozproszone po stronie. Implementacja warstwy danych wypełniona zmiennymi i powiązanymi z nimi wartościami pomoże Ci zadbać o to, aby odpowiednie dane były dostępne, gdy będą potrzebne tagom.

Instalacja

W przypadku instalacji na stronach internetowych Menedżera tagów musisz utworzyć warstwę danych. Wyróżniony poniżej kod pokazuje, gdzie jest tworzona warstwa danych, zanim zostanie wczytany Menedżer 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 wdrożeniach tagu gtag.js, w których tag został skopiowany z usługi i dodany do strony internetowej, podany jest kod do utworzenia warstwy danych. W niestandardowych implementacjach tagu Google dodaj kod warstwy danych na początku skryptu, jak pokazano w wyróżnionym przykładzie poniżej:

<!-- 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');
</script>

Sposób przetwarzania informacji z warstwy danych

Gdy kontener zostanie wczytany, Menedżer tagów rozpocznie przetwarzanie wszystkich znajdujących się w kolejce wiadomości push warstwy danych. Menedżer tagów przetwarza wiadomości w kolejności „pierwsze na wejściu, pierwsze na wyjściu”: każda wiadomość jest przetwarzana pojedynczo, w kolejności, w jakiej została odebrana. Jeśli wiadomość jest zdarzeniem, wszystkie tagi, których warunki wywołania zostały spełnione, zostaną uruchomione, zanim Menedżer tagów przejdzie do kolejnej wiadomości.

Jeśli w kodzie strony, szablonie niestandardowym lub niestandardowym tagu HTML występuje wywołanie gtag() lub dataLayer.push(), powiązana wiadomość jest umieszczana w kolejce i przetwarzana po sprawdzeniu wszystkich pozostałych oczekujących wiadomości. Oznacza to, że nie możemy zagwarantować, że zaktualizowane wartości warstwy danych będą dostępne na potrzeby następnego zdarzenia. Aby radzić sobie z takimi sytuacjami, dodaj nazwę zdarzenia do wiadomości przekazywanej do warstwy danych, a potem wykrywaj nazwę tego zdarzenia za pomocą reguły zdarzenia niestandardowego.

Ważne: nie wdrażaj kodu opartego na tagu gtag.js za pomocą niestandardowych tagów HTML. Zamiast tego skorzystaj z natywnych szablonów Menedżera tagów dla Google Ads, Analytics i Floodlight.

Ważne: nie używaj tagów niestandardowego kodu HTML do konfigurowania ustawień uzyskiwania zgody w Menedżerze tagów. Ustawienia te muszą zostać zastosowane przed wywołaniem odpowiednich tagów w kontenerze Menedżera tagów, dlatego aby skonfigurować domyślne i aktualizowane działanie, musisz zastosować interfejsy Tag Manager Consent API. Korzystanie z interfejsów API Menedżera tagów dotyczących zgody użytkownika zapewnia, że aktualizacje stanu zgody są przetwarzane przed elementami znajdującymi się w kolejce w warstwie danych, dzięki czemu wszystkie tagi wywołane przez to samo zdarzenie widzą ten sam stan zgody użytkownika.

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

Używanie warstwy danych z procedurami obsługi zdarzeń

Obiekt dataLayer używa polecenia event do inicjowania wysyłania zdarzeń.

Tag Google i Menedżer tagów używają specjalnej zmiennej warstwy danych o nazwie event, która jest używana przez odbiorniki 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ływanie funkcji dataLayer.push(), gdy wystąpi zdarzenie. Składnia wysyłania zdarzenia z parametrem dataLayer.push() jest taka:

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 zdarzeń, gdy nastąpi działanie, które chcesz zmierzyć. Aby na przykład wysyłać zdarzenie, gdy użytkownik kliknie przycisk, zmodyfikuj moduł obsługi onclick przycisku, aby wywoływać dataLayer.push():

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

Możesz dynamicznie umieszczać w warstwie danych zmienne 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) dostosowanego przez użytkownika, docelowe adresy URL klikniętych linków itp.

Podobnie jak w przypadku zdarzeń, ta funkcja jest realizowana przez wywoływanie interfejsu push() API w celu dodawania lub zastępowania zmiennych warstwy danych w warstwie danych. Podstawowa składnia ustawiania dynamicznych zmiennych warstwy danych jest następująca:

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

gdzie 'variable_name' to ciąg znaków wskazujący nazwę zmiennej warstwy danych, która ma zostać ustawiona, a 'variable_value' to ciąg znaków wskazujący wartość zmiennej warstwy danych, która ma zostać ustawiona lub zastąpiona.

Przykład: aby ustawić zmienną warstwy danych z preferencjami kolorystycznymi, gdy odwiedzający korzysta z narzędzia do dostosowywania produktu, możesz przesłać tę dynamiczną zmienną warstwy danych:

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

Jedno przesłanie, wiele zmiennych

Możesz przesłać kilka zmiennych i zdarzeń jednocześnie:

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

Ważne: jeśli do warstwy danych przekażesz zmienną o nazwie takiej samej jak nazwa istniejącej zmiennej, dotychczasowa wartość zostanie zastąpiona nową.

Utrzymywanie trwałości zmiennych warstwy danych

Aby zachować zmienne warstwy danych między stronami internetowymi, wywołaj funkcję 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 podczas wczytywania kontenera, dodaj wywołanie dataLayer.push() nad kodem kontenera Menedżera tagów, jak pokazano poniżej.

<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 utrzymywana tylko tak długo, jak długo użytkownik pozostaje 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 powinieneś używać spójnej konwencji nazewnictwa. Inaczej mówiąc: jeśli na stronie rejestracji ustawisz kategorię strony za pomocą zmiennej o nazwie pageCategory, na stronach produktu i zakupu również powinna być używana zmienna pageCategory.

Rozwiązywanie problemów

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

Nie zastępuj zmiennej window.dataLayer: jeśli używasz warstwy danych bezpośrednio (np. dataLayer = [{'item': 'value'}])), zastąpisz wszystkie dotychczasowe wartości w dataLayer. Instalacje Menedżera tagów powinny tworzyć instancję warstwy danych jak najwyżej w kodzie źródłowym, powyżej fragmentu 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ę również powyżej kodu kontenera Menedżera tagów.

W nazwie obiektu dataLayer rozróżniana jest wielkość liter: jeśli spróbujesz przesłać zmienną lub zdarzenie bez odpowiedniej wielkości liter, przesyłanie 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 JavaScriptu. 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ą się uruchamiać w sposób spójny we wszystkich wybranych lokalizacjach.

Nieprawidłowo:

// 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'});

Zmień nazwę warstwy danych

Domyślna nazwa obiektu warstwy danych zainicjowanego przez tag Google lub Menedżera tagów to dataLayer. Jeśli wolisz używać innej nazwy warstwy danych, możesz to zrobić, edytując wartość parametru warstwy danych w kodzie kontenera tagu Google lub Menedżera tagów i zastępując ją wybraną nazwą.

gtag.js

Dodaj do adresu URL parametr zapytania o nazwie „l”, aby ustawić nową nazwę warstwy danych, np. l=myNewName. Zaktualizuj wszystkie wystąpienia argumentu dataLayer w fragmencie kodu tagu Google, zastępując je nową nazwą.

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

  gtag('config', 'TAG_ID');
</script>

Menedżer tagów

W fragmencie kodu kontenera zastąp wartość parametru warstwy danych (wyróżnioną poniżej) 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 -->

Po zmianie nazwy wszystkie odwołania do warstwy danych (np. podczas deklarowania warstwy danych powyżej fragmentu 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>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Uwaga: na stronie obsługiwany jest tylko jeden obiekt dataLayer.

Niestandardowe metody warstwy danych

Jeśli umieścisz funkcję w warstwie danych, zostanie ona wywołana z tym ustawieniem 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 używać niestandardowych metod warstwy danych, musisz użyć funkcji .push do bezpośredniego wysyłania danych 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 zresetowanie 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();
})