Fits your existing stack

Script in your theme's <head>, using the theme editor or your theme's 'header scripts' field.

1. 1Log in to your admin area at jouwdomein.nl/wp-admin.
2. 2In the black menu on the left, click Appearance → Theme File Editor.
3. 3In the 'Theme Files' list on the right, select Theme Header (header.php). If you cannot see this list, use step 6.
4. 4Find the </head> line in the code, usually around lines 20–40. Tip: use Ctrl+F (Cmd+F on Mac) in the editor.
5. 5Place your cursor on the blank line immediately above </head>, paste the script and click Update File at the bottom.
6. 6Using Elementor, Divi, Astra or a child theme? Go to Appearance → Customize → Additional CSS/Head code, or to the theme's 'Header scripts' / 'Custom code' setting, and paste the script into the HEAD field.
7. 7No access to code? Install the 'WPCode' or 'Insert Headers and Footers' plugin, go to Code Snippets → Header & Footer, paste the script into the Header box and click Save.

A theme update may overwrite header.php. Prefer a child theme or the WPCode plugin.

Base pixel in theme.liquid; purchases via a Custom Pixel in Customer events.

1. 1Open Shopify → Online Store → Themes → active theme → Edit code → Layout → theme.liquid. Place the base pixel before </head> and save.
2. 2For purchases, go to Settings → Customer events → Add custom pixel. Name the pixel, paste the Shopify code below and replace sr_xxx with your pixel key.
3. 3Set analytics consent according to your Shopify privacy settings and connect the Custom Pixel. The adapter uses checkout_completed and Shopify browser.cookie, not your storefront's window.
4. 4The adapter sends order ID, amount and currency. Without recorded Roots advertising consent, it sends neither email nor phone number and does not enable forwarding to platforms.
5. 5Also use the order webhook for server confirmation. Configure the Roots webhook key and Shopify HMAC signature through a secure server integration.

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 may be missing if the thank-you page does not load. An authenticated order webhook provides additional server confirmation, not a substitute for consent.

Script via Content → Design → Configuration in your store view's HTML Head.

1. 1Log in to your Magento admin panel (usually jouwdomein.nl/admin).
2. 2In the left menu, click Content → Configuration under 'Design'.
3. 3You will see a table with Default, Website and Store View. Click Edit on the right of the store view you want to track.
4. 4Expand the HTML Head section (click its title).
5. 5Paste the script into 'Scripts and Style Sheets', below existing lines, not between them.
6. 6Click Save Configuration at the top right.
7. 7Go to System → Tools → Cache Management, select Page Cache and Configuration, choose Refresh and click Submit.

Script in your project's site-wide custom code head.

1. 1Open your project in the Webflow Designer.
2. 2Click the Webflow logo at the top left → Site settings (or go from your dashboard to the project → Settings).
3. 3Click the Custom code tab at the top.
4. 4Paste the script into the top box: 'Head code' (above 'Footer code').
5. 5Click Save changes at the top right.
6. 6Then click Publish at the top right → select your domain(s) → Publish to selected domains.

Script as custom code on all pages, loaded in the head.

1. 1Go to manage.wix.com and select your site.
2. 2Click Settings at the bottom left.
3. 3Scroll to the 'Advanced' section and click Custom code.
4. 4At the top right, next to 'Head', click + Add Custom Code.
5. 5Paste the script into the large code box and name it 'Roots pixel'.
6. 6Under 'Add Code to Pages', select All pages and enable 'Load code on each new page'.
7. 7Under 'Place Code in', select Head and click Apply.
8. 8Click Publish at the top right of the editor if your site still has pending changes.

Script via code injection in your site's header.

1. 1Log in and open your site in the Squarespace admin area.
2. 2In the left menu, click Settings → Developer tools (in version 7.1: Website → Website tools).
3. 3Click Code injection.
4. 4Paste the script into the top field labelled Header.
5. 5Click Save at the top left.
6. 6Running an online store? Also paste the script into 'Order confirmation page' with srAttribution.track("purchase", { value: {orderGrandTotal} }).

Base pixel via WPCode or functions.php; purchase on the thank-you page via woocommerce_thankyou.

1. 1Place the base pixel via WPCode → Header & Footer → Header, or use the wp_head hook from the PHP example below. Use one or the other, not both.
2. 2Add the PHP code for woocommerce_thankyou using a child theme or a PHP snippet in WPCode. Use your own pixel key.
3. 3The purchase event is only sent for a paid order, with order value, currency, order ID and billing email. Roots only sends contact details when advertising consent has been recorded.
4. 4For server confirmation, create a secure order integration to /api/public/order with x-roots-platform: woocommerce and x-roots-secret. Store sr_vid in order metadata so visits and orders can be linked.
5. 5WooCommerce → Settings → Advanced → Webhooks offers order.created/order.updated. A server relay can add x-roots-secret and filter payment status; the native WooCommerce signature does not replace the Roots key.

// 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>';
});

Base pixel as a Custom HTML tag on All Pages; custom conversions via a dataLayer event.

1. 1In GTM, create a Custom HTML tag with the base pixel and the All Pages trigger. Replace sr_xxx with your pixel key.
2. 2Do not enable an extra consent trigger or additional consent requirement for this Roots tag: sr.js handles consent itself. This does not apply to other advertising tags. Your cookie banner must still load before GTM.
3. 3Create Data Layer Variables roots_name, roots_value and roots_currency, and a second Custom HTML tag with the conversion code below. Trigger: Custom Event roots_conversion.
4. 4Have your website push roots_conversion after the booking or conversion is actually confirmed. Do not use just a button click. Publish the container after checking.

<!-- 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 immediately before the closing </head> tag in your shared template or layout.

1. 1Open the file loaded on every page: index.html, base.html.twig, layout.blade.php, _document.tsx, app.html or your root layout component.
2. 2Paste the script as the last line before </head> so click IDs are captured on the first render.
3. 3Using React, Vue or Svelte with SSR? Put the script in the HTML template, not in a component, so it also loads on the first pageview.
4. 4Commit and deploy your site.
5. 5Send custom conversions with srAttribution.track("naam", { value: 89.5, currency: "EUR" }) when the conversion succeeds.
6. 6Send server-side conversions (refunds, offline orders, phone bookings) via the conversion API using the same pixel key.