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.
Contenuti
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”]