Warstwa danych

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

Jeśli na przykład uruchamiasz tag remarketingowy, gdy wartość purchase_total przekracza 100 USD lub na podstawie konkretnych zdarzeń (np. po kliknięciu przycisku), możesz skonfigurować warstwę danych tak, by udostępniała te dane Twoim tagom. Obiekt warstwy danych ma format 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 łatwy sposób odwoływać się do informacji dodanych do warstwy danych w uporządkowany i przewidywalny sposób zamiast analizować zmienne, informacje o transakcjach, kategorie stron i inne sygnały rozproszone na stronie. Implementacja warstwy danych wypełniona zmiennymi i powiązanymi z nimi wartościami pomoże zapewnić dostępność odpowiednich danych, gdy wymagają ich tagi.

Instalacja

W przypadku instalacji na stronach internetowych Menedżera tagów musisz utworzyć warstwę danych. Wyróżniony poniżej kod wskazuje, gdzie ustanowiono warstwę danych 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, przesyłany jest kod tworzący warstwę 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

Po załadowaniu kontenera Menedżer tagów zacznie przetwarzać wszystkie komunikaty push warstwy danych znajdujące się w kolejce. Menedżer tagów przetwarza wiadomości w kolejności ich otrzymania: każda wiadomość jest przetwarzana pojedynczo. Jeśli komunikat jest zdarzeniem, wszystkie tagi z warunkami reguły, które zostaną spełnione, uruchomią się, 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ść zostanie umieszczona w kolejce i przetworzona 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 dla następnego zdarzenia. Aby radzić sobie w takich przypadkach, dodaj nazwę zdarzenia do wiadomości przekazywanej do warstwy danych, a potem nasłuchuj nazwy 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 używaj 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ń uzyskiwania zgody w Menedżerze tagów. Ustawienia dotyczące uzyskiwania zgody muszą zostać zastosowane przed uruchomieniem 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. Zastosowanie interfejsów API Menedżera tagów do uzyskiwania zgody zapewnia przetwarzanie aktualizacji zgody przed elementami znajdującymi się w kolejce w warstwie danych, dzięki czemu wszystkie tagi uruchamiane przez to samo zdarzenie mają ten sam stan zgody użytkownika.

Ważne: za pomocą Asystenta tagów Google możesz sprawdzić stan warstwy danych w dowolnym momencie łańcucha zdarzeń.

Używanie warstwy danych z modułami 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 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, gdy użytkownik wchodzi w interakcję z elementami witryny, takimi jak linki, przyciski, przewinięcia itp.

Aby to zrobić, wywołaj funkcję dataLayer.push() po wystąpieniu zdarzenia. Składnia używana do wysyłania zdarzeń za pomocą funkcji dataLayer.push():

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

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

Używaj usługi dataLayer.push() do wysyłania danych zdarzenia, gdy występuje działanie, które chcesz mierzyć. Jeśli na przykład chcesz wysyłać zdarzenie, gdy użytkownik kliknie przycisk, zmień moduł obsługi onclick przycisku tak, by wywoływał dataLayer.push():

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

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

Podobnie jak w przypadku zdarzeń tę funkcję uzyskuje się przez wywołanie interfejsu API push() w celu dodania lub zastąpienia zmiennych warstwy danych w warstwie danych. Podstawowa składnia ustawiania zmiennych dynamicznej 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ó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.

Na przykład: aby ustawić zmienną warstwy danych z preferencjami kolorów, gdy użytkownik korzysta z narzędzia do dostosowywania produktu, możesz przekazać tę zmienną warstwy danych:

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

1 komunikat push, wiele zmiennych

Możesz przekazać wiele zmiennych i zdarzeń jednocześnie:

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

Ważne: jeśli przekażesz do warstwy danych zmienną o takiej samej nazwie jak istniejąca zmienna, nowa wartość zostanie zastąpiona nową wartością.

Utrwalaj zmienne warstwy danych

Aby zachować zmienne warstwy danych między stronami internetowymi, po utworzeniu warstwy danych przy każdym wczytaniu strony wywołaj funkcję dataLayer.push() i przekaż zmienne do warstwy danych. Jeśli chcesz, aby 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 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 obowiązywać, dopóki użytkownik pozostanie na bieżącej stronie. Zmienne warstwy danych istotne na różnych stronach (np. visitorType) muszą być zadeklarowane w warstwie danych na każdej stronie witryny. W warstwie danych na każdej stronie nie trzeba umieszczać tego samego zestawu zmiennych, ale należy zachować spójną konwencję nazewnictwa. Innymi słowy: jeśli na stronie rejestracji ustawisz kategorię strony za pomocą zmiennej pageCategory, strony produktów i zakupów również powinny 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: jeśli użyjesz bezpośrednio warstwy danych (np. dataLayer = [{'item': 'value'}]), spowoduje to zastąpienie wszystkich istniejących wartości w kolumnie dataLayer). Instalacje Menedżera tagów powinny tworzyć wystąpienia warstwy danych jak najwyżej w kodzie źródłowym, nad kodem kontenera, za pomocą funkcji window.dataLayer = window.dataLayer || [];. Po zadeklarowaniu obiektu dataLayer użyj dataLayer.push({'item': 'value'}), by dodać do niego dodatkowe wartości. Jeśli te wartości mają być dostępne dla Menedżera tagów po wczytaniu strony, wywołanie dataLayer.push() musi znajdować się także nad kodem kontenera Menedżera tagów.

W nazwie obiektu dataLayer rozróżniana jest wielkość liter: jeśli spróbujesz przekazać zmienną lub zdarzenie bez odpowiedniej wielkości liter, przekazanie się nie uda.

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

Funkcja dataLayer.push musi być wywoływana za pomocą prawidłowych obiektów JavaScript. Wszystkie nazwy zmiennych warstwy danych należy ująć w cudzysłów.

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

Zadbaj o spójność nazw zmiennych na różnych stronach: jeśli używasz różnych nazw zmiennych dla tej samej koncepcji na różnych stronach, tagi nie będą się uruchamiać jednak we wszystkich wybranych lokalizacjach.

Złe:

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

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

Dobra:

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

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

Zmiana nazwy warstwy danych

Domyślna nazwa obiektu warstwy danych zainicjowanego przez tag Google lub Menedżera tagów to dataLayer. Jeśli chcesz użyć innej nazwy warstwy danych, możesz zmienić wartość parametru warstwy danych w tagu Google lub kodzie kontenera Menedżera tagów, podając wybraną przez siebie nazwę.

gtag.js

Dodaj do adresu URL parametr zapytania o nazwie „l”, aby ustawić nazwę nowej warstwy danych, np. l=myNewName. Zmień nazwę wszystkich wystąpień dataLayer we fragmencie kodu tagu Google.

<!-- 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

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

Ważne: nie zastępuj wartości parametru bez wyróżnienia.

<!-- 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 odniesienia do warstwy danych (np. podczas deklarowania warstwy danych nad fragmentem, przekazywania zdarzeń lub zmiennych dynamicznej warstwy danych do warstwy danych za pomocą polecenia .push()) muszą zostać dostosowane tak, aby odzwierciedlały niestandardową nazwę warstwy danych:

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

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

Niestandardowe metody warstwy danych

Jeśli wypchniesz funkcję do warstwy danych, zostanie ona wywołana z tym zestawem danych jako 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ć metody .push, aby wysyłać dane bezpośrednio do zmiennej dataLayer. Jeśli użyjesz metody gtag, zostanie ona zinterpretowana jako nieprawidłowe polecenie i ignorowana.

zestaw

Funkcja set w abstrakcyjnym modelu danych umożliwia ustawienie wartości do pobierania za pomocą metody 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 stron, które pozostaną otwarte, a rozmiar warstwy danych będzie się z czasem rozrastać. Aby zresetować warstwę danych, użyj tego kodu:

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