Warstwę 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ć za pomocą warstwy danych, a reguły można konfigurować na podstawie wartości zmiennych.

Jeśli np.wywołasz tag remarketingowy, gdy wartość purchase_total przekracza 100 USD lub zależy od konkretnych zdarzeń, np. kliknięcia przycisku, możesz skonfigurować warstwę danych tak, aby dane były dostępne dla Twoich tagów. Obiekt warstwy danych ma strukturę JSON. 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 odwoływać się do informacji dodawanych do warstwy danych w uporządkowany i przewidywalny sposób, a nie do analizowania zmiennych, informacji o transakcjach, kategorii strony i innych sygnałów rozproszonych po całej stronie. Implementacja z użyciem warstwy danych, która zawiera zmienne i powiązane z nimi wartości, pomaga zapewnić, że odpowiednie tagi będą zawsze dostępne, gdy tagi będą ich potrzebować.

Montaż

W przypadku instalacji na stronie internetowej Menedżera tagów musisz utworzyć warstwę danych. Wyróżniony kod poniżej pokazuje, gdzie została utworzona warstwa 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, gdzie tag został skopiowany z usługi i dodany do strony internetowej, dostarczany jest kod służący do utworzenia warstwy danych. W niestandardowych implementacjach tagu Google dodaj kod warstwy danych na początku skryptu, tak jak pokazano w 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 umieszczone w kolejce. Menedżer tagów przetwarza wiadomości przy użyciu tej operacji: Jeśli wiadomość jest zdarzeniem, wszystkie tagi z warunkami, które zostały spełnione, zostaną uruchomione, zanim Menedżer tagów przejdzie na następną wiadomość.

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ść jest dodawana do kolejki i przetwarzana 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, musisz dodać nazwę zdarzenia do wiadomości przekazywanej do warstwy danych, a potem nasłuchiwać 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 te muszą zostać zastosowane przed wywołaniem odpowiednich tagów w kontenerze Menedżera tagów, więc aby skonfigurować domyślne i aktualne działanie, musisz zastosować interfejsy Tag Manager Consent API. Użycie interfejsów API Menedżera tagów do uzyskiwania zgody na przetwarzanie danych zapewnia przetwarzanie aktualizacji dotyczących zgody przed elementami umieszczonymi w kolejce w warstwie danych, dzięki czemu wszystkie tagi wywoływane przez to samo zdarzenie mają ten sam stan zgody.

Ważne: stan swojego warstwy danych możesz sprawdzić w narzędziu 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ó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 za każdym razem, gdy użytkownik wchodzi w interakcję z elementami witryny, takimi jak linki, przyciski, przewijanie itp.

Tę funkcję pełni funkcja dataLayer.push(), gdy następuje zdarzenie. Składnia służąca do wysyłania zdarzeń z dataLayer.push():

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

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

Aby wysyłać dane o zdarzeniu, które chcesz zmierzyć, korzystaj z dataLayer.push(). Jeśli na przykład chcesz wysyłać zdarzenie, gdy użytkownik kliknie przycisk, zmodyfikuj jego moduł obsługi onclick tak, by wywoływał metodę dataLayer.push():

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

Zmienne warstwy danych można dynamicznie przekazywać do warstwy danych, aby rejestrować informacje takie jak wartości wprowadzone w formularzu lub ich metadane, metadane powiązane z filmem odtwarzanym przez użytkownika, kolor produktu (np. samochodu) i dostosowany przez użytkownika, docelowe adresy URL klikniętych linków.

Tak jak w przypadku zdarzeń, funkcję tę wykonuje się przez interfejs API push(), który pozwala dodawać lub zastępować zmienne warstwy danych w warstwie danych. Podstawowa składnia dynamicznych zmiennych warstwy danych wygląda tak:

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

Gdzie 'variable_name' to ciąg znaków określający nazwę zmiennej warstwy danych, którą chcesz ustawić, a 'variable_value' to ciąg znaków określający wartość zmiennej warstwy danych, która ma zostać ustawiona lub zastąpiona.

Aby np. ustawić zmienną warstwy danych z preferowanym kolorem, gdy użytkownik korzysta z narzędzia do dostosowywania produktów, możesz przekazać tę zmienną dynamiczną:

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

Jeden wypychanie, wiele zmiennych

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

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

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

Zachowuj zmienne warstwy danych

Aby zachować zmienne warstwy danych między stronami internetowymi, wywołaj dataLayer.push() po utworzeniu warstwy danych przy każdym wczytaniu strony i przekaż zmienne do warstwy danych. Jeśli chcesz, aby 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, 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ć tak długo, jak użytkownik pozostanie na bieżącej stronie. Zmienne warstwy danych istotne na wszystkich stronach (np. visitorType) muszą być zadeklarowane w warstwie danych na każdej stronie w witrynie. Chociaż nie musisz umieszczać tego samego zestawu zmiennych w warstwie danych na każdej stronie, użyj spójnej konwencji nazewnictwa. Oznacza to, że 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, jak rozwiązywać problemy 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 wartości znajdujące się w polu dataLayer). Instalacje Menedżera tagów powinny utworzyć instancję warstwy danych jak najwyżej w kodzie źródłowym, nad fragmentem kodu kontenera lub dowolnym fragmentem kodu ukrywającego strony za pomocą tagu window.dataLayer = window.dataLayer || [];. Po zadeklarowaniu tagu dataLayer dodaj do niego dodatkowe wartości, używając tagu dataLayer.push({'item': 'value'}). Jeśli podczas wczytywania strony te wartości muszą być dostępne dla Menedżera tagów, to wywołanie dataLayer.push() musi też znajdować się 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, push nie zadziała.

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

Tag dataLayer.push musi być wywoływany za pomocą prawidłowych obiektów 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 na różnych stronach używasz różnych nazw zmiennych na tej samej zasadzie, Twoje tagi nie będą działać w niektórych miejscach.

Zły:

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

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

Dobry:

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

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

Zmień nazwę warstwy danych

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

gtag.js

Dodaj do adresu URL parametr zapytania o nazwie „l”, aby ustawić nazwę nowej warstwy danych, np. l=myNewName. Wszystkie wystąpienia dataLayer we fragmencie kodu tagu Google muszą zawierać 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 kodzie kontenera swoją wybraną nazwą.

Ważne: nie zastąp wartości niepodświetlonej.

<!-- 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 powyżej fragmentu kodu lub przekazywania zdarzeń lub zmiennych warstwy danych dynamicznych do warstwy danych za pomocą polecenia .push()) trzeba dostosować do nazwy niestandardowej warstwy danych:

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

Uwaga: na każdej stronie obsługiwanych jest tylko jeden obiekt dataLayer.

Metody niestandardowych warstwy danych

Jeśli przekażesz funkcję do warstwy danych, zostanie ona wywołana z tym zestawem do abstrakcyjnego modelu danych. Ten abstrakcyjny model danych może pobierać i ustawiać wartości dla magazynu par klucz-wartość, a także umożliwia resetowanie warstwy danych.

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

Ustaw

Funkcja set w abstrakcyjnym modelu danych umożliwia ustawienie wartości do pobrania.

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 {
    // ...
  }
})

resetuj

Funkcja reset w abstrakcyjnym modelu danych umożliwia resetowanie danych w warstwie danych. Jest to szczególnie przydatne w przypadku stron, które pozostaną otwarte, a rozmiar warstwy danych będzie z czasem rosnąć. Aby zresetować warstwę danych, użyj tego kodu:

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