Past op je bestaande stack

Script in de <head> van je thema, via de themabewerker of het 'header scripts'-veld van je thema.

1. 1Log in op je beheeromgeving via jouwdomein.nl/wp-admin.
2. 2Klik links in het zwarte menu op Weergave (Appearance) → Thema-bestandsbewerker (Theme File Editor).
3. 3Kies rechts in de lijst 'Themabestanden' het bestand Thema-header (header.php). Zie je die lijst niet, dan gebruik je stap 6.
4. 4Zoek in de code de regel </head> - meestal rond regel 20 tot 40. Tip: gebruik Ctrl+F (Cmd+F op Mac) in de editor.
5. 5Zet je cursor op de lege regel vlák bóven </head>, plak het script en klik onderaan op Bestand bijwerken (Update File).
6. 6Werk je met Elementor, Divi, Astra of een child-theme? Ga dan naar Weergave → Aanpassen → Extra CSS/Head-code, of naar de thema-instelling 'Header scripts' / 'Custom code' en plak het script daar in het HEAD-veld.
7. 7Geen toegang tot code? Installeer de plugin 'WPCode' of 'Insert Headers and Footers', ga naar Code Snippets → Header & Footer, plak het script in het vak Header en klik op Save.

Bij een thema-update kan header.php overschreven worden. Gebruik daarom bij voorkeur een child-theme of de WPCode-plugin.

Basispixel in theme.liquid; aankopen via een Custom Pixel in Customer events.

1. 1Open Shopify → Online Store → Themes → actief thema → Edit code → Layout → theme.liquid. Plaats de basispixel vóór </head> en sla op.
2. 2Ga voor aankopen naar Settings → Customer events → Add custom pixel. Geef de pixel een naam, plak de Shopify-code hieronder en vervang sr_xxx door je pixelsleutel.
3. 3Stel de analytics-toestemming in volgens je Shopify privacyinstellingen en verbind de Custom Pixel. De adapter gebruikt checkout_completed en Shopify browser.cookie, niet het window van je winkelpagina.
4. 4De adapter stuurt order-id, bedrag en valuta. Zonder geregistreerde Roots-advertentietoestemming verstuurt hij geen e-mail of telefoon en activeert hij geen platformdoorgifte.
5. 5Gebruik daarnaast de order-webhook voor serverbevestiging. Configureer de Roots-webhooksleutel en Shopify HMAC-handtekening via een beveiligde serverkoppeling.

const ROOTS_KEY = "sr_xxx";
const ROOTS_ENDPOINT = "https://rootsmetrics.com/api/public/collect";
let privacyStatus = init.customerPrivacy;
const privacyApi = typeof api !== "undefined" ? api.customerPrivacy : customerPrivacy;
privacyApi.subscribe("visitorConsentCollected", (event) => {
  privacyStatus = event.customerPrivacy;
});
// Self-contained adapter inside Shopify's sandbox, not the storefront window.
const srAttribution = {
  async track(name, { value, currency, order_id, email, phone }, event) {
    if (!privacyStatus.analyticsProcessingAllowed) return;
    const visitor = await browser.cookie.get("sr_vid");
    const url = new URL(event.context.document.location.href);
    const response = await fetch(ROOTS_ENDPOINT, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        key: ROOTS_KEY,
        visitor_id: visitor || event.clientId,
        event_type: "conversion",
        event_name: name,
        value_cents: Math.round(Number(value) * 100),
        currency,
        external_id: "order:" + order_id,
        dedup_id: "order:" + order_id,
        page_url: url.origin + url.pathname,
        consent_state: "unknown",
        advertising_consent: false
        // Shopify permission is not a recorded Roots advertising consent.
        // Email and phone are intentionally not transmitted by this adapter.
      })
    });
    if (!response.ok) throw new Error("Roots purchase was not accepted: " + response.status);
  }
};
analytics.subscribe("checkout_completed", async (event) => {
  const checkout = event.data.checkout;
  if (!checkout.order?.id) return;
  await srAttribution.track("purchase", {
    value: checkout.totalPrice.amount,
    currency: checkout.currencyCode,
    order_id: checkout.order.id.split("/").pop(),
    email: checkout.email,
    phone: checkout.phone
  }, event);
});

checkout_completed kan ontbreken als de bedankpagina niet laadt. Een geauthenticeerde order-webhook is een aanvullende serverbevestiging, geen vervanging voor toestemming.

Script via Content → Design → Configuration in de HTML Head van je storeview.

1. 1Log in op je Magento-adminpaneel (meestal jouwdomein.nl/admin).
2. 2Klik links in het menu op Content → onder 'Design' op Configuration.
3. 3Je ziet nu een tabel met Default, Website en Store View. Klik bij de storeview waarvoor je wilt meten rechts op Edit.
4. 4Klap de sectie HTML Head open (klik op de titel).
5. 5Plak het script in het veld 'Scripts and Style Sheets' - onderaan bestaande regels, niet ertussen.
6. 6Klik rechtsboven op Save Configuration.
7. 7Ga naar System → Tools → Cache Management, vink Page Cache en Configuration aan, kies Refresh en klik op Submit.

Script in de site-brede custom code head van je project.

1. 1Open je project in de Webflow Designer.
2. 2Klik linksboven op het Webflow-logo → Site settings (of ga vanuit je dashboard naar het project → Settings).
3. 3Klik bovenin op de tab Custom code.
4. 4Plak het script in het bovenste vak: 'Head code' (staat boven 'Footer code').
5. 5Klik rechtsboven op Save changes.
6. 6Klik daarna rechtsboven op Publish → selecteer je domein(en) → Publish to selected domains.

Script als custom code op alle pagina's, geladen in de head.

1. 1Ga naar manage.wix.com en kies je site.
2. 2Klik links onderaan op Settings (Instellingen).
3. 3Scroll naar het blok 'Advanced' en klik op Custom code.
4. 4Klik rechtsboven bij 'Head' op + Add Custom Code.
5. 5Plak het script in het grote codevak en geef het de naam 'Roots pixel'.
6. 6Kies bij 'Add Code to Pages' de optie All pages en zet 'Load code on each new page' aan.
7. 7Kies bij 'Place Code in' de optie Head en klik op Apply.
8. 8Klik rechtsboven in de editor op Publish als je site nog wijzigingen heeft openstaan.

Script via code injection in de header van je site.

1. 1Log in en open je site in de Squarespace-beheeromgeving.
2. 2Klik in het linkermenu op Settings → Developer tools (bij versie 7.1: Website → Website tools).
3. 3Klik op Code injection.
4. 4Plak het script in het bovenste veld met de kop Header.
5. 5Klik linksboven op Save.
6. 6Heb je een webshop? Plak het script ook in het veld 'Order confirmation page' met srAttribution.track("purchase", { value: {orderGrandTotal} }).

Basispixel via WPCode of functions.php; purchase op de bedankpagina via woocommerce_thankyou.

1. 1Plaats de basispixel via WPCode → Header & Footer → Header, of gebruik de wp_head-hook uit het PHP-voorbeeld hieronder. Gebruik één van beide, niet allebei.
2. 2Voeg de PHP-code voor woocommerce_thankyou toe via een child theme of een PHP-snippet in WPCode. Gebruik je eigen pixelsleutel.
3. 3Het purchase-event wordt alleen voor een betaalde order verstuurd, met orderwaarde, valuta, order-id en facturatie-e-mail. Roots verzendt contactgegevens alleen bij geregistreerde advertentietoestemming.
4. 4Maak voor serverbevestiging een beveiligde orderkoppeling naar /api/public/order met x-roots-platform: woocommerce en x-roots-secret. Bewaar sr_vid in ordermeta zodat bezoek en order te koppelen zijn.
5. 5WooCommerce → Settings → Advanced → Webhooks biedt order.created/order.updated. Een serverrelay kan x-roots-secret toevoegen en betaalstatus filteren; de native WooCommerce-signature vervangt de Roots-sleutel niet.

// PHP: child theme functions.php or a PHP snippet in WPCode.
add_action('wp_head', function () {
    echo '<script async src="https://rootsmetrics.com/sr.js" data-key="sr_xxx"></script>';
});
add_action('woocommerce_thankyou', function ($order_id) {
    $order = wc_get_order($order_id);
    if (!$order || !$order->is_paid()) return;
    $payload = wp_json_encode([
        'value' => (float) $order->get_total(),
        'currency' => $order->get_currency(),
        'orderId' => (string) $order->get_id(),
        'email' => $order->get_billing_email(),
        'phone' => $order->get_billing_phone()
    ], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
    echo '<script>window.addEventListener("load", function () {
        if (window.srAttribution) srAttribution.track("purchase", ' . $payload . ');
    });</script>';
});

Basispixel als Custom HTML-tag op All Pages; eigen conversies via een dataLayer-event.

1. 1Maak in GTM een Custom HTML-tag met de basispixel en trigger All Pages. Vervang sr_xxx door je pixelsleutel.
2. 2Zet voor deze Roots-tag geen extra consent-trigger of aanvullende consentvereiste aan: sr.js verwerkt toestemming zelf. Dit geldt niet voor andere advertentietags. Je cookiebanner blijft vóór GTM laden.
3. 3Maak Data Layer Variables roots_name, roots_value en roots_currency en een tweede Custom HTML-tag met de conversiecode hieronder. Trigger: Custom Event roots_conversion.
4. 4Laat je website roots_conversion pushen nadat de reservering of conversie werkelijk is bevestigd. Gebruik niet alleen een knopklik. Publiceer de container na controle.

<!-- Custom HTML: All Pages, no additional consent requirement.
     sr.js handles consent. Keep your CMP before GTM. -->
<script async src="https://rootsmetrics.com/sr.js" data-key="sr_xxx"></script>

<!-- Push ONLY after a confirmed conversion, not a button click. -->
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({event: "roots_conversion", roots_name: "reservering", roots_value: 84.5, roots_currency: "EUR"});
</script>

<!-- Second Custom HTML tag: Custom Event trigger roots_conversion.
     Create Data Layer Variables roots_name, roots_value, roots_currency.
     Tag sequencing: load the Roots base tag first. -->
<script>
(function () {
  var name = {{roots_name}}, value = {{roots_value}}, currency = {{roots_currency}};
  var attempts = 0;
  function send() {
    if (window.srAttribution) srAttribution.track(name, {value: value, currency: currency});
    else if (++attempts < 100) setTimeout(send, 100);
  }
  send();
})();
</script>

Script vlak voor de sluitende </head>-tag in je gedeelde template of layout.

1. 1Open het bestand dat op elke pagina wordt geladen: index.html, base.html.twig, layout.blade.php, _document.tsx, app.html of je root-layoutcomponent.
2. 2Plak het script als laatste regel vóór </head>, zodat click-ID's al bij de eerste render worden vastgelegd.
3. 3Gebruik je React, Vue of Svelte met SSR? Zet het script in het HTML-template, niet in een component - zo laadt het ook op de eerste pageview.
4. 4Commit en deploy je site.
5. 5Eigen conversies stuur je met srAttribution.track("naam", { value: 89.5, currency: "EUR" }) op het moment dat de conversie slaagt.
6. 6Server-side conversies (refunds, offline orders, telefonische boekingen) stuur je via de conversie-API met dezelfde pixelsleutel.