Volgend jaar stopt Google met ondersteuning van de Universal Analytics.
Vanaf dat moment moet iedereen overgestapt zijn naar de nieuwe versie GA4 (Google Analytics 4).
Heb je een Shopify shop? Dan is het je misschien al opgevallen dat Shopify nog geen ondersteuning biedt voor GA4.
In dit artikel leggen we uit hoe je ook met Shopify al over kunt stappen naar GA4, inclusief e-commerce tracking.
De oude situatie met Universal Analytics
Waarschijnlijk worden de resultaten van je Shopify shop nu nog gemeten in het oude Universal Analytics. Shopify biedt hier namelijk een standaard integratie voor. Je kunt dit hier vinden in de beheeromgeving naar je store.
- Ga vanuit “Instellingen“
- Klik op “Apps en verkoopkanalen“
- Klik vervolgens op “Online store“
- Ga verder naar “Verkoopkanaal openen“
- Onder “Voorkeuren” vind je vervolgens de onderstaande instelling “Google Analytics“.
- Maak je momenteel gebruik van Universal Analytics? Dan staat hier waarschijnlijk het property-id van je Universal Analytics account ingevuld.
- Met het vinkje bij “Gebruik Enhanced Ecommerce” kon je er vervolgens met één klik voor zorgen dat naast standaard onderdelen als paginaweergaven ook e-commerce events als transacties werden gemeten.
Helaas is Shopify nog niet klaar voor GA4...
Helaas is het implementeren van GA4 in Shopify niet meer zo eenvoudig als het voorheen was met de vroegere versie van Google Analytics. Shopify is namelijk nog niet klaar met de nieuwe integratie. Zelf zeggen ze hier het volgende over:
Hoewel Shopify dus aan een integratie schijnt te werken, is het nog onduidelijk wanneer deze beschikbaar zal zijn. Inmiddels komt de deadline waarop we over moeten naar GA4 steeds dichterbij.
Gelukkig is er een oplossing!
Maar dan nu het goede nieuws: met een omweg is het wel mogelijk om GA4 te gebruiken met Shopify.
Inclusief e-commerce data zoals:
- Product weergaven
- Winkelmandje toevoegingen
- Transacties
Heb je een Shopify Plus licentie? Dan is het ook mogelijk om de stappen van je checkout funnel te meten.
Zo installeer je GA4 voor Shopify
Voor deze implementatie maken we gebruik van Google Tag Manager.
Zo installeer je GA4 voor Shopify:
- GA4 property aanmaken
- GA4 configureren
- GTM container aanmaken
- GTM container configureren
- Code toevoegen aan je Shopify thema
- GTM container code toevoegen aan de de bevestigingspagina van je shop
Het volgen van deze instructies is uiteraard geheel op eigen risico. Weet je niet wat je doet? Vraag je developer dan om hulp.
Stap 1: GA4 property aanmaken
Heb je binnen je Google Analytics account nog geen GA4 property aangemaakt? Dan starten we daar mee. Heb je dit al? Dan kun je door naar stap 2.
Log in op https://analytics.google.com/ en selecteer bovenaan het bestaande account van je shop. Of maak een nieuw account aan als je dit nog niet hebt.
Klik linksonder in beeld op “Admin” en vervolgens in de middelste kolom op “Create Property“.
Volg de instructies voor het aanmaken van een GA4 property.
Ga door naar de volgende stap zodra je bij het “Start collecting data” scherm bent aangekomen.
Stap 2: GA4 configureren
Zodra je dit hebt afgerond, verschijnt het “Measurement ID” in beeld. Kopieer dit en bewaar het ergens. Dit heb je in een latere stap nodig.
Binnen GA4 kun je heel veel instellen, dus loop overal een keer zorgvuldig doorheen.
In combinatie met Shopify is het in ieder geval belangrijk dat je het domein “myshopify.com” toevoegt aan de lijst met “Unwanted Rererrals“. Dit domein wordt door Shopify namelijk gebruikt in de checkout van je shop. Dit kan ervoor zorgen dat je transacties binnen GA4 worden toegekend aan dit domein, in plaats van de site of campagne waar ze daadwerkelijk vandaan komen.
Dit doe je als volgt:
- Open de Data Stream die je zojuist hebt aangemaakt (via het vorige scherm of Admin > Data Streams)
- Vervolgens klik je op “Configure tag settings“
- En dan op “Show all“
- Je ziet dan de optie “List unwanted referrals” verschijnen. Klik hier op.
- Achter “Referral domain contains” vul je in: myshopify.com
Stap 3: GTM container aanmaken
Voor deze implementatie maken we gebruik van Google Tag Manager (GTM) om de ecommerce data van je shop door te sturen naar GA4. We gaan er van uit dat je al enige ervaring hebt met GTM.
Heb je nog geen Google Tag Manager container? Maak er dan één aan via https://tagmanager.google.com. Kies daarbij voor een “Web” container.
Stap 4: GTM container configureren
Binnen de GTM container maken we de volgende nieuwe tags aan:
A. Page view
B. Product detail view
C. Add to cart
D. Purchase
A. Page view
- Maak een nieuwe “GA4 Configuration” tag aan met de naam “GA4 – Pageview”
- Vul “Measurement ID” van je GA4 Data Stream in (zie eerdere stap).
- Voeg een trigger toe: All Pages
B. Product detail view
- Maak een nieuwe “GA4 Event” tag aan met de naam “GA4 – Product detail view”
- Neem de instellingen uit het voorbeeld hieronder over.
- Maak een nieuwe event trigger aan en gebruik als event name: “view_item”
C. Add to cart
- Maak een nieuwe “GA4 Event” tag aan met de naam “GA4 – Add to cart”
- Neem de instellingen uit het voorbeeld hieronder over.
- Maak een nieuwe event trigger aan en gebruik als event name: “add_to_cart”
D. Purchase
- Maak een nieuwe “GA4 Event” tag aan met de naam “GA4 – Purchase”
- Neem de instellingen uit het voorbeeld hieronder over.
- Maak voor iedere parameter een dataLayer variable aan (zie voorbeeld hieronder).
- Maak een nieuwe event trigger aan en gebruik als event name: “purchase”
Voorbeeld van een dataLayer variable:
Stap 5: Code toevoegen aan je Shopify thema
Nu GA4 en GTM zijn ingesteld, kunnen we de GTM scripts toevoegen aan de code van de Shopify shop.
We starten met het plaatsen van de GTM container code op alle pagina’s.
Ga in de admin omgeving van Shopify naar “Verkoopkanalen” en kies voor “Onlinewinkel“. Vervolgens ga je naar “Thema’s“, klik op de knop met de drie puntjes en kies voor “Code bewerken“.
A. Code toevoegen aan: theme.liquid
Open het bestand “theme.liquid” en plaats onderstaande code zo hoog mogelijk in de <head> sectie.
Vervang het GTM-CONTAINER-ID met het id van je eigen GTM container.
<!-- 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','GTM-CONTAINER-ID');</script>
<!-- End Google Tag Manager --> Vervolgens plaats je onderstaande code zo hoog mogelijk in de <body> sectie. Vervang ook hier het GTM-CONTAINER-ID.
<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-CONTAINER-ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
{% if first_time_accessed %}
var sh_order_id = "{{ order.order_number }}";
if (sh_order_id == "") {
sh_order_id = Date.now();
}
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: sh_order_id,
currency: "{{ order.currency }}",
value: {{ total_price | times: 0.01 }},
tax: {{ tax_price | times: 0.01 }},
shipping: {{ shipping_price | times: 0.01 }},
items: [
{% for line_item in line_items %}{
item_id: "{{ line_item.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','GTM-CONTAINER-ID');</script>
<!-- End Google Tag Manager --> B. Code toevoegen aan: main-product.liquid
Voeg onderstaande code toe onderaan in het bestand “main-product.liquid“.
Zo wordt er bij het bekijken van de product pagina een “view_item” event gemeten.
Daarnaast wordt er een add_to_cart event gemeten bij het toevoegen van een product aan het winkelmandje vanaf de product detail pagina.
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
ecommerce: {
items: [{
'item_id': '{{ product.id }}',
'item_name': '{{ product.title | remove: "'" | remove: '"' }}',
'price': '{{ product.price | times: 0.01}}',
'item_brand': '{{ product.vendor | remove: "'" | remove: '"' }}',
'item_category': '{{ product.collections[0].title | remove: "'" | remove: '"' }}',
'item_variant': '{{ product.selected_variant.sku }}',
'quantity': '1'
}]
},
event: 'view_item'
});
document.getElementsByName("add")[0].addEventListener("click", dl_add_to_cart);
function dl_add_to_cart() {
dataLayer.push({
'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}}'
}]
},
'event': 'add_to_cart'
});
}
</script> Let op: in bovenstaande code wordt bij het meten van clicks op de add-to-cart button uitgegaan van de standaard theme van Shopify. Mogelijk moet je de click-listener (dikgedrukt) specifiek maken voor jouw shop. Bevat je productoverzicht-pagina ook add-to-cart buttons? Dan zal je de click-listener met de functie daaronder ook op die pagina toe moeten voegen.
Stap 6: GTM container code toevoegen aan de de bevestigingspagina van je shop
Om de container code ook op de bevestigingspagina te plaatsen, voer je de volgende stappen uit.
Ga in je Shopify beheeromgeving naar “Instellingen” en dan “Checkout en accounts“.
Scroll naar “Bestelstatuspagina“. Onder “Aanvullende scripts” voeg je de onderstaande code toe.
Dit zorgt ervoor dat de GTM container wordt geladen en er een purchase event naar de dataLayer wordt gestuurd.
Vergeet niet om het GTM-CONTAINER-ID aan te passen.
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
{% if first_time_accessed %}
var sh_transaction_id = "{{ order.order_number }}";
if (sh_transaction_id == "") {
sh_transaction_id = Date.now();
}
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: sh_order_id,
currency: "{{ order.currency }}",
value: {{ total_price | times: 0.01 }},
tax: {{ tax_price | times: 0.01 }},
shipping: {{ shipping_price | times: 0.01 }},
items: [
{% for line_item in line_items %}{
item_id: "{{ line_item.sku }}",
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','GTM-CONTAINER-ID');</script>
<!-- End Google Tag Manager --> Gefeliciteerd! De transacties van je Shopify shop worden nu gemeten in GA4.
Om zeker te weten dat alles gelukt is, is het nu tijd om alles grondig te testen. In het “Monetisation” rapport in GA4 moet je de e-commerce events nu binnen zien komen.
Afhankelijk van je Shopify theme, moet je wellicht nog wat wijzigingen maken in de code-voorbeelden.
En omdat het geen officieel ondersteunde methode is, kan het natuurlijk ook gebeuren dat er aan de kant van Shopify iets verandert waardoor deze oplossing niet meer werkt.