Dynamische waardes ophalen vanuit Magento-webshop

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

• via de dataLayer (aanbevolen)
• 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 (aanbevolen)

Veel Magento-webshops vullen automatisch een dataLayer met productinformatie op productpagina’s. Je kunt deze gebruiken om waardes zoals de SKU, productnaam en prijs dynamisch op te halen.

Op een productpagina bevat de dataLayer bijvoorbeeld dit object:

{
  "event": "productDetail",
  "ecommerce": {
    "detail": {
      "products": [{
        "id": "SKU-123",
        "name": "Voorbeeldproduct",
        "price": "19.95"
      }]
    }
  }
}

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

• ecommerce.detail.products.0.id voor de SKU
• ecommerce.detail.products.0.name voor de productnaam
• ecommerce.detail.products.0.price voor de prijs

Let op: niet elk Magento-thema of elke extensie gebruikt precies 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

Heeft je webshop geen bruikbare dataLayer? Dan 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 kiest, hangt af van hoe de informatie is opgenomen in de HTML.

Voorbeeld 1: SKU in een zichtbaar element

Stel dat je thema de SKU toont in een span-element met een class:

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

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

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

Je haalt de waarde dan op via het pad:

document.querySelector('.product-sku').innerText

Voorbeeld 2: SKU in een meta-tag

Sommige Magento thema’s plaatsen de SKU in een meta-tag:

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

Deze kun je uitlezen via een aangepaste JavaScript-variabele met:

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