Warstwa danych

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

Na przykład: jeśli uruchomisz remarketing , gdy wartość purchase_total jest większa niż 100 USD lub na podstawie metody konkretne zdarzenia, np. kliknięcie przycisku umożliwia utworzenie warstwy danych skonfigurowane pod kątem udostępniania tych danych Twoim tagom. Obiekt warstwy danych to 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 umieszczanych w tagu w uporządkowany i przewidywalny sposób, a nie przez analizę zmienne, informacje o transakcjach, kategorie stron i inne sygnały rozproszone na całej stronie. Implementacja warstwy danych wypełniona zmiennymi powiązane wartości pomogą zapewnić, że odpowiednie dane będą dostępne, gdy tagów, które ich wymagają.

Instalacja

W przypadku instalacji na stronach internetowych Menedżera tagów musisz utworzyć warstwę danych. zaznaczony poniżej kod wskazuje, gdzie ustanowiono warstwę danych – przed tagiem; Menedżer został wczytany.

<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, z których tag został skopiowany i dodany do strony internetowej, kod tworzący warstwę danych to podany. W niestandardowych implementacjach tagu Google dodaj kod warstwy danych na początku skryptu, tak jak w tym 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 dane znajdujące się w kolejce. i wysyłanie wiadomości push. Menedżer tagów przetwarza komunikaty przesyłane w pierwszej kolejności. podstaw: każda wiadomość jest przetwarzana pojedynczo, w kolejności ich odebrania. Jeśli wiadomość to zdarzenie, wszystkie tagi z warunkami reguły, które zostały spełnione zostanie uruchomiony, zanim Menedżer tagów przejdzie do następnej wiadomości.

Jeśli wywołanie gtag() lub dataLayer.push() jest wykonywane za pomocą kodu na stronie, w sekcji niestandardowej W szablonie lub niestandardowym tagu HTML powiązana wiadomość jest umieszczona w kolejce i przetworzone po sprawdzeniu wszystkich pozostałych oczekujących wiadomości. Oznacza to, że każdy nie ma gwarancji, że zaktualizowane wartości warstwy danych będą dostępne dla następnego zdarzenia. Aby to zrobić, dodaj do wiadomości nazwę zdarzenia. zostały przekazane do warstwy danych, a następnie nasłuchuj nazwy zdarzenia za pomocą funkcji Custom Aktywator zdarzeń.

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. Ponieważ trzeba zastosować ustawienia dotyczące uzyskiwania zgody przed uruchomieniem odpowiednich tagów w kontenerze Menedżera tagów musisz zastosować Tag API do uzyskiwania zgody menedżera do konfigurowania domyślnego i aktualizowania działania. Korzystanie z tagu Tag Interfejsy API do uzyskiwania zgody menedżera zapewniają, że aktualizacje dotyczące zgody są przetwarzane przed umieszczeniem w kolejce elementów w warstwie danych, dzięki czemu wszystkie tagi wywoływane przez to samo zdarzenie będą widzieć stanu zgody użytkownika.

Ważne: do sprawdzenia stanu danych możesz użyć rozszerzenia Google Tag Assistant. 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óry jest używany przez detektory zdarzeń JavaScript do uruchamiania tagów, gdy użytkownik wchodzić w interakcje z elementami witryny. Na przykład chcesz uruchomić konwersję śledzenia, gdy użytkownik kliknie przycisk potwierdzenia zakupu. Zdarzenia mogą być gdy użytkownik wchodzi w interakcję z elementami witryny, takimi jak linki, przyciski przewijanie treści itd.

Jest to możliwe przez wywołanie metody dataLayer.push() w przypadku zdarzenia ma miejsce. Składnia używana do wysyłania zdarzeń za pomocą funkcji dataLayer.push():

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

Gdzie event_name jest ciągiem opisującym zdarzenie, np. 'login', purchase lub search.

Używaj usługi dataLayer.push(), aby wysyłać dane zdarzenia, gdy chcesz wykonać działanie do pomiaru. Aby na przykład wysłać zdarzenie, gdy użytkownik kliknie przycisk, zmodyfikuj moduł obsługi onclick przycisku wywołujący dataLayer.push():

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

Można dynamicznie przekazywać zmienne warstwy danych do warstwy danych, aby rejestrować takie jak wartości wpisane lub wybrane w formularzu, metadane powiązane wyświetlając film odtwarzany przez użytkownika, kolor produktu (np.samochodu). dostosowane przez użytkownika, docelowe adresy URL klikniętych linków itp.

Podobnie jak w przypadku zdarzeń tę funkcję uzyskuje się przez wywołanie interfejsu API push(). aby dodać lub zastąpić zmienne warstwy danych w warstwie danych. Podstawowa składnia funkcji ustawienie zmiennych dynamicznej warstwy danych jest następujące:

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

Gdzie 'variable_name' jest ciągiem znaków wskazującym nazwę warstwy danych zmiennej do ustawienia, a 'variable_value' to ciąg znaków wskazujący wartość zmienną warstwy danych, która ma zostać ustawiona lub zastąpiona.

Przykład: aby ustawić zmienną warstwy danych z preferowanymi kolorami, gdy użytkownik wejdzie w interakcję z narzędziem do dostosowywania produktu, możesz umieścić zmiennej 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 zmienną o tej samej nazwie co istniejąca do warstwy danych, obecna wartość zostanie zastąpiona przez nową wartość.

Utrwalaj zmienne warstwy danych

Aby zachować zmienne warstwy danych między stronami internetowymi, wywołaj funkcję dataLayer.push() po przy każdym wczytaniu strony powstaje warstwa danych i przekazuje zmienne do warstwy danych. Jeśli chcesz, by te zmienne warstwy danych były dostępne dla tagów Menedżer po wczytaniu kontenera dodaj wywołanie dataLayer.push() nad tagiem Kod 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 widoczna tak długo, użytkownik pozostaje na bieżącej stronie. Odpowiednie zmienne warstwy danych na wszystkich stronach (np. visitorType) muszą być zadeklarowane w warstwie danych przy każdej stronę w witrynie. Nie trzeba wprawdzie umieszczać tego samego zestawu zmiennych w warstwie danych na każdej stronie, należy stosować spójną konwencję nazewnictwa. W Innymi słowy: jeśli na stronie rejestracji ustawisz kategorię strony za pomocą zmiennej pageCategory, na stronach produktów i zakupów powinien być używany atrybut 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 danych bezpośrednio (np. dataLayer = [{'item': 'value'}]) spowoduje zastąpienie wszystkich istniejące wartości w dataLayer. Instalacje Menedżera tagów powinny zostać utworzone warstwa danych jak najwyżej w kodzie źródłowym, nad kontenerem, fragment kodu za pomocą funkcji window.dataLayer = window.dataLayer || [];. Po zadeklarowaniu wartości dataLayer użyj dataLayer.push({'item': 'value'}), aby dodać do niej dodatkowe wartości, a jeśli te wartości muszą być dostępne dla Menedżera tagów po załadowaniu strony, Wywołanie dataLayer.push() musi być nad kodem kontenera Menedżera tagów jako cóż.

W nazwie obiektu dataLayer rozróżniana jest wielkość liter: jeśli próbujesz przekazać zmienną lub w przypadku wystąpienia zdarzenia bez odpowiedniej wielkości liter, wypychanie jej 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 za pomocą prawidłowych obiektów JavaScript. Cała warstwa danych zmienne 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

Zadbaj o spójność nazw zmiennych na różnych stronach: jeśli używasz różnych zmiennych, jednakowej koncepcji na różnych stronach, tagi nie będą w stanie regularnie uruchamiał się we wszystkich żądanych 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 zainicjowana przez tag Google lub Menedżer tagów jest dataLayer. Jeśli wolisz użyć innej nazwy dla swojego warstwy danych, edytując wartość parametru warstwy danych w sekcji tag Google lub fragment kodu kontenera Menedżera tagów z wybraną przez siebie 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 parametru dataLayer w tagu Google z 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 w kontenerze wartość parametru warstwy danych (wyróżnioną poniżej) z 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 odwołania do warstwy danych (tzn. podczas deklarowania danych) warstwy nad fragmentem kodu lub przy wypychaniu zdarzeń bądź zmiennych dynamicznej warstwy danych do warstwy danych za pomocą polecenia .push()) musi zostać dostosowany tak, aby nazwa niestandardowej 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 ustawieniem abstrakcyjny model danych. Ten abstrakcyjny model danych może pobierać i ustawiać wartości klucza do magazynu wartości, a także umożliwia zresetowanie warstwy danych.

Ważne: aby korzystać z niestandardowych metod warstwy danych, musisz używać .push do wysyła dane bezpośrednio do zmiennej dataLayer. Jeśli korzystasz z usługi gtag, funkcja zostanie zinterpretowana jako nieprawidłowe polecenie i ignorowana.

zestaw

Funkcja set w abstrakcyjnym modelu danych umożliwia ustawienie wartości do pobierania przez „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 pozwala zresetować dane w warstwy danych. Jest to najbardziej przydatne, gdy strona pozostanie otwarta, a dane będą rozmiar warstwy wciąż rośnie. Aby zresetować warstwę danych, użyj funkcji ten kod:

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