Dynamische waardes ophalen vanuit Shopify-webshop

Wil je gegevens zoals de SKU, naam of prijs van een product meesturen in een event richting Copernica? In een Shopify-webshop kun je deze waardes op twee manieren ophalen:

• via de dataLayer (als je thema of app deze gebruikt)
• via de HTML van de pagina zelf

In dit artikel leggen we uit hoe je beide methodes gebruikt. Voor instructies over hoe je de opgehaalde waardes in een tag verwerkt, verwijzen we je naar het artikel over het gebruik van copernica.trigger() in Google Tag Manager.

Methode 1: de dataLayer gebruiken

Sommige Shopify-thema’s of apps vullen automatisch een dataLayer met productinformatie op productpagina’s. Deze kun je gebruiken om waardes zoals de SKU, naam of prijs dynamisch op te halen.

Op een productpagina bevat de dataLayer bijvoorbeeld dit object:

{
  "event": "view_item",
  "ecommerce": {
    "items": [{
      "item_id": "SKU-123",
      "item_name": "Voorbeeldproduct",
      "price": 19.95
    }]
  }
}

In dat geval kun je de volgende paden gebruiken om waardes op te halen:

• ecommerce.items.0.item_id voor de SKU
• ecommerce.items.0.item_name voor de productnaam
• ecommerce.items.0.price voor de prijs

Let op: niet elk thema of app gebruikt deze structuur. Open de browserconsole (rechter muisknop → Inspecteren → tabblad Console), typ dataLayer en druk op Enter. Je ziet dan een lijst met objecten. Zoek het object met productinformatie en bepaal het juiste pad op basis van de structuur die daar wordt getoond.

Methode 2: de HTML van de pagina uitlezen

Als je Shopify-thema geen dataLayer gebruikt, kun je de benodigde waardes ook direct uit de HTML van de pagina halen, bijvoorbeeld via een class, tag of meta-tag.

Je kunt hiervoor in Google Tag Manager gebruikmaken van een DOM-variabele of een aangepaste JavaScript-variabele. Welke methode je gebruikt, hangt af van hoe je thema de informatie in de HTML opneemt.

Voorbeeld 1: SKU in een zichtbaar element

Veel Shopify-thema’s tonen de SKU in een element zoals:

<span class="sku">SKU-123</span>

In dat geval kun je in GTM een DOM-variabele gebruiken met:

• Selectiemethode: CSS-selector
• Elementselector: .sku
• Kenmerk: Inner text

Je haalt de waarde dan op via het pad:

document.querySelector('.sku').innerText

Voorbeeld 2: SKU in een meta-tag

Sommige Shopify-thema’s voegen de SKU toe aan een meta-tag:

<meta property="product:sku" content="SKU-123" />

Deze kun je uitlezen via een aangepaste JavaScript-variabele:

function() {
  const productSku = document.querySelector('meta[property="product:sku"]');
  return productSku ? productSku.content : undefined;
}