Warstwa danych

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

Jeśli np.uruchamiasz tag remarketingowy, gdy wartość purchase_total jest większa niż 100 USD, lub na podstawie określonych 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 są zaprojektowane tak, aby łatwo odwoływać się do informacji dodawanych 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 po stronie. Implementacja warstwy danych wypełniona zmiennymi i powiązanymi wartościami pomoże zapewnić dostępność odpowiednich danych, gdy będą one potrzebne tagom.

Instalacja

W przypadku instalacji Menedżera tagów na stronie internetowej musisz utworzyć warstwę danych. Podświetlony poniżej kod pokazuje, gdzie tworzona jest 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 implementacjach tagu gtag.js, w których tag został skopiowany z usługi i dodany do strony internetowej, udostępniany jest kod tworzący warstwę danych. W niestandardowych implementacjach tagu Google dodaj kod warstwy danych na początku skryptu, jak pokazano w podświetlonym 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 zacznie przetwarzać wszystkie znajdujące 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 jej otrzymania. 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 następnej wiadomości.

Jeśli w kodzie strony, szablonie niestandardowym lub niestandardowym tagu HTML występują jakieś wywołania metody gtag() lub dataLayer.push(), powiązana wiadomość trafi do kolejki i zostanie przetworzona dopiero po sprawdzeniu 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 niestandardowych tagów HTML do konfigurowania ustawień zgody w Menedżerze tagów. Ustawienia te muszą zostać zastosowane przed wywołaniem odpowiednich tagów w kontenerze Menedżera tagów, dlatego zanim wczytasz kontener Menedeżera tagów musisz zastosować interfejsy Tag Manager Consent API, aby skonfigurować domyślne działanie i aktualizacje. Korzystanie z interfejsów Tag Manager Consent API zapewnia, że aktualizacje stanu zgody są przetwarzane przed elementami znajdującymi się w kolejce w warstwie danych, dzięki czemu wszystkie tagi uruchamiane przez to samo zdarzenie widzą ten sam stan zgody.

Ważna uwaga: za pomocą rozszerzenia Google Tag Assistant możesz w dowolnym momencie sprawdzić stan warstwy danych w łańcuchu zdarzeń.

Korzystanie z warstwy danych z obsługą 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 uruchomić 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, przewijanie itp.

Ta funkcja jest realizowana przez wywołanie dataLayer.push() po wystąpieniu zdarzenia. Składnia wysyłania zdarzenia za pomocą dataLayer.push() jest następująca:

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 np. wysłać zdarzenie, gdy użytkownik kliknie przycisk, zmodyfikuj obsługę onclick przycisku, aby wywoływała 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, adresy URL miejsc docelowych 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 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 kolorów, gdy użytkownik korzysta z narzędzia do dostosowywania produktu, możesz przekazać następującą 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 przekazujesz do warstwy danych zmienną o takiej samej nazwie jak istniejąca zmienna, nowa wartość zastąpi dotychczasową.

Utrzymywanie zmiennych warstwy danych

Aby utrzymać zmienne warstwy danych między stronami internetowymi, wywołaj dataLayer.push() po utworzeniu instancji warstwy danych przy każdym wczytaniu strony i przekazuj 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 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 pozostanie na bieżącej stronie. Zmienne warstwy danych, które są istotne na wszystkich 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 warto stosować spójną konwencję nazewnictwa. Innymi słowy, jeśli ustawisz kategorię strony na stronie rejestracji za pomocą zmiennej o nazwie pageCategory, strony produktu i zakupu 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: jeśli używasz warstwy danych bezpośrednio (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 po wczytaniu strony, wywołanie dataLayer.push() musi znajdować się również nad kodem kontenera Menedżera tagów również.

W nazwie obiektu dataLayer jest rozróżniana wielkość liter: 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)

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

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

Zachowaj spójność nazw zmiennych na wszystkich stronach: jeśli na różnych stronach używasz różnych nazw zmiennych dla tej samej koncepcji, tagi nie będą mogły się uruchamiać w sposób spójny we wszystkich wybranych 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'});

Zmiana nazwy 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 tagu Google lub we fragmencie kodu kontenera Menedżera tagów i wpisując wybraną nazwę.

gtag.js

Aby ustawić nową nazwę warstwy danych, dodaj do adresu URL parametr zapytania o nazwie „l”, np. l=myNewName. Zaktualizuj wszystkie wystąpienia dataLayer we fragmencie kodu tagu Google, aby używały nowej nazwy.

<!-- 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 (podświetloną poniżej) we fragmencie kodu kontenera wybraną nazwą.

**Ważne:** _nie_ zastępuj wartości parametru, która nie jest podświetlona.

<!-- 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 (tzn. 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>
  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 przekazujesz funkcję do warstwy danych, zostanie ona wywołana z 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 używać niestandardowych metod warstwy danych, musisz użyć dataLayer aby wysyłać dane bezpośrednio do zmiennej ..push Jeśli używasz gtag, funkcja zostanie zinterpretowana jako nieprawidłowe polecenie i zignorowana.

zestaw

Funkcja set w abstrakcyjnym modelu danych umożliwia ustawianie wartości, które można pobierać 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();
})