Warstwa danych

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

Jeśli np.uruchamiasz tag remarketingowy z wartością purchase_total większą niż 100 zł 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 wartościami zapewni dostęp do odpowiednich danych, gdy będą potrzebne Twoim tagom.

Instalacja

W przypadku instalacji tagów w witrynie musisz utworzyć warstwę danych. Podświetlony kod poniżej pokazuje, gdzie jest tworzona warstwa danych, czyli przed załadowaniem 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 przypadku niestandardowych implementacji 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 „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 następnej wiadomości.

Jeśli w kodzie strony, szablonie niestandardowym lub niestandardowym tagu HTML występuje wywołanie 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, możesz dodać nazwę zdarzenia do wiadomości przekazywanej do warstwy danych, a potem wykrywać 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ń 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 zanim wczytasz kontener Menedżera tagów, musisz zastosować interfejsy Tag Manager Consent API, aby skonfigurować domyślne zachowanie i zachowanie po aktualizacji. 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ływane przez to samo zdarzenie mają ten sam stan zgody.

Ważne: możesz użyć Menedżera tagów Google, aby 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 korzystają ze specjalnej zmiennej warstwy danych o nazwie event, która służy odbiornikom zdarzeń JavaScript do uruchamiania tagów, gdy użytkownik wchodzi w interakcję z elementami witryny. Tag śledzenia konwersji możesz na przykład uruchamiać, 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, przewinięcia itp.

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

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

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

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

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

Aby uchwycić informacje takie jak wartości wprowadzone lub wybrane w formularzu, metadane powiązane z odtwarzanym przez użytkownika filmem, kolor produktu (np.samochodu) dostosowany przez użytkownika, docelowe adresy URL klikniętych linków itp., możesz dynamicznie przesyłać zmienne warstwy danych do warstwy danych.

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 służąca do ustawiania zmiennych warstwy danych dynamicznych:

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 preferowanym kolorem, gdy użytkownik korzysta z narzędzia do personalizacji produktu, możesz przesłać tę zmienną warstwy danych dynamicznie:

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

Jeden komunikat, wiele zmiennych

Możesz przesyłać wiele zmiennych i zdarzeń jednocześnie:

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

Ważne: jeśli na warstwę danych prześlesz zmienną o tej samej nazwie co istniejąca zmienna, dotychczasowa wartość zostanie zastąpiona nową.

Zachowywanie zmiennych warstwy danych

Aby zachować zmienne warstwy danych między stronami internetowymi, po utworzeniu instancji warstwy danych przy każdym wczytaniu strony wywołaj funkcję dataLayer.push() i prześlij zmienne do warstwy danych. Jeśli chcesz, aby te zmienne warstwy danych były dostępne dla Menedżera tagów po załadowaniu kontenera, nad kodem kontenera Menedżera tagów dodaj wywołanie dataLayer.push(), 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 dostępna tylko dopóki 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 w Twojej witrynie. 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 o nazwie pageCategory, strony produktów i strony 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: gdy używasz bezpośrednio warstwy danych (np. dataLayer = [{'item': 'value'}])), zastąpi ona wszystkie istniejące wartości w polu dataLayer. Instalacje Menedżera tagów powinny tworzyć instancje warstwy danych jak najwyżej w kodzie źródłowym, powyżej fragmentu kodu kontenera, za pomocą window.dataLayer = window.dataLayer || [];. Po zadeklarowaniu elementu dataLayer możesz za jego pomocą dodawać do niego dodatkowe wartości. Jeśli wartości te mają być dostępne dla Menedżera tagów po załadowaniu strony, wywołanie elementu dataLayer.push() musi znajdować się nad kodem kontenera Menedżera tagów.dataLayer.push({'item': 'value'})

W nazwie obiektu dataLayer uwzględniana jest wielkość liter: jeśli spróbujesz przesłać zmienną lub zdarzenie bez odpowiedniej wielkości liter, przesyłanie się nie powiedzie.

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. Nazwy wszystkich zmiennych warstwy danych powinny być ujęte w cudzysłowie.

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

Zachowuj spójność 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ę konsekwentnie uruchamiać we wszystkich odpowiednich miejscach.

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 wolisz używać innej nazwy dla warstwy danych, możesz to zrobić, edytując wartość parametru warstwy danych w tagu Google lub fragmencie kodu kontenera Menedżera tagów, podając wybraną nazwę.

gtag.js

Dodaj do adresu URL parametr zapytania o nazwie „l”, aby ustawić nazwę nowej warstwy danych, np. l=myNewName. Zaktualizuj wszystkie wystąpienia wartości dataLayer w fragmentie kodu tagu Google, podając 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

Zastąp wartość parametru warstwy danych (zaznaczoną poniżej) w fragmentach kodu kontenera nazwą wybraną przez siebie.

Ważne: nie zastępuj wartości niewyróżnionych parametrów.

<!-- 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 nad fragmentem kodu lub podczas przesyłania zdarzeń lub zmiennych warstwy danych dynamicznych do warstwy danych za pomocą polecenia .push()) muszą zostać dostosowane do nazwy niestandardowej warstwy danych:

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

Uwaga: na stronie można użyć tylko 1 obiektu dataLayer.

Metody warstwy danych niestandardowych

Jeśli prześlesz funkcję na warstwę danych, będzie ona wywoływana z użyciem tego zestawu 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 używać niestandardowych metod warstwy danych, musisz użyć funkcji .push, aby bezpośrednio wysyłać dane do zmiennej dataLayer. Jeśli użyjesz funkcji gtag, zostanie ona zinterpretowana jako nieprawidłowe polecenie i ignorowana.

zestaw

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

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

get

Funkcja get w abstrakcyjnym modelu danych umożliwia pobieranie wartości, które zostały ustawione.

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 szczególnie przydatne w przypadku strony, która pozostanie otwarta, a jej warstwa danych będzie się z czasem powiększać. Aby zresetować warstwę danych, użyj tego kodu:

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