Praxisguide
Dieser Praxisguide unterstützt Sie dabei, einen Datalayer in Ihre Website und Ihren Onlineshop zu integrieren, wie er beispielsweise für ein Tag-Management-System wie den Google Tag Manager benötigt wird.
Dieser Praxisguide zeigt Ihnen anhand vieler Beispiele, wie ein Datalayer funktioniert und welche Daten Sie dort zur Verfügung stellen sollten.
Autor
Julian Kleinknecht
Sie haben sich also dafür entschieden, ein Tag-Management-System (TMS) auf Ihrer Website einzuführen. Um das Tool nutzenbringend einzusetzen, müssen Sie mindestens diese Schritte umsetzen.
Dieses Praxisguide thematisiert den zweiten, und sicherlich aufwendigsten, Schritt im Detail. Diese Themen werden besprochen:
Alle Kapitel sind so verfasst, dass Sie Ihren eigenen Data Layer auf der Basis dieses Praxisguides entwickeln können. Viele Kapitel können Sie einfach in Ihre Anleitung für die IT kopieren.
An manchen Stellen dient der Google Tag Manager Beispiel. Das Konzept des Data Layer ist jedoch in jedem professionellen Tag-Management-System ähnlich umgesetzt. Die Überlegungen in diesem Praxisguide sind also auch auf andere Tools anwendbar.
Ein korrekt implementierter Data Layer ist für diese beiden Bereiche hilfreich:
Einer der größten Vorteile eines Tag-Management-Systems ist die gewonnene Unabhängigkeit des Marketings von der IT-Abteilung. Diese muss Tags nun nicht mehr nach einer aufwendig erstellten Anleitung implementieren. Stattdessen können Tags in der Benutzeroberfläche des Tag-Management-Systems angelegt werden.
Um ein neues Tag zu implementieren, – egal ob direkt auf der Seite oder durch das TMS – werden diese drei Informationen benötigt:
Woher bekommen Sie aber diese drei Informationen? Den JavaScript-Code des Tags erhalten Sie einmalig von dem entsprechenden Toolanbieter. Das Festlegen der Regeln und Parameter ist dagegen oft komplizierter. Um zum Beispiel die oben angesprochene Regel auf allen Produktdetailseiten zu definieren, müssen Sie festlegen, wie sich eine Produktdetailseite von allen anderen Seiten unterscheidet.
Hierzu kann auf diese beiden Quellen zurückgegriffen werden:
Die Regel auf allen Produktdetailseiten kann beispielsweise so definiert werden, dass sie zutrifft, wenn die URL den Bestandteil „product“ enthält wie in shop.de/product/beispielprodukt.html. Der Parameter Warenkorbwert des Conversion-Tags auf der Vielen-Dank-Seite könnte beispielsweise in der JavaScript-Variable basketValue enthalten sein, die sowieso schon im Quelltext der Vielen-Dank-Seite vorhanden ist.
Diese Vorgehensweise, Ausspielregeln und Parameter zu definieren, hat jedoch einige Nachteile, die auch mit einem TMS nicht behoben werden:
Deshalb wird ein Data Layer benötigt. Dieser enthält alle benötigten Informationen an einer zentralen Stelle und einer einheitlichen Struktur. Auf jeder Seite einer Website sind dann die Informationen verfügbar, ob es sich bei der Seite um eine Produktdetailseite handelt oder nicht. Innerhalb des Tag-Management-Systems kann jeder Zeit auf diese Informationen zugegriffen werden.
Die Informationen im Data Layer können nicht nur zu Definition der gerade angesprochenen Regeln dienen, sondern eignen sich auch hervorragend zum Targeting bzw. zur Personalisierung Ihrer Website.
Im Data Layer könnte sich die Information befinden, dass der aktuelle Besucher schon 4 Mal im Online-Shop bestellt hat, dass jedes Mal Produkte für Männer erworben wurden und dass der Warenkorbwert bei durchschnittlich 201,23 EUR lag. Auf Basis dieser Informationen könnten Sie ihm auf der Startseite Teaser für hochpreisige Männermode anpreisen.
Aber wie sieht ein solcher Data Layer denn nun eigentlich aus? Im Endeffekt ist es ein einziges JavaScript-Objekt, das alle relevanten Informationen enthält und auf jeder Seite einer Website vorhanden ist. In diesem Kapitel werden die Eigenschaften dieses JavaScript-Objekt näher erläutert.
Das JavaScript-Objekt kann wie folgt definiert werden:
<script>
dataLayer = [{
‚Variable‘: ‚Wert‘
}];
</script>
Dies ist die Konvention des Google Tag Managers.
Für andere Tag-Management-Systeme (hier für Qubit) kann das Objekt auch einen anderen Namen tragen und anders definiert sein:
<script>
window.universal_variable = {
page: {
category: "Home"
}
}
</script>
Natürlich kann das JavaScript-Objekt auch mehr als ein Paar von Eigenschaften und entsprechenden Werten enthalten.
<script>
dataLayer = [{
‚Eigenschaft1‘: ‚Wert1‘,
‚Eigenschaft2‘: ‚Wert2‘,
‚Eigenschaft3‘: ‚Wert3‘
}];
</script>
Auch auf conversionboosting.com ist ein Data Layer für den Google Tag Manager implementiert. Mithilfe der Entwickler-Tools der gängigen Browser lässt sich der Data Layer komfortabel betrachten.
Auf dieser Seite enthält der Data Layer nur ein einziges Element: ist der Besucher eingeloggt (1) oder nicht (0)?
Auf die einzelnen Eigenschaften des JavaScript-Objekts kann mithilfe dieses Befehls zugegriffen werden:
dataLayer[0].Eigenschaft1 // Ausgabe: Wert1
In der Benutzeroberfläche des Tag-Management-Systems müssen Sie jedoch kein JavaScript einsetzen, sondern können einfach die Namen der Variablen eintragen. Im letzten Kapitel dieses Praxisguides zeigen wir, wie dies für den Google Tag Manager funktioniert.
Das JavaScript-Objekt wird von der IT-Abteilung erstellt und dynamisch befüllt. Es gibt zwei Zeitpunkte, wann dies geschieht.
Zu diesen Zeitpunkten werden in den meisten Fällen verschiedene Informationen in den Data Layer geschrieben.
Dieser Weg wurde im vorigen Unterkapitel 3.1 ausführlich beschrieben. Mit Hilfe von server-seitigen Programmiersprachen wie PHP oder Python befüllt die IT-Abteilung das JavaScript-Objekt.
Unter der Annahme, dass der Login-Status des Besuchers in der PHP-Variable $user_status gespeichert ist, könnten dies so aussehen:
<script>
dataLayer = [{
‚logedin‘: ‚<?php echo $user_status; ?>‘
}];
</script>
Nachdem eine Seite schon geladen wurde, sind es vor allem vom Besucher verursachte Ereignisse, die in den Data Layer geschrieben werden sollen.
Beispiele für solche Ereignisse sind:
Tatsächlich können mithilfe des Google Tag Managers genau diese vier Kategorien an Ereignissen ohne Tagging der Seite automatisch aufgezeichnet werden.
Ereignisse, die durch obige Kategorien nicht abgedeckt werden, können manuell mit der JavaScript-Funktion push() in den Data Layer geschrieben werden. Ein Klick auf einen Link könnte beispielsweise auf diese Weise in den Data Layer geschrieben werden:
<a href="#" onclick="dataLayer.push({‚event‘: ‚klick‘});">Link</a>
Der Google Tag Manager befüllt den Data Layer außerdem standardmäßig mit diesen drei Ereignissen:
Es ist besonders wichtig, dass der Data Layer vor dem Container-Tag im Quelltext zu finden sein muss. Nur dann stehe die im Data Layer vorhandenen Informationen auch für Parameter, Ausspielregeln und zum Targeting zur Verfügung.
Wenn andere Tools, die nicht per Tag Manager eingebunden werden können, auch Zugriff auf den Data Layer haben sollen, stellen Sie sicher, dass der Data Layer auch vor diesen Tags eingebaut wird.
Die richtige Reihenfolge der Einbindung sieht dann so aus:
Wie in Kapitel 2 beschrieben, müssen nicht alle Informationen, die in Tags, Ausspielregeln oder zum Targeting verwendet werden sollen, in den Data Layer geschrieben werden. Stattdessen kann auch auf die URL oder den Quelltext der Seite verwiesen werden.
Doch wie entscheidet man, welche Informationen in den Data Layer geschrieben werden sollen und welche direkt aus der Seite übernommen werden können? Wir empfehlen diesen Grundsatz zu verwenden:
Schreiben Sie alle Informationen in den Data Layer, die sich im Zuge von Veränderungen
an der Website oder eines Relaunches ändern könnten.
Dies führt dazu, dass die meisten Informationen in der Tat in den Data Layer geschrieben werden müssen. Eine Ausnahme bilden diese vier Informationen, die nicht in den Data Layer geschrieben werden müssen:
Diese Informationen können – auch nach Veränderungen an der Website – mit diesen JavaScript-Befehlen ausgegeben werden:
Dieses Kapitel beschreibt Möglichkeiten, welche Informationen in den Data Layer eines Online-Shops geschrieben werden können. Zu jeder Information geben wir Beispiele, wie diese eingesetzt werden können.
Nicht alle Vorschläge sind jedoch für jeden Online-Shop sinnvoll. Wenn Sie der Meinung sind, dass eine Variable nie verwendet werden wird, dann sollten Sie darauf verzichten, diese in den Data Layer zu integrieren. Auf diese Weise ersparen Sie sich selbst und der IT-Abteilung unnötige Arbeit.
Alle Eigenschaften des Data Layer können prinzipiell beliebig gewählt werden. Manche Tag-Management-Systeme schreiben jedoch bestimmte Namen vor. Im Google Tag Manager trifft dies ausschließlich auf die Eigenschaften auf der Vielen-Dank-Seite zu. Wenn diese den Vorgaben entsprechen, wird das E-Commerce-Tracking von Google Analytics automatisch mit den richtigen Werten befüllt.
pageCategory
Schreiben Sie in diese Variable die Kategorie der aktuellen Seite. Dies könnte zum Beispiel sein:
Weisen Sie die IT darauf hin, dass die Art der Seite in vielen Fällen an dem verwendeten Template zu identifizieren ist.
Die Information ist besonders zur Definition von Ausspielregeln von Tags sowie für das Targeting von Website-Tests relevant.
breadcrumb
Bilden Sie in dieser Variable die Breadcrumb-Navigation der aktuellen Seite ab. Dies könnte beispielsweise auf einer Produktdetailseite wie folgt lauten:
Herrenmode > Anzüge > Anzugshosen > Armani Baukastenhose
Auf einer Seite im Checkout könnte diese Variable so befüllt werden:
Checkout > Zahlungsarten
Wenn, wie auf einer Suchergebnisseite, keine Breadcrumb-Navigation vorhanden ist, lassen Sie die Variable leer.
Wie auch die pageCategory eignet sich diese Information vor allem zu Targeting. Wollen Sie zum Beispiel auf allen Kategorieseiten für Anzüge einen neuen Ratgeber zur Auswahl eines passenden Anzugs bewerben, können Sie mithilfe des Data Layers ganz einfach und ohne Hilfe der IT tun.
Diese Eigenschaften der Besucher können vor allem für das Targeting verwendet werden, um verschiedenen Besuchergruppen andere Waren und/oder Kategorien anzubieten.
Natürlich erhalten Sie Zugriff auf den Namen und die Anzahl der Käufe nur, wenn sich der Besucher eingeloggt hat.
firstName, lastName
Diese Informationen sind nützlich, wenn Besucher persönlich angesprochen werden sollen. Achten Sie jedoch unbedingt auf den Datenschutz. Personenbezogene Daten wie diese dürfen Sie beispielsweise nicht in Ihrem Webanalyse-Tool speichern.
countVisits
Die Anzahl der bisherigen Besuche des Besuchers. Alle Werte über 0 entsprechen einem wiederkehrenden Besucher.
countPurchases
Wie viele Bestellungen hat der Besucher schon getätigt? Alle Werte über 0 entsprechen einem Bestandskunden.
Ähnlich wie Informationen über den Besucher lassen sich auch Informationen über den Warenkorb und dessen Inhalt einsetzen, um die Website zu personalisieren. Hier einige Beispiele
basketCount
Die Anzahl der Produkte im Warenkorb.
basketCurrency
Die gewählte Währung des Besuchers. Als Abkürzungen empfehlen sich die ISO-4217-Norm: u.a. EUR, USD, CHF oder GBP. Wie für alle anderen Zahlen sollten Dezimalwerte durch einen Punkt – kein Komma – getrennt werden
basketSubtotal
Der Warenkorbwert, einschließlich Steuern, aber ohne Promotions, Gutscheine oder Versandkosten.
basketTax
Die anfallende Mehrwertsteuer.
basketShipping
Versandkosten in der gleichen Währung wie die Preise.
basketShippingMethod
Beispiele für die Versandmethode sind „DH“, „DHL Express“ oder „UPS“.
basketVoucherValue
Der Wert des angewendeten Gutscheins, falls vorhanden.
basketPromotionValue
Manche Online-Shops unterscheiden zwischen Gutscheinen (für die Gutschein-Codes benötigt werden) und Promotions, die automatisch auf Produkte oder Produktkategorien angewandt werden.
basketTotal
Der Warenkorbwert einschließlich Steuern und Versandkosten, abzüglich Gutscheinen und Promotions.
basketProducts
Diese Variable soll wiederum Variablen und entsprechende Werte enthalten – jeweils eine für jedes verschiedene Produkt im Warenkorb. Falls das gleiche Produkt mehrmals im Warenkorb liegt, soll nur ein Objekt dafür erstellt werden.
Diese Variablen sind möglich, um ein einzelnes Produkt weiter zu bestimmen:
| id | Eindeutige Nummer im Shop-System |
| name | Name des Produkts |
| brand | Hersteller des Produkts |
| category | Kategorie im Shop, zum Beispiel „Herrenmode“ |
| subcategory | Unterkategorie, beispielsweise „Anzüge“ |
| price | Preis inkl. Steuer |
| sku | SKU-Code |
| stock | Anzahl des Artikel auf Lager |
| color | Die Farbe des Artikels |
| size | Größe des Artikels |
| quantity |
Anzahl des Produkts im Warenkorb |
Zusammenfassend kann das in diesem Unterkapitel beschriebene Gerüst des Data Layers, das seitenübergreifend implementiert werden soll, so aussehen (in der Konvention des Google Tag Managers):
<script>
dataLayer = [{
‚pageCategory‘ : ‚category‘,
‚breadcrumb‘ : [{
‚0‘ : ‚herren‘,
‚1‘ : ‚anzüge‘,
‚2‘ : ‚anzugshosen‘
}],
‚firstName‘ : ‚Max‘,
‚lastName ‚ : ‚Mustermann‘,
‚countVisits‘ : 2,
‚countPurchases‘ : 1,
‚basketCount‘ : 2,
‚basketCurrency‘ : ‚EUR‘,
‚basketSubtotal‘ : ‚160.25‘,
‚basketTax‘ : ‚30.45‘,
‚basketShippingMethod‘ : ‚DHL‘,
‚basketShipping‘ : 5,
‚basketVoucherValue‘ : 0,
‚basketPromotionValue‘ : 0,
‚basketTotal‘ : ‚165.25‘,
‚basketProducts‘ : [{
‚id‘ : ‚12345‘,
’name‘ : ‚Nike Sneaker ABC‘,
‚brand‘ : ‚Nike‘,
‚category‘ : ‚Herren‘,
’subcategory‘ : ‚Schuhe‘,
‚price‘ : 100.00,
’sku‘ : ‚98765‘,
’stock‘ : 23,
‚color‘ : ‚blue‘,
’size‘ : ’42‘,
‚quantity‘ : 1
},{
‚id‘ : ‚34567‘,
’name‘ : ‚Levis 501‘,
‚brand‘ : ‚Levis‘,
‚category‘ : ‚Herren‘,
’subcategory‘ : ‚Jeans‘,
‚price‘ : 60.00,
’sku‘ : ‚87654‘,
’stock‘ : 5,
‚color‘ : ‚blue‘,
’size‘ : ’34-34′,
‚quantity‘ : 1
}]
}];
</script>
Auf Produktdetailseiten ist es sinnvoll, die gleichen Informationen in den Data Layer zu integrieren, wie es gerade seitenübergreifend für den Inhalt des Warenkorbs beschrieben wurde. Das heißt der Data Layer auf der Produktdetailseite zur Levis 501-Jeans wird wie folgt erweitert:
’size‘ : ’34-34′,
‚quantity‘ : 1
}],
‚productId‘ : ‚34567‘,
‚productName‘ : ‚Levis 501‘,
‚productBrand‘ : ‚Levis‘,
‚productCategory‘ : ‚Herren‘,
‚productSubcategory‘ : ‚Jeans‘,
‚productPrice‘ : 60.00,
‚prodcutSku‘ : ‚87654‘,
‚productStock‘ : 5,
‚productColor‘ : ‚blue‘,
‚productSize‘ : ’34-34′,
‚productQuantity‘ : 1
}];
</script>
Zu welchem Zwecke können diese Informationen auf der Produktdetailseite nun eingesetzt werden? Hier einige Beispiele:
Auf Kategorieseiten ist es, wie auch auf Produktdetailseiten, sinnvoll die Produktkategorie sowie etwaige Subkategorien in den Data Layer zu schreiben.
’size‘ : ’34-34′,
‚quantity‘ : 1
}],
‚category‘ : ‚Herren‘,
’subcategory‘ : ‚Jeans‘
}];
</script>
Auf der Seite der Suchergebnisse ist es sinnvoll, die folgenden Informationen in den Data Layer zu schreiben. Sie alle sollten an das Webanalyse-Tool übergeben werden, um die Interaktion der Besucher mit der internen Suche zu analysieren.
siteSearchTerm
Nach welchem Begriff ha der Besucher gesucht? Dies wird entweder in einem URL-Parameter übergeben oder per POST übertragen.
siteSearchResults
Wie viele Ergebnisse hat die Suchanfrage erzielt?
siteSearchCategory
Falls in verschiedenen Kategorien gesucht werden kann, kann auch diese Information in den Data Layer geschrieben werden.
siteSearchPOST
Oft wird in Werbekampagnen oder Teaser auf der eigenen Website auf die Suchergebnisseite verlinkt. Auf diese Weise muss, vor allem für generische Suchbegriffe, keine eigene Landing Page erstellt werden. Diese Besuche stellen jedoch keine Verwendung der internen Suche dar und sollten daher nicht in die entsprechende Statistik aufgenommen werden.
Falls das Formular tatsächlich per POST abgeschickt wurde (die interne Suche also wirklich verwendet wurde), dann sollte die Variable den Wert 1 tragen. Wenn nicht, dann den Wert 0.
Hier der Data Layer für Suchergebnisseite im Überblick:
Auf der Vielen-Dank-Seite sollten statt den Variablen des Warenkorbs nun andere Variablen mit Informationen über den Kauf befüllt werden. Im Endeffekt wird in den folgenden Variablennamen der Ausdruck „basket“ durch „transaction“ ersetzt. Dies führt zu diesem Data Layer:
‚countVisits‘ : 2,
‚countPurchases‘ : 1,
‚transactionCurrency‘ : ‚EUR‘,
‚transactionSubtotal‘ : ‚160.25‘,
‚transactionTax‘ : ‚30.45‘,
‚transactionShippingMethod‘ : ‚DHL‘,
‚transactionShipping‘ : 5,
‚transactionVoucherValue‘ : 0,
‚transactionPromotionValue‘ : 0,
‚transactionTotal‘ : ‚165.25‘,
‚transactionProducts‘ : [{
‚id‘ : ‚12345‘,
’name‘ : ‚Nike Sneaker ABC‘,
‚brand‘ : ‚Nike‘,
‚category‘ : ‚Herren‘,
’subcategory‘ : ‚Schuhe‘,
‚price‘ : 100.00,
’sku‘ : ‚98765‘,
’stock‘ : 23,
‚color‘ : ‚blue‘,
’size‘ : ’42‘,
‚quantity‘ : 1
},{
‚id‘ : ‚34567‘,
’name‘ : ‚Levis 501‘,
‚brand‘ : ‚Levis‘,
‚category‘ : ‚Herren‘,
’subcategory‘ : ‚Jeans‘,
‚price‘ : 60.00,
’sku‘ : ‚87654‘,
’stock‘ : 5,
‚color‘ : ‚blue‘,
’size‘ : ’34-34′,
‚quantity‘ : 1
}]
}];
</script>
Wichtig: Jede Transaktion sollte eine eindeutige ID besitzen. Diese sollten den Namen „transactionId“ tragen, um von Google Analytics automatisch erkannt zu werden.
Zusätzlich sind noch folgende Informationen nützlich, um das Kaufverhalten im Webanalyse-Tool besser zu verstehen.
transactionPaymentType
Mögliche Werte sind etwa „Paypal“, „Kreditkarte“ oder „Überweisung“.
transactionCity, transactionZIP, transactionCountry
Statt sich auf die ungenauen Daten des Webanalyse-Tools zu verlassen, sollten Sie bei der Analyse der Käufer auf deren tatsächliche Adressdaten setzen.
