In diesem Leitfaden wird beschrieben, wie Sie Universal Analytics-Funktionen für erweiterte E-Commerce-Berichte mit Google Tag Manager auf einer Website implementieren.
Überblick
Mit erweiterten E-Commerce-Berichten von Google Analytics können Daten zu Produktimpressionen, Werbeaktionen und Verkäufe zusammen mit allen Seitenaufrufen und Ereignissen in Google Analytics gesendet werden. Über Seitenaufrufe können Sie Produktimpressionen und Produktkäufe erfassen. Über Ereignisse können Sie Bezahlschritte und Produktklicks erfassen.
Vorbereitung
Wir empfehlen Ihnen, den Abschnitt Datentypen und Aktionen für erweiterte E-Commerce-Berichte im Entwicklerleitfaden für erweiterte E-Commerce-Berichte zu lesen, um Ihre Implementierung zu planen. In diesem Leitfaden erfahren Sie, welche Felder für die einzelnen E-Commerce-Interaktionen, die Sie messen möchten, erforderlich und optional sind.
Erweiterte E-Commerce-Berichte aktivieren
In den meisten Implementierungen sollten Sie erweiterte E-Commerce-Berichte für jeden Seitenaufruf oder jedes Ereignis-Tag in Universal Analytics aktivieren. Sie haben zwei Möglichkeiten, erweiterte E-Commerce-Berichte im Tag-Editor der Weboberfläche zu aktivieren:
- Über die Datenschicht implementieren (empfohlen)
- Implementierung mit einem benutzerdefinierten JavaScript-Makro
Beide Methoden bieten gleichwertige E-Commerce-Funktionen. Wir empfehlen jedoch, für alle Websites, die eine Datenschicht unterstützen, die Datenschichtmethode zu verwenden. In diesem Leitfaden wird die Datenschichtmethode als Standard beschrieben. Benutzerdefinierte JavaScript-Makros verwenden ist am Ende dieses Leitfadens dokumentiert.
Datenschicht verwenden
In den folgenden Abschnitten erfahren Sie, wie Sie mithilfe der Datenschicht die folgenden erweiterten E-Commerce-Aktivitäten messen:
- Produktimpressionen
- Produktklicks
- Produktdetailimpressionen
- Zum Warenkorb hinzufügen / entfernen
- Werbeimpressionen
- Klicks auf die Werbung
- Kasse
- Käufe
- Erstattungen
E-Commerce-Objekt löschen
Es wird empfohlen, das E-Commerce-Objekt mit dem folgenden Befehl zu löschen, bevor ein E-Commerce-Ereignis an die Datenschicht gesendet wird. Durch das Löschen des Objekts wird verhindert, dass sich mehrere E-Commerce-Ereignisse auf einer Seite gegenseitig beeinflussen.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
Produktimpressionen messen
- E-Commerce-Messung:
impressions - Akzeptiert Daten: Array von
impressionFieldObjects
Produktimpressionen mit der Aktion impression und einer oder mehreren impressionFieldObjects messen. Im folgenden Beispiel wird davon ausgegangen, dass Details zu den auf einer Seite angezeigten Produkten zum Zeitpunkt des Ladens der Seite bekannt sind:
<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'currencyCode': 'EUR', // Local currency is optional.
'impressions': [
{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'list': 'Search Results',
'position': 1
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'list': 'Search Results',
'position': 2
}]
}
});
</script>
Produktklicks messen
- E-Commerce-Messung:
click - Akzeptiert Daten:
list, Array mitproductFieldObjects
Erfassen Sie Klicks auf Produktlinks, indem Sie eine click-Aktion an die Datenschicht und eine productFieldObject zur Darstellung des angeklickten Produkts senden. Beispiel:
<script>
/**
* Call this function when a user clicks on a product link. This function uses the event
* callback datalayer variable to handle navigation after the ecommerce data has been sent
* to Google Analytics.
* @param {Object} productObj An object representing a product.
*/
function(productObj) {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'productClick',
'ecommerce': {
'click': {
'actionField': {'list': 'Search Results'}, // Optional list property.
'products': [{
'name': productObj.name, // Name or ID is required.
'id': productObj.id,
'price': productObj.price,
'brand': productObj.brand,
'category': productObj.cat,
'variant': productObj.variant,
'position': productObj.position
}]
}
},
'eventCallback': function() {
document.location = productObj.url
}
});
}
</script>
Aufrufe von Produktdetails messen
- E-Commerce-Messung:
detail - Akzeptiert Daten:
list, Array mitproductFieldObjects
Messen Sie eine Ansicht der Produktdetails. Dazu übergeben Sie die Aktion detail an die Datenschicht und ein oder mehrere productFieldObjects, die die aufgerufenen Produkte darstellen:
<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
</script>
Hinzufügen oder Entfernen von Artikeln aus einem Einkaufswagen messen
- E-Commerce-Messung:
add,remove - Akzeptiert Daten:
list, Array mitproductFieldObjects
In ähnlicher Weise können Sie mit einem add- oder remove-actionFieldObject und einer Liste von productFieldObjects Messungen vornehmen, die zu einem Einkaufswagen hinzugefügt oder daraus entfernt wurden:
Hinzufügen eines Produkts zu einem Einkaufswagen
// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': { // 'add' actionFieldObject measures.
'products': [{ // adding a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
Produkt aus dem Einkaufswagen entfernen
// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'removeFromCart',
'ecommerce': {
'remove': { // 'remove' actionFieldObject measures.
'products': [{ // removing a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
Werbeaktionen messen
Sie können sowohl Impressionen als auch Klicks auf interne Website-Promotions messen, z. B. Banner auf der Website, mit denen ein Sonderangebot für eine bestimmte Teilmenge von Produkten oder ein Angebot für kostenlosen Versand beworben wird.
Impressionen bei Werbeaktionen messen
- E-Commerce-Messung:
promoView - Akzeptiert Daten: Array von
promoFieldObjects
Wenn Sie eine Angebotsimpression messen möchten, setzen Sie den Schlüssel promoView in Ihrer E-Commerce-Datenschichtvariablen auf einen promoFieldObject, der die Angebote beschreibt, die Nutzern auf der Seite angezeigt werden:
<script>
// An example of measuring promotion views. This example assumes that
// information about the promotions displayed is available when the page loads.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'promoView': {
'promotions': [ // Array of promoFieldObjects.
{
'id': 'JUNE_PROMO13', // ID or Name is required.
'name': 'June Sale',
'creative': 'banner1',
'position': 'slot1'
},
{
'id': 'FREE_SHIP13',
'name': 'Free Shipping Promo',
'creative': 'skyscraper1',
'position': 'slot2'
}]
}
}
});
</script>
Klicks auf die Werbung messen
Wenn Sie einen Klick auf ein Angebot erfassen möchten, übertragen Sie die Aktion promoClick mit einem Array an die Datenschicht, das ein promoFieldObject enthält, das das angeklickte Angebot beschreibt:
<script>
/**
* Call this function when a user clicks on a promotion. This function uses the eventCallBack
* datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
*
* @param {Object} promoObj An object representing an internal site promotion.
*/
function onPromoClick(promoObj) {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'promotionClick',
'ecommerce': {
'promoClick': {
'promotions': [
{
'id': promoObj.id, // Name or ID is required.
'name': promoObj.name,
'creative': promoObj.creative,
'position': promoObj.pos
}]
}
},
'eventCallback': function() {
document.location = promoObj.destinationUrl;
}
});
}
</script>
Analysieren eines Bezahlvorgangs
So erfassen Sie jeden Schritt im Bezahlvorgang:
- Messen Sie jeden Schritt des Bezahlvorgangs mit der Aktion
checkout. - Messen Sie Zahlungsoptionen gegebenenfalls mit der Aktion
checkout_option. - Sie können optional benutzerfreundliche Schrittnamen für den Bericht zum Bezahlvorgang-Trichter festlegen, indem Sie auf der Weboberfläche im Bereich Verwaltung die E-Commerce-Einstellungen konfigurieren.
1. Schritte für den Bezahlvorgang messen
- E-Commerce-Messung:
checkout - Akzeptiert Daten:
step, Array mitproductFieldObjects
Zum Messen des Bezahlvorgangs, der eine Zahlungsschaltfläche und eine oder mehrere Zahlungsseiten enthalten kann, auf denen Nutzer Versand- und Zahlungsinformationen eingeben, verwenden Sie die Aktion checkout und das Feld step, um anzugeben, welche Phase des Bezahlvorgangs gerade erfasst wird.
Über das Feld option kannst du auch zusätzliche Daten über die Seite angeben, z. B. die vom Nutzer ausgewählte Zahlungsart.
<script>
/**
* A function to handle a click on a checkout button. This function uses the eventCallback
* data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
*/
function onCheckout() {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 1, 'option': 'Visa'},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
},
'eventCallback': function() {
document.location = 'checkout.html';
}
});
}
</script>
2. Analysieren der Zahlungs- und Versandoptionen
- E-Commerce-Messung:
checkout_option - Akzeptiert Daten:
step,option
Die Option „Bezahlvorgang“ ist nützlich, wenn Sie bereits einen Schritt des Bezahlvorgangs erfasst haben, aber zusätzliche Informationen zum selben Schritt erfassen möchten. Dabei kann es sich z. B. um die Versandart handeln, die ein Nutzer ausgewählt hat.
Verwenden Sie die Aktion checkout_option zusammen mit den Feldern step und option, um dies zu messen.
<script>
/**
* A function to handle a click leading to a checkout option selection.
*/
function onCheckoutOption(step, checkoutOption) {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'checkoutOption',
'ecommerce': {
'checkout_option': {
'actionField': {'step': step, 'option': checkoutOption}
}
}
});
}
</script>
3. Konfiguration des Checkout-Trichters
Optional kann jedem Schritt im Bezahlvorgang ein aussagekräftiger Name zugewiesen werden, der in Berichten verwendet wird. Sie können diese Namen konfigurieren, indem Sie in der Google Analytics-Weboberfläche im Bereich Verwaltung die Datenansicht (Profil) auswählen und auf E-Commerce-Einstellungen klicken. Folgen Sie der Anleitung zum Einrichten von E-Commerce, um jeden Schritt des Bezahlvorgangs, den Sie erfassen möchten, mit einem Label zu versehen.
Käufe messen
- E-Commerce-Messung:
purchase - Akzeptiert Daten:
id(Transaktions-ID), Array vonproductFieldObjects
Übertragen Sie die Transaktionsdetails mit der Aktion purchase zusammen mit einem event an die Datenschicht, um ein Tag für erweiterte E-Commerce-Berichte auszulösen. In diesem Beispiel sind die Transaktionsdetails zum Zeitpunkt des Ladens der Seite bekannt und werden mit einem Seitenaufruf gesendet, wenn das Skript gtm.js Folgendes zurückgibt:
<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID. Required for purchases and refunds.
'affiliation': 'Online Store',
'revenue': '35.43', // Total transaction value (incl. tax and shipping)
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{ // List of productFieldObjects.
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': '' // Optional fields may be omitted or set to empty string.
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
}
});
</script>
Analysieren von Erstattungen
- E-Commerce-Messung:
refund - Akzeptiert Daten:
id(Transaktions-ID), Array vonproductFieldObjects
Wenn Sie eine vollständige Erstattung einer Transaktion erfassen möchten, senden Sie einen refund-actionFieldObject zusammen mit der Transaktions-ID der zu erstattenden Transaktion:
<script>
// Refund an entire transaction by providing the transaction ID. This example assumes the details
// of the completed refund are available when the page loads:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'} // Transaction ID. Required for purchases and refunds.
}
}
});
</script>
Füge für eine teilweise Erstattung eine Liste mit productFieldObjects hinzu, einschließlich der Produkt-IDs und der zu erstattenden Mengen:
<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being returned. This example assumes the partial refund details are
// known at the time the page loads:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'}, // Transaction ID.
'products': [
{'id': 'P4567', 'quantity': 1}, // Product ID and quantity. Required for partial refunds.
{'id': 'P8901','quantity': 2}
]
}
}
});
</script>
Benutzerdefinierte Dimensionen auf Produktebene übergeben
Wenn Sie eine benutzerdefinierte Dimension auf Produktebene an das E-Commerce-Objekt übergeben möchten, fügen Sie sie dem Produkt mithilfe der folgenden Notation hinzu:
dimensionn
Dabei ist n eine natürliche Zahl. Beispiel:
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
...
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'dimension1': 'Same day delivery'
}]
}
}
});
</script>
Benutzerdefinierte Messwerte auf Produktebene übergeben
Wenn Sie einen benutzerdefinierten Messwert auf Produktebene an das E-Commerce-Objekt übergeben möchten, verwenden Sie die folgende Notation, um ihn dem Produkt hinzuzufügen:
metricn
Dabei ist n eine natürliche Zahl. Beispiel:
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
...
'products': [{
'name': 'Goal Flow Garden Hose',
'id': 'p001',
'brand': 'Google Analytics',
'category': 'Home Goods',
'variant': 'Green',
'price': '20',
'quantity': 1,
'metric3': '10' // Custom metric 'Cost'
}]
}
}
});
</script>
Impressionen und Aktionen kombinieren
In Fällen, in denen sowohl Produktimpressionen als auch eine Aktion vorliegen, ist es möglich, sie in einem einzelnen Treffer zu kombinieren und zu messen.
Im folgenden Beispiel wird gezeigt, wie eine Produktdetailansicht mit Produktimpressionen aus einem Bereich mit ähnlichen Produkten gemessen wird:
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'impressions': [
{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'list': 'Related Products',
'position': 1
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'list': 'Related Products',
'position': 2
}],
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
</script>
Benutzerdefiniertes JavaScript-Makro verwenden
Wenn deine Website keine Datenschicht unterstützt, kannst du ein benutzerdefiniertes JavaScript-Makro verwenden, um eine Funktion aufzurufen, die das E-Commerce-Datenobjekt zurückgibt. Für dieses Objekt muss die Datenschichtsyntax verwendet werden, die weiter oben in diesem Leitfaden gezeigt wurde. Beispiel:
// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
var ecommerceData = {
'ecommerce': {
'purchase': {
'actionField': {'id': 'T12345'},
'products': [
// List of productFieldObjects
],
... // Rest of the code should follow the data layer syntax.
}
};
return ecommerceData;
}
Wenn Sie anstelle der Datenschicht ein benutzerdefiniertes JavaScript-Makro verwenden möchten, wählen Sie Erweiterte E-Commerce-Funktionen aktivieren aus und legen Sie die Option Daten aus Makro lesen fest.