E-commerce avanzato per Tag Manager

Questa guida descrive come implementare le funzionalità di E-commerce avanzato di Universal Analytics utilizzando Google Tag Manager su un sito web.

Panoramica

L'E-commerce avanzato di Google Analytics consente di inviare i dati sulle impressioni dei prodotti, sulle promozioni e sulle vendite con qualsiasi visualizzazione di pagina ed evento di Google Analytics. Utilizza le visualizzazioni di pagina per monitorare le impressioni e gli acquisti dei prodotti e gli eventi per monitorare i passaggi di pagamento e i clic del prodotto.

Prima di iniziare

Ti consigliamo di consultare la sezione Azioni e tipi di dati per l'e-commerce avanzato della Guida per sviluppatori di e-commerce avanzato per aiutarti a pianificare l'implementazione. Questa guida ti aiuterà a capire quali campi sono obbligatori e facoltativi per ciascuna delle interazioni e-commerce da misurare.

Attivazione dell'E-commerce avanzato

Nella maggior parte delle implementazioni, devi attivare l'E-commerce avanzato su ogni visualizzazione di pagina o tag evento di Universal Analytics. Per attivare l'E-commerce avanzato sono disponibili due opzioni nella schermata dell'editor di tag dell'interfaccia web:

  • Implementazione utilizzando il livello dati (consigliato)
  • Implementazione utilizzando una macro JavaScript personalizzata

Sebbene entrambi i metodi forniscano funzionalità di e-commerce equivalenti, consigliamo a tutti i siti web che supportano un livello dati di utilizzare il metodo del livello dati. Questa guida presenta il metodo del livello dati come predefinito, mentre alla fine della guida è descritto l'utilizzo di una macro JavaScript personalizzata.

Utilizzo del livello dati

Le seguenti sezioni mostrano come utilizzare il livello dati per misurare le seguenti attività di e-commerce avanzato:

Cancellazione dell'oggetto e-commerce

Ti consigliamo di utilizzare il comando seguente per cancellare l'oggetto e-commerce prima di eseguire il push di un evento di e-commerce al livello dati. La cancellazione dell'oggetto impedirà a più eventi e-commerce di una pagina di influire gli uni sugli altri.

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.

Misurazione delle impressioni dei prodotti

  • Misurazione e-commerce: impressions
  • Accetta dati: array di impressionFieldObjects

Misura le impressioni dei prodotti utilizzando l'azione impression e una o più impressionFieldObjects. L'esempio seguente presuppone che i dettagli relativi ai prodotti visualizzati in una pagina siano noti al momento del caricamento della pagina:

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

Misurazione dei clic sui prodotti

  • Misurazione e-commerce: click
  • Accetta dati: list, array di productFieldObjects

Misura i clic sui link dei prodotti inviando un'azione click al livello dati, insieme a un valore productFieldObject per rappresentare il prodotto selezionato, come in questo esempio:

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

Misurazione delle visualizzazioni dei dettagli del prodotto

  • Misurazione e-commerce: detail
  • Accetta dati: list, array di productFieldObjects

Misura una visualizzazione dei dettagli del prodotto trasferendo un'azione detail al livello dati, insieme a uno o più productFieldObjects che rappresentano i prodotti visualizzati:

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

Misurazione di aggiunte o rimozioni dal carrello degli acquisti

  • Misurazione dell'e-commerce: add, remove
  • Accetta dati: list, array di productFieldObjects

Allo stesso modo, puoi misurare le aggiunte o le rimozioni da un carrello degli acquisti utilizzando un actionFieldObject add o remove e un elenco di productFieldObjects:

Aggiunta di un prodotto a un carrello degli acquisti

// 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
       }]
    }
  }
});

Rimozione di un prodotto da un carrello degli acquisti

// 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
      }]
    }
  }
});

Misurazione delle promozioni

Puoi misurare sia le impressioni che i clic sulle promozioni interne al sito, ad esempio i banner visualizzati sul sito stesso che pubblicizzano una vendita su un determinato sottoinsieme di prodotti o un'offerta di spedizione gratuita.

Misurazione delle impressioni delle promozioni

  • Misurazione e-commerce: promoView
  • Accetta dati: array di promoFieldObjects

Per misurare un'impressione di promozione, imposta la chiave promoView nella variabile del livello dati di e-commerce su promoFieldObject che descrive le promozioni mostrate agli utenti nella pagina:

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

Misurazione dei clic sulle promozioni

Per misurare un clic su una promozione, invia l'azione promoClick al livello dati con un array contenente un promoFieldObject che descriva la promozione selezionata:

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

Misurazione di un pagamento

Per misurare ogni passaggio di una procedura di pagamento, devi:

  1. Misura ogni passaggio della procedura di pagamento utilizzando l'azione checkout.
  2. Se applicabile, misura le opzioni di pagamento utilizzando l'azione checkout_option.
  3. (Facoltativo) Imposta nomi di passaggi intuitivi per il report sulla canalizzazione di pagamento configurando Impostazioni e-commerce nella sezione Amministrazione dell'interfaccia web.

1. Misurazione dei passaggi di pagamento

  • Misurazione e-commerce: checkout
  • Accetta dati: step, array di productFieldObjects

Per misurare la procedura di pagamento, che potrebbe includere un pulsante di pagamento e una o più pagine di pagamento in cui gli utenti inseriscono i dati di spedizione e pagamento, utilizza l'azione checkout e il campo step per indicare la fase della procedura di pagamento che viene misurata. Puoi utilizzare il campo option anche per fornire altri dati sulla pagina, come il tipo di pagamento selezionato dall'utente.

<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. Misurazione delle opzioni di pagamento

  • Misurazione e-commerce: checkout_option
  • Accetta dati: step, option

L'opzione di pagamento è utile nei casi in cui hai già misurato un passaggio di pagamento, ma vuoi acquisire ulteriori informazioni sullo stesso passaggio. ad esempio il metodo di spedizione selezionato da un utente. Per misurare questa situazione, utilizza l'azione checkout_option insieme ai campi step e option.

<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. Configurazione della canalizzazione di pagamento

Se vuoi, a ogni passaggio della procedura di pagamento può essere assegnato un nome descrittivo che verrà utilizzato nei report. Per configurare questi nomi, visita la sezione Amministrazione dell'interfaccia web di Google Analytics, seleziona la vista (profilo) e fai clic su Impostazioni e-commerce. Segui le istruzioni di configurazione dell'e-commerce per etichettare ogni passaggio di pagamento che intendi monitorare.

Configurazione dell&#39;e-commerce nell&#39;interfaccia di amministrazione di Google Analytics. Una canalizzazione di pagamento è definita da quattro passaggi: 1. Carrello delle recensioni, 2. Raccogliere i Dati di pagamento, 3. Conferma i dettagli di acquisto, 4. Ricevuta.
Figura 1: configurazione dell'e-commerce, canalizzazione di pagamento.

Misurazione degli acquisti

  • Misurazione e-commerce: purchase
  • Accetta dati: id (ID transazione), array di productFieldObjects

Invia i dettagli della transazione al livello dati utilizzando l'azione purchase, insieme a un event che attiverà un tag abilitato per l'e-commerce avanzato. In questo esempio, i dettagli della transazione sono noti al momento del caricamento della pagina e verranno inviati con una visualizzazione di pagina quando lo script gtm.js restituisce:

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

Misurazione dei rimborsi

  • Misurazione e-commerce: refund
  • Accetta dati: id (ID transazione), array di productFieldObjects

Per misurare il rimborso completo di una transazione, invia un refund actionFieldObject insieme all'ID transazione della transazione rimborsata:

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

Per misurare un rimborso parziale, aggiungi un elenco di productFieldObjects, inclusi gli ID prodotto e le quantità rimborsate:

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

Passaggio delle dimensioni personalizzate basate sui prodotti

Per passare una dimensione personalizzata basata sui prodotti all'oggetto e-commerce, utilizza la seguente notazione per aggiungerla al prodotto:

  dimensionn

dove n è un numero naturale, ad esempio: 

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

Passaggio di metriche personalizzate basate sui prodotti

Per passare una metrica personalizzata basata sui prodotti all'oggetto e-commerce, utilizza la seguente notazione per aggiungerla al prodotto:

  metricn

dove n è un numero naturale, ad esempio: 

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

Combinazione di impressioni e azioni

Nei casi in cui sono presenti sia impressioni del prodotto sia un'azione, è possibile combinarle e misurarle in un unico hit.

L'esempio seguente mostra come misurare una visualizzazione dei dettagli del prodotto con impressioni del prodotto da una sezione dei prodotti correlati:

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

Utilizzo di una macro JavaScript personalizzata

Se il tuo sito web non supporta un livello dati, puoi utilizzare una macro JavaScript personalizzata per chiamare una funzione che restituisca l'oggetto dati di e-commerce. Questo oggetto deve utilizzare la sintassi del livello dati mostrata in precedenza in questa guida, ad esempio:

// 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;
}

Se scegli di utilizzare una macro JavaScript personalizzata anziché il livello dati, seleziona Attiva le funzionalità di e-commerce avanzate e imposta l'opzione Leggi i dati dalla macro.