Ecommerce optimized for Tag Manager | Universal Analytics for Tag Manager | Google developer (2023)

This guide describes how to implement Universal Analytics' advanced e-commerce functionality on a website using Google Tag Manager.

overview

Google Analytics Enhanced E-Commerce allows you to send product impressions, promotions and sales data with all Google Analytics pageviews and events. Use pageviews to track product impressions and product purchases. and use events to track checkout steps and product clicks.

before you start

We recommend checking theImproved ecommerce data types and actionsSection ofEnhanced ECommerce Developer Guideto help you plan your implementation. The guide will help you understand which fields are required and optional for each e-commerce interaction you want to measure.

Enable Enhanced Ecommerce

In most implementations, you must enable Enhanced Ecommerce for each Universal Analytics page view or event tag. There are two ways to enable Enhanced Ecommerce in the Tag Editor screen of the web interface:

• Deploy with the data layer (recommended)
• Implement using a custom JavaScript macro

While both methods provide equivalent eCommerce functionality, we recommend that any website that supports a data layer use the data layer method. In this guide, the Data Layer method is presented by default, whileUsing a custom JavaScript macrois documented at the end of this guide.

Using the data layer

The following sections show how to use the data layer to measure the following advanced eCommerce activities:

• product impressions
• product clicks
• Product detail printouts
• add/remove cart
• advertising impressions
• action clicks
• Box
• shopping
• refunds

Delete ecommerce object

We recommend using the following command to delete the ecommerce object before posting an ecommerce event to the data layer. Deleting the object prevents multiple eCommerce events on a page from affecting each other.

dataLayer.push({ Ecommerce: null }); // Delete the previous eCommerce object.

Measure product impressions

• E-commerce measurement:impressions
• Accepted data: matrix ofimpressionFieldObjects

Evaluate product impressions usingPrintAction and one or moreimpressionFieldObjects. The following example assumes that details about the products displayed on a page are known at the time the page is loaded:

<script>// Measures product impressions and also tracks a //default pageview for tag configuration.// Product impressions are sent by sending an impression object // containing one or more impressionFieldObjects.dataLayer.push( { ecommerce: null }) contains . ; // Delete the previous ecommerce object.dataLayer.push({ 'ecommerce': { 'currencyCode': 'EUR', // Local currency is optional. 'impressions': [ { 'name': 'Triblend Android T-Shirt ' , // Name or ID required. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Grey' , 'list': 'Search results', 'position': 1 }, { 'name': 'Scented Donut Friday T-shirt', 'id': '67890', 'price': '33.75', 'brand ': 'Google', 'category': 'Apparel', 'variant': 'Black', 'list': 'Search Results', 'position': 2 }] }});</script>

Measure product clicks

• E-commerce measurement:clique
• Accepted dates:List, arrangement ofproductFieldObjects

Measure product link clicks by pressing acliqueAction on the data layer, along with aProductFieldObjectto display the clicked product, as in this example:

<script>/** * Call this function when a user clicks on a product link. This function uses the event callback data layer variable * to handle navigation after the ecommerce data is sent to Google Analytics *. * @param {Object} productObj An object that represents a product. */function(productObj) { dataLayer.push({ Ecommerce: null }); // Delete the previous eCommerce object. dataLayer.push({ 'event': 'productClick', 'ecommerce': { 'click': { 'actionField': {'list': 'Search Results'}, // Optional list property. 'products': [ { ' name': productObj.name, // Requires name or ID '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>

Measuring product detail views

• E-commerce measurement:Detail
• Accepted dates:List, arrangement ofproductFieldObjects

Measure a display of product details by pressing oneDetailAction on the data layer, along with one or moreproductFieldObjectsrepresents the displayed products:

<script>// Measure a view of the product details. This example assumes the detail view occurs on page load // and also tracks a default page view of the detail page. dataLayer.push({ ecommerce: null }); // Delete 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', // Requires name or ID. 'id': '12345', 'price': '15.25', 'brand': 'Google ' , ' Category': 'Clothing', 'Variant': 'Grey' }] } }});</script>

Measuring additions or removals to a shopping cart

• E-commerce measurement:Add to,removed
• Accepted dates:List, arrangement ofproductFieldObjects

Likewise, you can measure additions or removals to a shopping cart with aAdd toorremoved actionFieldObjectand a list ofproductFieldObjects:

Adding a product to a shopping cart

// Measure the addition of a product to a shopping cart using an 'add' actionFieldObject// and a list of productFieldObjects.dataLayer.push({ ecommerce: null }); // Delete the previous ecommerce object. : [{ // Adding a product to the shopping cart. 'name': 'Android Triblend T-shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'Category': 'Apparel', 'Variant': 'Grey ', 'Value: 1 }] } }});

Removing a product from a shopping cart

// Measures the distance of a product to a shopping cart dataLayer.push({ ecommerce: null }); // Delete previous e-commerce object 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': ' Apparel ', 'Variant': 'Gray', 'Amount': 1 }] } }});

You can measure impressions and clicks on internal site promotions, for example, B. Banners displayed on the site itself advertising the sale of a certain subset of products or a free shipping offer.

Measuring ad impressions

• E-commerce measurement:PromoView
• Accepted data: matrix ofpromoFieldObjects

To measure an ad impression, set thePromoViewEnter the ecommerce data layer var into apromoFieldObjectwhich describes the promotions displayed to users on the site:

<script> // An example of measuring ad impressions. This example assumes that // information about displayed promotions is available when the page is loaded dataLayer.push({ ecommerce: null }); // Delete 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 Promotion', 'creative': 'skyscraper1', 'position' : 'slot2' }] } }});</script>

Measure clicks on promotions

To measure a click on a promotion, press the buttonpromoClickaction in the data layer with an array containing apromoFieldObjectDescription of the clicked promotion:

<script>/** * Call this function when a user clicks on a promotion. This function uses the eventCallBack * datalayer variable to handle navigation after sending the eCommerce data to Google Analytics. * * @param {Object} promoObj An object representing an internal site promotion. */function onPromoClick(promoObj) { dataLayer.push({ Ecommerce: null }); // Delete 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>

measuring a logger

To measure each step in a checkout process, you must:

1. Measure each step of the checkout process with theBoxAction.
2. If necessary, measure checkout options with thecheckout_optionAction.
3. Optionally define friendly step names for the checkout funnel report by configuringe-commerce settingsI amAdministratorweb interface area.

1. Measure checkout steps

• E-commerce measurement:Box
• Accepted dates:Stage, arrangement ofproductFieldObjects

To measure the checkout process, which may include a checkout button and one or more checkout pages where users enter shipping and payment information, use the methodBoxaction and theStageField to indicate which phase of the checkout process is being measured. You can also use thePossibilityField to provide additional data about the page, for example B. the payment method selected by the user.

<script>/** * A function to process a click on a checkout button. This function uses the eventCallback * data layer variable to handle navigation after sending the e-commerce data to Google Analytics. */function onCheckout() { dataLayer.push({ Ecommerce: null }); // Delete the previous eCommerce object. dataLayer.push({ 'event': 'checkout', 'ecommerce': { 'checkout': { 'actionField': {'step': 1, 'option': 'Visa'}, 'products': [{ ' name': 'Android Triblend T-shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Grey' , 'amount': 1 }] } }, 'eventCallback': function() { document.location = 'checkout.html'; } });}</script>

2. Evaluate checkout options

• E-commerce measurement:checkout_option
• Accepted dates:Stage,Possibility

The checkout option is useful when you've already measured a checkout step, but want to capture additional information about the same checkout step. For example, the shipping method selected by a user. To measure this, use thecheckout_optionaction along with theStageEPossibilityFelder.

<script>/** * A function to handle a click resulting in a checkout option selection. */function onCheckoutOption(step, checkoutOption) { dataLayer.push({ ecommerce: null }); // Delete the previous eCommerce object. dataLayer.push({ 'event': 'checkoutOption', 'ecommerce': { 'checkout_option': { 'actionField': {'step': step, 'option': checkoutOption} } } });}</script>

3. Checkout funnel setup

Optionally, each step of the checkout process can be given a meaningful name that will be used in reports. To configure these names, visit theAdministratorGoogle Analytics web interface section, select the view (Profile) and clicke-commerce settings. Follow the ecommerce setup instructions to label each checkout step you want to track.

measure purchases

• E-commerce measurement:kaufen
• Accepted dates:I WENT(transaction ID), array ofproductFieldObjects

Transfer the transaction details to the data layer usingkaufenaction, together with aCairThis triggers an Enhanced Ecommerce-enabled tag. In this example, transaction details are known at page load time and will be sent with a page view when thegtm.jsThe script returns:

<script> // Send transaction data with a page view if available // when the page is loaded. Otherwise, use an event when //transaction data becomes available dataLayer.push({ ecommerce: null }); // Delete the previous ecommerce object. : 'Online Store', 'revenue': '35.43', // total transaction amount (including tax and shipping) 'tax': '4.90', 'shipping': '5.99', 'coupon': 'SUMMER_SALE' } , 'products': [{ // List of productFieldObjects. 'name': 'T-Shirt Android Triblend', // Name or ID required. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Clothing', 'variant': 'Grey', 'quantity': 1, 'coupon ': '' // Optional fields can be omitted or set to an empty string. }, { 'name': 'Friday Scented Donut T-shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Clothing', 'variant ': 'Black', 'Amount': 1 }] } }});</script>

measure refunds

• E-commerce measurement:reimbursement
• Accepted dates:I WENT(transaction ID), array ofproductFieldObjects

to measure afull refundof a transaction, press onereimbursement actionFieldObjectalong with the ID of the transaction to be refunded:

<script> // Reimburses an entire transaction by specifying the transaction ID. This example assumes that details // of the completed refund are available when the page loads: dataLayer.push({ ecommerce: null }); // Delete the previous ecommerce object. );</script>

to measure apartial refund, add a listproductFieldObjects, including product IDs and quantities that will be refunded:

<script>// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and// quantity of each returned product. This example assumes that partial refund details are known // at page load time: dataLayer.push({ ecommerce: null }); // Delete 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>

Convey custom product-related dimensions

To pass a product-related custom dimension to the ecommerce object, use the following notation to add it to the product:

dimensionsN

WoNis a natural number, for example:

<script>dataLayer.push({ E-Commerce: null }); // Den vorherigen E-Commerce löschen 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>

Pass custom product-related metrics

To pass a product-related custom metric to the ecommerce object, use the following notation to add it to the product:

metricN

WoNis a natural number, for example:

<script>dataLayer.push({ Ecommerce: null }); // Delete 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>

Combine impressions and actions

In cases where you have product impressions and a promotion, you can combine and measure them into a single hit.

The example below shows how to measure aProduct detail viewcomproduct impressionsfrom a section of related products:

<script>dataLayer.push({ E-Commerce: null }); // Vorherigen E-Commerce löschen object.dataLayer.push({ 'ecommerce': { 'impressions': [ { 'name': 'Triblend Android T-Shirt', // Name oder ID erforderlich. 'id': '12345 ', 'price': '15.25', 'brand': 'Google', 'category': 'Clothing', 'variant': 'Grey', 'list': 'Related Products', 'position': 1 }, { 'name': 'Donut Friday Duft T-shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Clothing', 'variant ' : 'Black', 'list': 'Related Products', 'position': 2 }], 'detail': { 'actionField': {'list': 'Apparel Gallery'}, // 'detail'-Aktionen sind optional list property. 'products': [{ 'name': 'Triblend Android T-Shirt', // Name or ID ist erforderlich. 'id': '12345', 'price': '15.25', 'brand ': 'Google', 'category': 'Clothing', 'variant': 'Grey' }] } }});</script>

Using a custom JavaScript macro

If your site doesn't support a data layer, you can use a custom JavaScript macro to call a function that returns the ecommerce data object. This object must use the data layer syntax shown earlier in this guide, for example:

// A custom JavaScript macro that returns an ecommerceData object // that follows the syntax of the data layer.function() { var ecommerceData = { 'ecommerce': { 'purchase': { 'actionField': {'id': ' T12345' }, 'products': [ // List of productFieldObjects ], ... // The rest of the code must follow the data layer syntax. } }; return e-commerce data ;}

If you want to use a custom JavaScript macro instead of the data layer, selectEnable advanced e-commerce featuresand set theRead macro dataPossibility.