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 można przekazywać w warstwie danych, a reguły można konfigurować na podstawie wartości zmiennych.

Jeśli np.uruchamiasz tag remarketingowy, gdy wartość purchase_total przekracza 100 USD lub jest uzależniony od konkretnych zdarzeń, np. kliknięcia przycisku, możesz skonfigurować warstwę danych tak, by udostępnić 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 w taki sposób, aby łatwo 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 w warstwie danych wypełniona zmiennymi i powiązanymi z nimi wartościami pomaga zagwarantować, że odpowiednie dane będą dostępne wtedy, gdy tagi ich potrzebują.

Instalacja

W przypadku instalacji stron internetowych Menedżera tagów musisz utworzyć warstwę danych. Zaznaczony poniżej kod pokazuje, gdzie powstaje warstwa danych 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, udostępniany jest kod określający warstwę danych. W niestandardowych implementacjach tagu Google dodaj kod warstwy danych na początku skryptu, tak jak w tym zaznaczonym przykładzie:

<!-- 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 wczytaniu kontenera Menedżer tagów zacznie przetwarzać wszystkie komunikaty push warstwy danych umieszczone w kolejce. Menedżer tagów przetwarza wiadomości na zasadzie „pierwszej”, „pierwszej”: każda wiadomość jest przetwarzana pojedynczo, w kolejności ich otrzymania. Jeśli komunikat jest zdarzeniem, wszystkie tagi z spełnionymi warunkami reguły 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ść 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 na potrzeby następnego zdarzenia. Aby radzić sobie z takimi sytuacjami, dodaj do wiadomości nazwę zdarzenia przekazywanej do warstwy danych, a potem nasłuchuj nazwy tego zdarzenia za pomocą reguły zdarzenia niestandardowego.

Ważne: do wdrażania kodu opartego na tagu gtag.js nie używaj 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 dotyczące zgody użytkownika muszą zostać zastosowane przed uruchomieniem odpowiednich tagów w kontenerze Menedżera tagów, dlatego musisz zastosować interfejsy API Menedżera tagów do uzyskiwania zgody, aby skonfigurować domyślne i aktualne działanie. Korzystanie z interfejsów Tag Manager Consent API sprawia, że aktualizacje dotyczące 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: za pomocą rozszerzenia Google Tag Assistant możesz sprawdzać 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. Jest ona wykorzystywana przez detektory zdarzeń JavaScript do uruchamiania tagów, gdy użytkownik wchodzi w interakcję z elementami witryny. Możesz np. uruchamiać tag śledzenia konwersji, gdy użytkownik kliknie przycisk potwierdzenia zakupu. Zdarzenia mogą być wywoływane przy każdej interakcji użytkownika z elementami witryny, takimi jak linki, przyciski, przewijanie itp.

Jest to możliwe dzięki wywołaniu dataLayer.push() w momencie wystąpienia zdarzenia. Składnia używana do wysyłania zdarzeń za pomocą metody dataLayer.push():

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

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

Używaj funkcji dataLayer.push(), aby wysyłać dane zdarzenia, gdy wystąpi działanie, które chcesz mierzyć. Jeśli chcesz np. wysyłać zdarzenie po kliknięciu przycisku przez użytkownika, zmień moduł obsługi onclick przycisku tak, aby wywoływał metodę dataLayer.push():

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

Zmienne warstwy danych możesz dynamicznie przekazywać do warstwy danych, aby rejestrować takie informacje, jak wartości wpisane 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.

Tak jak w przypadku zdarzeń, tę funkcję osiąga 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 do ustawienia, a 'variable_value' to ciąg znaków wskazujący wartość zmiennej warstwy danych do ustawienia lub zastąpienia.

Przykład: aby ustawić zmienną warstwy danych z preferencją koloru, gdy użytkownik wejdzie w interakcję z narzędziem do dostosowywania produktów, możesz przekazać tę dynamiczną zmienną warstwy danych:

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

1 komunikat, wiele zmiennych

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

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

Ważne: jeśli przeniesiesz do warstwy danych zmienną o tej samej nazwie co istniejąca zmienna, obecna wartość zostanie zastąpiona nową.

Utrwal zmienne warstwy danych

Aby utrwalić zmienne warstwy danych między stronami internetowymi, wywołaj funkcję dataLayer.push() po utworzeniu wystąpienia warstwy danych przy każdym wczytaniu strony i przekaż zmienne do warstwy danych. Jeśli chcesz, by 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 w podany niżej sposób.

<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ć 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. Chociaż nie musisz umieszczać tego samego zestawu zmiennych w warstwie danych na każdej stronie, zachowaj spójną konwencję nazewnictwa. Innymi słowy: jeśli ustawisz kategorię strony na stronie rejestracji 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: gdy używasz warstwy danych bezpośrednio (np. dataLayer = [{'item': 'value'}]), zastąpi ona wszelkie istniejące wartości w tabeli 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ą funkcji window.dataLayer = window.dataLayer || [];. Po zadeklarowaniu właściwości dataLayer użyj funkcji dataLayer.push({'item': 'value'}), aby dodać do niej dodatkowe wartości. Jeśli te wartości muszą być dostępne dla Menedżera tagów podczas wczytywania strony, wywołanie dataLayer.push() musi również znajdować się nad kodem kontenera Menedżera tagów.

W nazwie obiektu dataLayer wielkość liter ma znaczenie: jeśli próbujesz przekazać zmienną lub zdarzenie bez odpowiedniej wielkości liter, operacja wypchnięcia się nie uda.

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

Interfejs dataLayer.push musi zostać wywołany 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

Zadbaj o spójność nazw zmiennych na różnych stronach: jeśli dla tego samego zagadnienia na różnych stronach używasz różnych nazw zmiennych, tagi nie będą się uruchamiać spójnie we wszystkich wymaganych lokalizacjach.

Zły:

// 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ślną nazwą obiektu warstwy danych zainicjowanego przez tag Google lub Menedżera tagów jest dataLayer. Jeśli chcesz używać innej nazwy warstwy danych, możesz ją zmienić, wpisując dowolną nazwę parametru warstwy danych w tagu Google lub kodzie kontenera Menedżera tagów.

gtag.js

Dodaj do adresu URL parametr zapytania o nazwie „l”, aby ustawić nową nazwę warstwy danych, np. l=myNewName. Zaktualizuj wszystkie wystąpienia parametru dataLayer we fragmencie 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 (wyróżnioną poniżej) w kodzie kontenera wybraną nazwą.

Ważne: nie zastępuj niezaznaczonej wartości parametru.

<!-- 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 (tj. podczas deklarowania warstwy danych nad fragmentem kodu lub przekazywania zdarzeń bądź zmiennych dynamicznej warstwy danych do warstwy danych za pomocą polecenia .push()) trzeba dostosować tak, aby odzwierciedlały nazwę niestandardowej warstwy danych:

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

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

Metody niestandardowej warstwy danych

Jeśli przekażesz funkcję do warstwy danych, zostanie ona wywołana z tym zestawem 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 zresetowanie warstwy danych.

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

Ustaw

Funkcja set w abstrakcyjnym modelu danych umożliwia ustawianie wartości pobieranych przez metodę 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 powiększał. Aby zresetować warstwę danych, użyj tego kodu:

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