Partendo dall’articolo di Stefano sull’e-commerce avanzato ho pensato di creare un articolo che andasse più nel tecnico e mostrasse come
impostare il dataLayer per inviare i dati alla proprietà Universal Analytics.

Come inviare i dati

Esistono tre modi per implementare la struttura dati per l’e-commerce avanzato:

  • dataLayer
  • Variabile JavaScript
  • DOM scraping

Sarà oggetto di questa piccola guida solo la prima implementazione che è quella più utilizzata anche da molti
plug-in.

Il contenitore

Ho creato questo contenitore avendo in mente la sintassi proposta da Google per il tracciamento dell’e-commerce avanzato.
Nessun’altra sintassi verrà accettata in quanto Analytics si aspetta degli oggetti specifici per riconoscere un evento e-commerce.

Ad esempio, per misurare una visualizzazione di un prodotto è obbligatorio che vi siano l’oggetto ecommmerce e al suo interno l’array impressions.
Questa rigidità può portare alla mancanza di dati qualora il dataLayer non fosse perfetto.

I dati e-commerce vengono inviati verso Analytics grazie al tag di visualizzazione di pagina ma in questo container ho deciso di inviarli un tag evento così che possa avere dati ridondanti, inoltre:

  • L’attivatore utilizza gli eventi standard offerti da Google
    quindi potrai riutilizzarlo per tracciare l’e-commerce su GA4,
  • Se il dataLayer non riuscisse a passare i dati e-commerce l’evento ti permetterebbe di registrare i dati evitando perdite,
  • Grazie all’evento potrai scoprire se il dataLayer è stato impostato in maniera scorretta e quindi non sta inviando dati,
  • Utilizzando un evento come attivatore avrai la sicurezza che i dati inviati saranno sempre quelli più recenti ed eviterai report confusi.

 

Scarica il contenitore cliccando qui

 


L’implementazione

Di seguito una panoramica di come dovrebbe essere formato l’oggetto e-commerce nel dataLayer in base all’evento e i
dati raccolti dal report Comportamento > Eventi > Eventi principali

Visualizzazione di un prodotto

  • Attivatore evento: view_item
  • Categoria: ecommerce
  • Azione: view_item
  • Etichetta: Nome prodotti
  • Valore: /
  • Evento da non interazione: Vero

<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
 'event': 'view_item',
 'ecommerce': {
    'detail': {
    'actionField': {'list': 'Lista prodotto'},    // Lista prodotti opzionale
    'products': [{
       'name': 'Triblend Android T-Shirt',         // Nome o ID obbligatorio
          'id': '12345',
          'price': '15.25',
           'brand': 'Google',
           'category': 'Apparel',
           'variant': 'Gray'
        }]
     }
  }
});
</script>
        

Aggiunta al carrello

  • Attivatore evento: add_to_cart
  • Categoria: ecommerce
  • Azione: add_to_cart
  • Etichetta: Nome prodotti
  • Valore: Totale dei prodotti aggiunti al carrello
  • Evento da non interazione: Falso

<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'add_to_cart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {      
      'actionField': {'list': 'Lista prodotto'},                          
      'products': [{                        
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
      },{
        id: '4567',
        name: 'Android T-Shirt',
        quantity: 3 
     }]
    }
  }
});
 </script>
        

Rimozione dal carrello

  • Attivatore evento: remove_from_cart
  • Categoria: ecommerce
  • Azione: remove_from_cart
  • Etichetta: Nome prodotti
  • Valore: /
  • Evento da non interazione: Falso

<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'remove_from_cart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'remove': {    
      'actionField': {'list': 'Lista prodotto'},                          
      'products': [{                       
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
      },{
        id: '4567',
        name: 'Android T-Shirt',
        quantity: 3 
      }]
    }
  }
});
</script>
        

Checkout

  • Attivatore evento: begin_checkout || add_shipping_info || add_payment_info
  • Categoria: ecommerce
  • Azione: begin_checkout || add_shipping_info || add_payment_info Step: #
  • Etichetta: Checkout option
  • Valore: /
  • Evento da non interazione: Falso

<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'begin_checkout',
  'ecommerce': {
    'checkout': {    
      'actionField': {'step': 1, 'option': ''}, // In questi campi puoi mandare gli step del carrello uniti alle opzioni di pagamento o di spedizione                          
      'products': [{                       
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
      },{
        id: '4567',
        name: 'Android T-Shirt',
        quantity: 3 
      }]
    }
  }
});
</script>

Nota, nel secondo step non invierai nuovamente la lista prodotti ma solo gli aggiornamenti relativi ad
actionField.option e/o actionField.step


<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'add_payment_info', // oppure add_shipping_info
  'ecommerce': {
    'checkout': {    
      'actionField': {'step': 2, 'option': 'Visa'},   // oppure 'option': 'Free Shipping'                   
    }
  }
});
</script>
        

Acquisto

  • Attivatore evento: purchase
  • Categoria: ecommerce
  • Azione: purchase
  • Etichetta: ID Ordine
  • Valore: Valore totale transazione
  • Evento da non interazione: Falso

<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // ID Transazione obbligatorio
        'affiliation': 'Another Online Store',
        'revenue': '35.43',                     // Totale transazione inclusivo di tasse e spedizione
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'BLACKFRIDAY80'
      },
      'products': [{                            // Lista prodotti.
        'name': 'Triblend Android T-Shirt',     // Nome o ID obbligatorio.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // I campi voti possono essere cancellati o lasciati così
      },
      {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
      }]
    }
  }
});
</script>
        

Rimborso

Nota: Questo evento non rimuove la transazione da Analytics, ti permette solamente di vedere quanti rimborsi sono stati richiesti dal sito.
Per capire come cancellare una transazione, clicca qui.

  • Attivatore evento: refund
  • Categoria: ecommerce
  • Azione: refund
  • Etichetta: ID Ordine
  • Valore: Numero dei prodotti rimborsati
  • Evento da non interazione: Falso

<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'refund',
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'},        // ID Transazione.
      'products': [
        {'id': 'P4567', 'quantity': 1},   // ID prodotto e quantità obbligatori per i rimborsi parziali.
        {'id': 'P8901','quantity': 2}
      ]
    }
  }
});
</script>
        

Visualizzazione prodotti

  • Attivatore evento: view_item_list
  • Categoria: ecommerce
  • Azione: view_item_list
  • Etichetta: Lista in cui è apparso il prodotto
  • Valore: /
  • Evento da non interazione: Vero

            <script>
<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'view_item_list',
  'ecommerce': {
    'impressions': [
    {
      'name': 'Triblend Android T-Shirt',       // Nome o ID obbligatorio
      'id': '12345',
      'price': '15.25',
      'brand': 'Google',
      'category': 'Apparel',
      'variant': 'Gray',
      'list': 'Risultati di ricerca',           // L'attributo list specifica dove è stato visto il prodotto
      'position': 1
    },
    {
      'name': 'Donut Friday Scented T-Shirt',
      'id': '67890',
      'price': '33.75',
      'brand': 'Google',
      'category': 'Apparel',
      'variant': 'Black',
      'list': 'Prodotti correlati',
      'position': 2
    }]
  }
});
</script>
        

Click su un prodotto

  • Attivatore evento: select_item
  • Categoria: ecommerce
  • Azione: select_item
  • Etichetta: Nome prodotto
  • Valore: /
  • Evento da non interazione: Falso

<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'select_item',
  'ecommerce': {
    'click': {
      'actionField': { 'list': 'Related products'},
      'products': [{
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'position': 2
      }]
    }
  }
});
</script>
        

Visualizzazione promo

  • Attivatore evento: view_promotion
  • Categoria: ecommerce
  • Azione: view_promotion
  • Etichetta: Creatività
  • Valore: /
  • Evento da non interazione: Vero

<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'view_promotion',
  'ecommerce': {
    'promoView': {
      'promotions': [                     // Array di prodotti in promo
      {
        'id': 'JUNE_PROMO13',            // ID o Nome obbligatorio
        'name': 'June Sale',
        'creative': 'banner1',
        'position': 'slot1'
      },
      {
        'id': 'FREE_SHIP13',
        'name': 'Free Shipping Promo',
        'creative': 'skyscraper1',
        'position': 'slot2'
      }]
    }
  }
});
</script>
        

Click promo

  • Attivatore evento: select_promotion
  • Categoria: ecommerce
  • Azione: select_promotion
  • Etichetta: Nome promo
  • Valore: /
  • Evento da non interazione: Falso

<script>
window.dataLayer.push({ ecommerce: null });         
window.dataLayer.push({
  'event': 'select_promotion',
  'ecommerce': {
    'promoClick': {
      'promotions': [     
      {
        'id': 'JUNE_PROMO13',            // ID o Nome obbligatorio
        'name': 'June Sale',
        'creative': 'banner1',
        'position': 'slot1'
      }]
    }
  }
});
</script>

Per maggiori informazioni o per prenotare la tua consulenza, rimaniamo in contatto![contact-form-7 id=”373″ title=”Paolo” html_id=”Paolo”]

Nome

Email*

Soggetto

Testo*

Leave A Comment