Erweiterte E-Commerce-Berichte für Tag Manager

In diesem Leitfaden wird beschrieben, wie Sie erweiterte E-Commerce-Funktionen von Universal Analytics mithilfe von Google Tag Manager auf einer Website implementieren.

Überblick

Mit den erweiterten E-Commerce-Berichten von Google Analytics können Daten zu Produktimpressionen, Werbeaktionen und Verkäufen zusammen mit Ihren Seitenaufrufen und Ereignissen in Google Analytics gesendet werden. Mit Seitenaufrufen kannst du Produktimpressionen und Produktkäufe und mit Ereignissen 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 welche optional sind.

Erweiterte E-Commerce-Berichte aktivieren

In den meisten Implementierungen sollten Sie erweiterte E-Commerce-Berichte für alle Seitenaufruf- und Ereignis-Tags von Universal Analytics aktivieren. Sie haben zwei Möglichkeiten, erweiterte E-Commerce-Berichte im Tag-Editor der Weboberfläche zu aktivieren:

  • 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 verwendet. Unter Benutzerdefinierte JavaScript-Makros verwenden wird am Ende dieses Leitfadens beschrieben.

Datenschicht verwenden

In den folgenden Abschnitten erfahren Sie, wie Sie mithilfe der Datenschicht die folgenden Aktivitäten für erweiterte E-Commerce-Berichte messen:

E-Commerce-Objekt löschen

Es empfiehlt sich, das E-Commerce-Objekt mit dem folgenden Befehl zu löschen, bevor ein E-Commerce-Ereignis an die Datenschicht gesendet wird. Dadurch 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 mit impressionFieldObjects

Messen Sie Produktimpressionen mithilfe der Aktion impression und eines oder mehrerer impressionFieldObjects. Im folgenden Beispiel wird davon ausgegangen, dass Details zu den auf einer Seite angezeigten Produkten bekannt sind, wenn die Seite geladen wird:

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

Sie können Klicks auf Produktlinks messen, indem Sie die Aktion click zusammen mit einer productFieldObject an die Datenschicht übergeben, die das angeklickte Produkt repräsentiert. 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 mit productFieldObjects

Sie können eine Ansicht der Produktdetails messen, indem Sie die Aktion detail an die Datenschicht übergeben, zusammen mit einer oder mehreren productFieldObjects für die aufgerufenen Produkte:

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

Ergänzen oder Entfernen von Artikeln in einem Einkaufswagen messen

  • E-Commerce-Messung: add, remove
  • Akzeptiert Daten: list, Array mit productFieldObjects

In ähnlicher Weise können Sie mithilfe eines add- oder remove-actionFieldObjects und einer Liste von productFieldObjects erfassen, ob Artikel in den Einkaufswagen gelegt oder entfernt werden:

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

Du kannst sowohl Impressionen als auch Klicks für interne Website-Promotions messen, z. B. Banner, die auf der Website selbst angezeigt werden, um für einen Sonderangebot für eine bestimmte Untergruppe von Produkten oder ein Angebot für kostenlosen Versand zu werben.

Werbeimpressionen messen

  • E-Commerce-Messung: promoView
  • Akzeptiert Daten: Array mit promoFieldObjects

Wenn Sie eine Angebotsimpression erfassen möchten, setzen Sie den Schlüssel promoView in Ihrer E-Commerce-Datenschichtvariablen auf eine promoFieldObject. Diese beschreibt die Angebote, 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 Werbung messen

Wenn Sie Klicks 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>

Bezahlvorgang messen

So erfassen Sie die einzelnen Schritte eines Bezahlvorgangs:

  1. Messen Sie jeden Schritt des Bezahlvorgangs mit der Aktion checkout.
  2. Messen Sie gegebenenfalls Zahlungsoptionen mit der Aktion checkout_option.
  3. Legen Sie optional benutzerfreundliche Schrittnamen für den Bericht zum Bezahlvorgang-Trichter fest, indem Sie auf der Weboberfläche im Bereich Admin die E-Commerce-Einstellungen konfigurieren.

1. Bezahlvorgang-Schritte messen

  • E-Commerce-Messung: checkout
  • Akzeptiert Daten: step, Array mit productFieldObjects

Wenn Sie den Bezahlvorgang messen möchten, 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 gemessen wird. Über das Feld option kannst du auch zusätzliche Daten zur 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. Bezahlvorgang-Optionen messen

  • E-Commerce-Messung: checkout_option
  • Akzeptiert Daten: step, option

Die Bezahloption ist nützlich, wenn du einen Bezahlschritt bereits erfasst hast, aber zusätzliche Informationen zum selben Schritt erfassen möchtest. z. B. die Versandmethode, 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 jeder Schritt im Bezahlvorgang einen aussagekräftigen Namen erhalten, der in Berichten verwendet wird. Rufen Sie zum Konfigurieren dieser Namen den Bereich Verwaltung der Google Analytics-Weboberfläche auf, wählen Sie die Datenansicht (Profil) aus und klicken Sie auf E-Commerce-Einstellungen. Folgen Sie der Anleitung zum Einrichten von E-Commerce, um jeden Schritt des Bezahlvorgangs, den Sie erfassen möchten, mit einem Label zu versehen.

E-Commerce-Einrichtung in Google Analytics Ein Trichter für den Bezahlvorgang wird in vier Schritten definiert: 1. Warenkorb bewerten, 2. Zahlungsinformationen erfassen
         3. Kaufdetails bestätigen, 4. Beleg.
Abbildung 1: E-Commerce-Einrichtung, Trichter für den Bezahlvorgang

Käufe messen

  • E-Commerce-Messung: purchase
  • Akzeptiert Daten: id (Transaktions-ID), Array mit productFieldObjects

Übertragen Sie Ihre Transaktionsdetails mithilfe der Aktion purchase und eines event-Objekts in die Datenschicht. Dadurch wird ein Tag für erweiterte E-Commerce-Berichte ausgelöst. In diesem Beispiel sind die Transaktionsdetails beim Laden 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>

Erfassen von Erstattungen

  • E-Commerce-Messung: refund
  • Akzeptiert Daten: id (Transaktions-ID), Array mit productFieldObjects

Um eine vollständige Erstattung einer Transaktion zu messen, senden Sie per Push ein refund actionFieldObject zusammen mit der Transaktions-ID der Transaktion, die erstattet wird:

<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 mit der folgenden Notation dem Produkt 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, fügen Sie ihn mit der folgenden Notation dem Produkt hinzu:

  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

Falls Sie sowohl Produktimpressionen als auch eine Aktion haben, ist es möglich, sie in einem einzigen Treffer zu kombinieren und zu messen.

Im folgenden Beispiel wird gezeigt, wie eine Produktdetailansicht mit Produktimpressionen aus einem Bereich für ähnliche Produkte erfasst 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 Ihre Website keine Datenschicht unterstützt, können Sie ein benutzerdefiniertes JavaScript-Makro verwenden, um eine Funktion aufzurufen, die das E-Commerce-Datenobjekt zurückgibt. Für dieses Objekt sollte 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.