Die Datenschicht

Die Datenschicht ist ein Objekt, über das Google Tag Manager und gtag.js Informationen in Tags. Ereignisse oder Variablen können über die Datenschicht übergeben werden. können Trigger auf Basis der Werte von Variablen eingerichtet werden.

Wenn Sie z. B. ein Remarketing-Ereignis wenn der Wert von purchase_total größer als 100 $ist, oder auf Basis des Bestimmte Ereignisse, z.B. wenn auf eine Schaltfläche geklickt wird, so konfiguriert, dass diese Daten für Ihre Tags verfügbar sind. Das Datenschichtobjekt ist die als JSON strukturiert sind. Beispiel:

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

Google-Tags sind so konzipiert, dass sie leicht auf Informationen verweisen können, die in der in einer strukturierten und vorhersehbaren Weise erstellt, anstatt durch Variablen, Transaktionsinformationen, Seitenkategorien und andere verstreute Signale auf Ihrer Seite. Eine Datenschichtimplementierung mit Variablen und damit verknüpfte Werte helfen, sicherzustellen, dass relevante Daten verfügbar sind, wenn Ihr Tags benötigen sie.

Installation

Damit Sie die Tag Manager-Webseite installieren können, müssen Sie eine Datenschicht erstellen. Die Der hervorgehobene Code zeigt, wo die Datenschicht eingerichtet wird, vor dem Tag. Manager wurde geladen.

<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 -->

in standardmäßigen gtag.js-Implementierungen, bei denen das Tag das Produkt hinzugefügt und einer Webseite hinzugefügt wurde, ist der Code zum Erstellen der Datenschicht bereitgestellt. Fügen Sie bei benutzerdefinierten Implementierungen des Google-Tags den Datenschichtcode hinzu. am Anfang des Skripts hinzu, wie im folgenden Beispiel gezeigt:

<!-- 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>

So werden Informationen in Datenschichten verarbeitet

Nachdem ein Container geladen wurde, werden in Tag Manager alle Daten in der Warteschlange verarbeitet. Push-Nachrichten zu Ebenen. In Tag Manager werden Nachrichten nach dem First-In-First-Out-Prinzip verarbeitet. Basis: Jede Nachricht wird einzeln in der Reihenfolge verarbeitet, in der sie eingegangen ist. Wenn die Nachricht ein Ereignis ist, also alle Tags mit Triggerbedingungen, die erfüllt sind wird ausgelöst, bevor in Tag Manager mit der nächsten Meldung fortgefahren wird.

Wenn ein gtag()- oder dataLayer.push()-Aufruf durch Code auf einer Seite erfolgt, müssen Sie in einem benutzerdefinierten oder in einem benutzerdefinierten HTML-Tag, wird die zugehörige Nachricht in die Warteschlange verarbeitet werden, nachdem alle anderen ausstehenden Nachrichten ausgewertet wurden. Das bedeutet, dass alle sind die aktualisierten Werte für die Datenschicht nicht immer für das nächste Ereignis verfügbar. In solchen Fällen sollten Sie einer Nachricht einen Ereignisnamen hinzufügen, an die Datenschicht gesendet und dann auf den Ereignisnamen benutzerdefinierte Ereignistrigger

Datenschicht mit Event-Handlern verwenden

Das dataLayer-Objekt verwendet einen event-Befehl, um das Senden von Ereignissen zu initiieren.

Das Google-Tag und Tag Manager verwenden eine spezielle Datenschichtvariable namens event, das von JavaScript-Event-Listenern verwendet wird, um Tags auszulösen, wenn ein Nutzer mit Website-Elementen interagiert. Sie möchten z. B. eine Conversion auslösen, Tracking-Tag erfasst, wenn ein Nutzer auf eine Schaltfläche zur Kaufbestätigung klickt. Ereignisse können aufgerufen, wenn Nutzende mit Website-Elementen wie Links, Schaltflächen, Scrollen usw.

Hierzu wird dataLayer.push() aufgerufen, wenn ein Ereignis erfolgt. Die Syntax zum Senden eines Ereignisses mit dataLayer.push() lautet so:

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

Dabei ist event_name ein String, der das Ereignis beschreibt, z. B. 'login'. purchase oder search.

Mit dataLayer.push() können Sie Ereignisdaten senden, wenn eine von Ihnen gewünschte Aktion eintritt zu messen. Um beispielsweise ein Ereignis zu senden, wenn ein Nutzer auf eine Schaltfläche klickt, ändern Sie den onclick-Handler der Schaltfläche zum Aufrufen von dataLayer.push():

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

Sie können Datenschichtvariablen dynamisch an die Datenschicht übergeben, um Informationen wie in einem Formular eingegebene oder ausgewählte Werte, Metadaten, mit einem Video, das sich der Besucher ansieht, der Farbe eines Produkts (z.B. eines Autos) die durch den Besucher angepasst werden, die Ziel-URLs von angeklickten Links usw.

Wie bei Ereignissen wird diese Funktionalität durch Aufrufen der push() API erreicht um Datenschichtvariablen in der Datenschicht hinzuzufügen oder zu ersetzen. Die grundlegende Syntax für So legen Sie dynamische Datenschichtvariablen fest:

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

Dabei ist 'variable_name' ein String, der den Namen der Datenschicht angibt festzulegende Variable und 'variable_value' ist eine Zeichenfolge, die den Wert die festzulegende oder zu ersetzende Datenschichtvariable.

Beispiel: Sie können eine Datenschichtvariable mit einer Farbeinstellung festlegen, mit einem Tool zur Produktanpassung interagiert, können Sie Datenschichtvariable:

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

Ein Push, mehrere Variablen

Sie können mehrere Variablen und Ereignisse gleichzeitig senden:

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

Datenschichtvariablen beibehalten

Um die Datenschichtvariablen zwischen Webseiten beizubehalten, rufen Sie danach dataLayer.push() auf. dass die Datenschicht bei jedem Laden der Seite instanziiert wurde. mit der Datenschicht verknüpfen. Wenn diese Datenschichtvariablen für das Taggen wenn der Container geladen wird, fügen Sie einen dataLayer.push()-Aufruf oberhalb des Tag Manager-Containercode wie unten gezeigt.

<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 -->

Jede im Datenschichtobjekt deklarierte Variable bleibt nur so lange bestehen, wie bleibt der Besucher auf der aktuellen Seite. Relevante Datenschichtvariablen auf verschiedenen Seiten (z. B. visitorType) muss auf jeder Seite in der Datenschicht deklariert werden. Seite Ihrer Website. Auch wenn Sie nicht denselben Satz Variablen die Datenschicht auf jeder Seite verwenden, sollten Sie eine einheitliche Namenskonvention verwenden. In Mit anderen Worten: Wenn Sie die Seitenkategorie auf der Anmeldeseite mithilfe einer Variablen pageCategory aufgerufen haben, sollten Ihre Produkt- und Kaufseiten das pageCategory ebenfalls.

Fehlerbehebung

Im Folgenden finden Sie einige Tipps zur Fehlerbehebung bei Datenschichten:

Überschreiben Sie die Variable window.dataLayer nicht:Wenn Sie die Daten verwenden, Ebene direkt hinzufügen (z.B. mit dataLayer = [{'item': 'value'}]) werden alle vorhandene Werte in dataLayer. Bei Tag Manager-Installationen sollten Die Datenschicht so weit oben wie möglich über dem Container Snippet mit window.dataLayer = window.dataLayer || []; verwenden. Nachdem dataLayer deklariert wurde, verwenden Sie dataLayer.push({'item': 'value'}), um weitere Werte hinzuzufügen, und wenn diese müssen die Werte für Tag Manager verfügbar sein, wenn die Seite geladen wird. dataLayer.push()-Aufruf muss sich oberhalb des Tag Manager-Containercodes befinden: gut.

Beim dataLayer-Objektnamen wird zwischen Groß- und Kleinschreibung unterschieden: Wenn Sie versuchen, eine Variable oder Ereignis ohne passendes Gehäuse, funktioniert das Drücken nicht.

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

dataLayer.push muss mit gültigen JavaScript-Objekten aufgerufen werden. Alle Datenschicht Variablennamen in Anführungszeichen gesetzt werden.

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

Achten Sie auf einheitliche Variablennamen auf allen Seiten:Wenn Sie unterschiedliche Variablen verwenden, auf verschiedenen Seiten nach dem gleichen Konzept suchen, können Ihre Tags immer an allen gewünschten Orten ausgelöst werden.

Schlecht:

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

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

Gut:

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

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

Datenschicht umbenennen

Der Standardname des Datenschichtobjekts, der vom Google-Tag oder Tag Manager ist dataLayer. Falls Sie für Ihr Konto einen anderen Namen verwenden möchten, können Sie den Parameterwert der Datenschicht in Ihrem Google-Tag oder Tag Manager-Container-Snippet mit dem Namen Ihrer Wahl.

<!-- 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>

<!-- 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 -->

Nach der Umbenennung werden alle Verweise auf die Datenschicht (bei der Deklaration der Daten) oberhalb des Snippets oder beim Senden von Ereignissen oder dynamischen Datenschichtvariablen mit dem Befehl .push()) angepasst werden, um Ihre Benutzerdefinierter Name der Datenschicht:

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

Benutzerdefinierte Datenschichtmethoden

Wenn Sie eine Funktion per Push an die Datenschicht übertragen, wird sie mit diesem Wert aufgerufen: ein abstraktes Datenmodell. Dieses abstrakte Datenmodell kann Werte für einen Schlüssel abrufen und festlegen Wertspeicher und bietet außerdem eine Möglichkeit, die Datenschicht zurückzusetzen.

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

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

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