Passt zu deinem bestehenden Stack

Skript im <head> deines Themes, über den Theme-Editor oder das Feld 'header scripts' deines Themes.

1. 1Melde dich unter jouwdomein.nl/wp-admin im Administrationsbereich an.
2. 2Klicke links im schwarzen Menü auf Design (Appearance) → Theme-Datei-Editor (Theme File Editor).
3. 3Wähle rechts in der Liste 'Theme-Dateien' den Theme-Header (header.php). Wenn du die Liste nicht siehst, nutze Schritt 6.
4. 4Suche im Code die Zeile </head>, meist etwa in Zeile 20 bis 40. Tipp: Nutze Strg+F (Cmd+F auf dem Mac) im Editor.
5. 5Setze den Cursor in die leere Zeile direkt über </head>, füge das Skript ein und klicke unten auf Datei aktualisieren (Update File).
6. 6Nutzt du Elementor, Divi, Astra oder ein Child-Theme? Gehe zu Design → Anpassen → Zusätzliches CSS/Head-Code oder zur Theme-Einstellung 'Header scripts' / 'Custom code' und füge das Skript dort in das HEAD-Feld ein.
7. 7Kein Codezugriff? Installiere das Plugin 'WPCode' oder 'Insert Headers and Footers', gehe zu Code Snippets → Header & Footer, füge das Skript in das Feld Header ein und klicke auf Save.

Ein Theme-Update kann header.php überschreiben. Verwende daher vorzugsweise ein Child-Theme oder das WPCode-Plugin.

Basispixel in theme.liquid; Käufe über einen Custom Pixel in Customer events.

1. 1Öffne Shopify → Online Store → Themes → aktives Theme → Edit code → Layout → theme.liquid. Platziere den Basispixel vor </head> und speichere.
2. 2Gehe für Käufe zu Settings → Customer events → Add custom pixel. Gib dem Pixel einen Namen, füge den Shopify-Code unten ein und ersetze sr_xxx durch deinen Pixelschlüssel.
3. 3Stelle die Analytics-Einwilligung gemäß deinen Shopify-Datenschutzeinstellungen ein und verbinde den Custom Pixel. Der Adapter nutzt checkout_completed und Shopify browser.cookie, nicht das window deiner Shopseite.
4. 4Der Adapter sendet Bestell-ID, Betrag und Währung. Ohne erfasste Roots-Werbeeinwilligung sendet er weder E-Mail noch Telefonnummer und aktiviert keine Plattformweitergabe.
5. 5Nutze zusätzlich den Bestell-Webhook zur Serverbestätigung. Konfiguriere den Roots-Webhook-Schlüssel und die Shopify-HMAC-Signatur über eine sichere Serveranbindung.

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 kann fehlen, wenn die Dankeseite nicht lädt. Ein authentifizierter Bestell-Webhook ist eine zusätzliche Serverbestätigung, kein Ersatz für Einwilligung.

Skript über Content → Design → Configuration im HTML Head deiner Store View.

1. 1Melde dich im Magento-Adminbereich an (meist jouwdomein.nl/admin).
2. 2Klicke links im Menü auf Content → unter 'Design' auf Configuration.
3. 3Du siehst eine Tabelle mit Default, Website und Store View. Klicke rechts bei der Store View, die du messen möchtest, auf Edit.
4. 4Klappe den Bereich HTML Head auf (klicke auf den Titel).
5. 5Füge das Skript in das Feld 'Scripts and Style Sheets' ein – unter vorhandenen Zeilen, nicht dazwischen.
6. 6Klicke oben rechts auf Save Configuration.
7. 7Gehe zu System → Tools → Cache Management, markiere Page Cache und Configuration, wähle Refresh und klicke auf Submit.

Skript im websiteweiten Custom-Code-Head deines Projekts.

1. 1Öffne dein Projekt im Webflow Designer.
2. 2Klicke oben links auf das Webflow-Logo → Site settings (oder gehe vom Dashboard zum Projekt → Settings).
3. 3Klicke oben auf den Tab Custom code.
4. 4Füge das Skript in das obere Feld 'Head code' ein (über 'Footer code').
5. 5Klicke oben rechts auf Save changes.
6. 6Klicke danach oben rechts auf Publish → wähle deine Domain(s) → Publish to selected domains.

Skript als Custom Code auf allen Seiten, geladen im Head.

1. 1Gehe zu manage.wix.com und wähle deine Website.
2. 2Klicke unten links auf Settings (Einstellungen).
3. 3Scrolle zum Bereich 'Advanced' und klicke auf Custom code.
4. 4Klicke oben rechts bei 'Head' auf + Add Custom Code.
5. 5Füge das Skript in das große Codefeld ein und nenne es 'Roots pixel'.
6. 6Wähle unter 'Add Code to Pages' die Option All pages und aktiviere 'Load code on each new page'.
7. 7Wähle unter 'Place Code in' die Option Head und klicke auf Apply.
8. 8Klicke oben rechts im Editor auf Publish, wenn noch unveröffentlichte Änderungen vorliegen.

Skript per Code Injection im Header deiner Website.

1. 1Melde dich an und öffne deine Website im Squarespace-Administrationsbereich.
2. 2Klicke im linken Menü auf Settings → Developer tools (bei Version 7.1: Website → Website tools).
3. 3Klicke auf Code injection.
4. 4Füge das Skript in das obere Feld mit der Überschrift Header ein.
5. 5Klicke oben links auf Save.
6. 6Betreibst du einen Onlineshop? Füge das Skript auch in das Feld 'Order confirmation page' mit srAttribution.track("purchase", { value: {orderGrandTotal} }) ein.

Basispixel über WPCode oder functions.php; purchase auf der Dankeseite über woocommerce_thankyou.

1. 1Platziere den Basispixel über WPCode → Header & Footer → Header oder nutze den wp_head-Hook aus dem PHP-Beispiel unten. Nutze nur eine der beiden Methoden.
2. 2Füge den PHP-Code für woocommerce_thankyou über ein Child-Theme oder ein PHP-Snippet in WPCode hinzu. Nutze deinen eigenen Pixelschlüssel.
3. 3Das purchase-Event wird nur für bezahlte Bestellungen gesendet, mit Bestellwert, Währung, Bestell-ID und Rechnungs-E-Mail. Roots sendet Kontaktdaten nur bei erfasster Werbeeinwilligung.
4. 4Erstelle zur Serverbestätigung eine sichere Bestellanbindung an /api/public/order mit x-roots-platform: woocommerce und x-roots-secret. Speichere sr_vid in den Bestellmetadaten, damit Besuch und Bestellung verknüpft werden können.
5. 5WooCommerce → Settings → Advanced → Webhooks bietet order.created/order.updated. Ein Server-Relay kann x-roots-secret ergänzen und nach Zahlungsstatus filtern; die native WooCommerce-Signatur ersetzt den Roots-Schlüssel nicht.

// 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 auf All Pages; eigene Conversions über ein dataLayer-Event.

1. 1Erstelle in GTM ein Custom-HTML-Tag mit dem Basispixel und dem Trigger All Pages. Ersetze sr_xxx durch deinen Pixelschlüssel.
2. 2Aktiviere für dieses Roots-Tag keinen zusätzlichen Consent-Trigger und keine zusätzliche Einwilligungsanforderung: sr.js verarbeitet die Einwilligung selbst. Das gilt nicht für andere Werbe-Tags. Dein Cookie-Banner lädt weiterhin vor GTM.
3. 3Erstelle die Data Layer Variables roots_name, roots_value und roots_currency sowie ein zweites Custom-HTML-Tag mit dem Conversion-Code unten. Trigger: Custom Event roots_conversion.
4. 4Lass deine Website roots_conversion erst nach tatsächlicher Bestätigung der Reservierung oder Conversion pushen. Nutze nicht nur einen Button-Klick. Veröffentliche den Container nach der Prüfung.

<!-- 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>

Skript direkt vor dem schließenden </head>-Tag in deinem gemeinsamen Template oder Layout.

1. 1Öffne die Datei, die auf jeder Seite geladen wird: index.html, base.html.twig, layout.blade.php, _document.tsx, app.html oder deine Root-Layout-Komponente.
2. 2Füge das Skript als letzte Zeile vor </head> ein, damit Klick-IDs bereits beim ersten Rendern erfasst werden.
3. 3Nutzt du React, Vue oder Svelte mit SSR? Setze das Skript ins HTML-Template statt in eine Komponente, damit es bereits beim ersten Seitenaufruf lädt.
4. 4Committe und deploye deine Website.
5. 5Sende eigene Conversions mit srAttribution.track("naam", { value: 89.5, currency: "EUR" }), sobald die Conversion erfolgreich ist.
6. 6Sende serverseitige Conversions (Erstattungen, Offline-Bestellungen, telefonische Buchungen) über die Conversion-API mit demselben Pixelschlüssel.