Guida all’installazione di Google Tag Manager su Shopify e GA4

Se sei un venditore online, non puoi fare a meno di Google Tag Manager e Google Analytics. Questi strumenti sono essenziali per tracciare le attività dei tuoi utenti e ottimizzare la tua strategia di marketing. Se sei un venditore Shopify, questo articolo ti guiderà attraverso l’installazione di Google Tag Manager e la sua integrazione con Google Analytics 4.

Installare Google Tag Manager su Shopify: la guida definitiva

Google Tag Manager (GTM) semplifica la gestione dei tuoi tag e la configurazione delle analisi del tuo sito. Per installare GTM su Shopify, devi seguire questi passaggi:

Accedi al tuo account Shopify

Vai su “Negozio online” dal menu principale e poi Temi > i tre puntini (…) > Modifica codice

Scegli il tema theme.liquid

Si tratta del tema generale che crea lo scheletro del sito e quindi è presente in tutte le pagine del tuo sito Shopify e incolla il codice di GTM dopo aver creato il contenitore dedicato. Segui le istruzioni che ti da Google Tag Manager.

Vai su Impostazioni

Dopo aver modificato il theme.liquid devi andare su Impostazioni e poi Check-out. Siccome con l’account Shopify standard non ti è permesso di modificare la pagina checkout che è una pagina comune a più siti oltre al tuo (quelli che hanno l’account Standard) devi impostare gli script di monitoraggio a fondo di questa pagina come segue:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
{% if first_time_accessed %}
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 %}
 ]
  }
});
{% endif %}
</script>
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','TEST');</script>
  <!-- End Google Tag Manager -->

E sostituisci la parola TEST con il tuo codice GTM.

Evento Add to Cart nel dataLayer

Questo passaggio è un po’ più complicato perchè non è standard e dipende da come è costruito il tuo tema. Comunque devi cercare la parte di codice che contiene il bottone “Aggiungi al carrello” e aggiungere questo codice direttamente nel bottone. Attenzione alla chiusura del tag HTML del bottone.

onclick="dataLayer.push({ 'ecommerce': null });dataLayer.push({
'event': 'add_to_cart',
'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}}'
		}]
	}
});"

Arricchire le pagine Shopify con il dataLayer

A questo punto non dobbiamo far altre che creare un dataLayer completo per tutte le altre pagine del sito che ci faciliti il compito su GTM poi di raccogliere i dati per esempio per la visualizzazione del prodotto e per il click sul prodotto. Dovrai incollare questo codice:

{% comment %} Product view data layer v2.1 - part of "Shopify GA4 Kit" by Analyzify
Visit https://analyzify.app/shopify-google-analytics/ga4 for complete tutorial 
{% endcomment %}

{% assign template_name = template.name %}

<script type="text/javascript">
window.dataLayer = window.dataLayer || [];

window.appStart = function(){
  window.productPageHandle = function(){

    var productName = "{{ product.title | remove: "'" | remove: '"' }}";
    var productId = "{{ product.id }}";
    var productPrice = "{{ product.price | money_without_currency }}";
    var productBrand = "{{ product.vendor | remove: "'" | remove: '"' }}";
    var productCollection = "{{ product.collections.first.title | remove: "'" | remove: '"' }}";
    var productType = "{{ product.type | remove: "'" | remove: '"' }}";
    var productSku = "{{ product.selected_or_first_available_variant.sku | remove: "'" | remove: '"' }}";
    var productVariantId = "{{ product.selected_variant.id | default: product.variants[0].id }}";
    var productVariantTitle = "{{ product.selected_variant.title | default: product.variants[0].title }}";

    window.dataLayer.push({
      event: "analyzify_productDetail",
      items:{[
      	item_id: productId,
      	item_name: productName,
      	value: productPrice,
      	brand: productBrand,
      	category: productCollection,
      	item_type: productType,
      	SKU: productSku,
      	variant_id: productVariantId,
      	variant: productVariantTitle,
      	currency: "{{ shop.currency }}",
      ]},
    });
  };

  window.allPageHandle = function(){
    window.dataLayer.push({
      event: "ga4kit_info",
      contentGroup: "{{ template_name }}",
      {% if customer %}
      userType: "member",
      customer: {
        id: "{{- checkout.customer.id | json -}}",
        lastOrder: "{{- customer.last_order.created_at | date: '%B %d, %Y %I:%M%p' -}}",
        orderCount: "{{- checkout.customer.orders_count | json -}}",
        totalSpent: "{{- checkout.customer.total_spent | times: 0.01 | json -}}",
        tags: {{- checkout.customer.tags | json -}}
      }
      {% else %}
        userType: "visitor",
      {% endif %}
    });
  };
  allPageHandle();
      
  {% case template_name %}
  {% when "product" %}
    productPageHandle();
  {% endcase %}

}
appStart();
</script>

e creare un nuovo frammento di codice su Shopify sempre nella sezione temi. E chiamala analyzify-product-datalayer.liquid

Collega il codice appena creato

Ora torna sul file theme.liquid e aggiungi questa riga di codice subito prima della chiusura del tag

{% render ‘analyzify-product-datalayer.liquid’ %}

Variabili su GTM

Seguendo tutte queste operazioni avrai più facilmente accesso alle variabili standard di GA4 che potrai reperire su GTM per creare poi gli eventi dedicati e popolarli nella maniera corretta.
Ecco uno specchietto con il nome della variabile che andrai ad impostare sul GTM e il relativo valore preso da dataLayer. Le variabili saranno di tipo dataLayer Variable.

• Ecommerce Items: ecommerce.items
• Ecommerce Transaction ID: ecommerce.transaction_id
• Ecommerce Value: ecommerce.value
• Ecommerce Tax: ecommerce.tax
• Ecommerce Shipping: ecommerce.shipping
• Ecommerce Currency: ecommerce.currency

Per le info riguardanti l’utente e che servono per Google Ads invece:
• UserType: userType
• customer.id
• customer.lastOrder
• customer.orderCount
• customer.totalSpent
• customer.tags

Tag su GTM

Ora dovresti creare i tag su GTM per GA4. Uno per l’evento purchase e uno per l’evento add_to_cart che sono praticamente standard.
L’unico che è un po’ diverso è il view_item che si innesca alla visualizzazione di pagine che hanno come url collections o products.

Escludi Shopify come referral in GA4

Ricordati inoltre di questa cosa importante: devi escludere il dominio myshopify.com dai referral di GA4. Come detto precedentemente la parte di checkout negli account Standard di Shopify sono comuni a più siti quindi quando l’utente atterra in questa pagina praticamente esce dal tuo sito. Ecco perchè va escluso dai referral o contaminerà le attribuzioni degli acquisti su GA4.

Altre interessanti istruzioni le ho trovate qui e saranno usate nei miei prossimi test per capire se funzionano meglio.

Google Tag Manager su Shopify: ottimizza la tua strategia di marketing

L’installazione di GTM su Shopify ti consente di tracciare tutte le attività dei tuoi utenti, rendendoti in grado di ottimizzare la tua strategia di marketing. Con GTM, puoi creare tag personalizzati per monitorare il comportamento degli utenti: ad esempio, puoi tracciare il tasso di conversione, le pagine visitate e il comportamento degli abbandoni del carrello. Inoltre, l’integrazione con GA4 ti consente di monitorare le attività degli utenti su più dispositivi, migliorando la tua conoscenza del comportamento dei tuoi utenti.

Installare Google Tag Manager su Shopify e GA4: una guida per il successo

L’installazione di Google Tag Manager su Shopify e GA4 senza ulteriori plugin è essenziale per il successo delle attività di marketing online. Seguendo i passaggi descritti in questo articolo, puoi configurare la tua piattaforma per monitorare le attività degli utenti e migliorare l’esperienza di navigazione. Inoltre, l’integrazione con GA4 ti consente di tracciare le attività degli utenti su più dispositivi, fornendo una panoramica completa del comportamento degli utenti. In tal modo, puoi ottimizzare la tua strategia di marketing e aumentare le conversioni.