TECH | 01 AGOSTO 2022

Shopify e tracciamento GA4 di acquisti, carrelli e prodotti visualizzati

Molte guide online purtroppo non funzionano, condivido quindi un datalayer di base corretto

Nell'articolo, senza volerci addentrare in tutte le sfumature tecniche, condividiamo un DataLayer semplice che funziona in Italia per Shopify con temi aggiornati e valuta in euro.

Riferimenti di base

Si sveglierà Shopify prima o poi integrando GA4 Enhanced Ecommerce invece dell'ormai morente GA3? Chi lo sa... nel frattempo ci tocca integrare manualmente in GA4 e Google Tag Manager gli eventi. I principali, che vedremo qui, riguardano Acquisti, Aggiunte al Carrello e Prodotti Visualizzati.

Attenzione: questa guida non è esauriente ma mostra solo i DataLayer corretti.

Per una descrizione generica e completa dei passaggi è possibile cercare le numerose guide online, esempio con "shopify ga4 datalayer".

Noi vedremo solo le differenze del DataLayer per renderlo funzionante, in quanto ci siamo accorti che molte di queste non funzionano, probabilmente perchè Shopify ha aggiornato il DataLayer, oppure semplicemente perchè la valuta e la formattazione dei numeri non è sempre uguale.

Alcune guide di riferimento con screenshots:
https://www.lovesdata.com/blog/shopify-google-tag-manager
https://eastsideco.com/blog/how-set-ga4-ecommerce-tracking-shopify

EVENTO PURCHASE

Andare in Impostazioni -> Checkout -> Script Aggiuntivi ed inserire il seguente codice PRIMA dello script di Google Tag Manager:

{% if first_time_accessed %}
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "{{ order.order_number }}",
      value: {{ total_price | times: 0.01 }},
      tax: {{ tax_price | times: 0.01 }},
      shipping: {{ shipping_price | times: 0.01 }},
      currency: "{{ order.currency }}",
      items: [
       {% for line_item in line_items %}{
        item_id: "{{ line_item.product_id }}",
        item_name: "{{ line_item.title | remove: "'" | remove: '"' }}",
        currency: "{{ order.currency }}",
        price: {{ line_item.final_price | times: 0.01 }},
        quantity: {{ line_item.quantity }}
      },{% endfor %}
     ]
  }
});
</script>
{% endif %}

Nota bene: l'evento si chiama "purchase" e sarà lo stesso nome da inserire in Google Tag Manager
Puoi ovviamente scegliere il nome che desideri.
Le variabili in Google Tag Manager quindi saranno:

ed ogni variabile è anticipata da "ecommerce." (stiamo leggendo l'albero dell'array):

EVENTO ADDTOCART

Andare in Temi -> Azioni -> Modifica Codice -> file "theme.liquid", ed inserire il seguente codice PRIMA dello script di Google Tag Manager:

<script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    'event': 'add_to_cart',
    'value': '{{ product.price  | times: 0.01}}',
    'currency': '{{ shop.currency }}',
    'ecommerce': {
    		'items': [{
    		'item_id': '{{ product.id }}',
    		'item_name': '{{ product.title | remove: "'" | remove: '"' }}',
    		'item_brand': '{{ product.vendor | remove: "'" | remove: '"' }}',
    		'item_category': '{{ product.collections[0].title | remove: "'" | remove: '"' }}',
    		'item_variant': '{{ product.selected_variant.sku }}',
    		'currency': '{{ shop.currency }}',
    		'price': '{{ product.price  | times: 0.01}}'
    		}]
    	}
    });
</script>

Nota bene: l'evento si chiama "add_to_cart" e sarà lo stesso nome da inserire in Google Tag Manager
Puoi ovviamente scegliere il nome che desideri.
Le variabili in Google Tag Manager saranno simili alle precedenti ma senza essere precedute da "ecommerce."

Le elenco tutte per comodità, incluse le precedenti (le nuove sono quelle senza purchase nel nome):