S'intègre à votre stack existante

Script dans le <head> de votre thème, via l’éditeur de thème ou le champ 'header scripts' du thème.

1. 1Connectez-vous à votre interface d’administration via jouwdomein.nl/wp-admin.
2. 2Dans le menu noir à gauche, cliquez sur Apparence (Appearance) → Éditeur de fichiers des thèmes (Theme File Editor).
3. 3Dans la liste 'Fichiers du thème' à droite, sélectionnez En-tête du thème (header.php). Si cette liste n’apparaît pas, passez à l’étape 6.
4. 4Recherchez la ligne </head> dans le code, généralement vers les lignes 20 à 40. Astuce : utilisez Ctrl+F (Cmd+F sur Mac) dans l’éditeur.
5. 5Placez le curseur sur la ligne vide juste au-dessus de </head>, collez le script et cliquez en bas sur Mettre à jour le fichier (Update File).
6. 6Vous utilisez Elementor, Divi, Astra ou un thème enfant ? Accédez à Apparence → Personnaliser → CSS additionnel/Code Head, ou au réglage 'Header scripts' / 'Custom code' du thème, puis collez le script dans le champ HEAD.
7. 7Pas d’accès au code ? Installez l’extension 'WPCode' ou 'Insert Headers and Footers', accédez à Code Snippets → Header & Footer, collez le script dans le champ Header et cliquez sur Save.

Une mise à jour du thème peut écraser header.php. Privilégiez donc un thème enfant ou l’extension WPCode.

Pixel de base dans theme.liquid ; achats via un Custom Pixel dans Customer events.

1. 1Ouvrez Shopify → Online Store → Themes → thème actif → Edit code → Layout → theme.liquid. Placez le pixel de base avant </head> et enregistrez.
2. 2Pour les achats, accédez à Settings → Customer events → Add custom pixel. Nommez le pixel, collez le code Shopify ci-dessous et remplacez sr_xxx par votre clé de pixel.
3. 3Configurez le consentement analytique selon vos paramètres de confidentialité Shopify et connectez le Custom Pixel. L’adaptateur utilise checkout_completed et Shopify browser.cookie, pas le window de votre boutique.
4. 4L’adaptateur envoie l’identifiant de commande, le montant et la devise. Sans consentement publicitaire Roots enregistré, il n’envoie ni e-mail ni téléphone et n’active aucune transmission aux plateformes.
5. 5Utilisez aussi le webhook de commande pour la confirmation serveur. Configurez la clé webhook Roots et la signature HMAC Shopify via une intégration serveur sécurisée.

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 peut manquer si la page de remerciement ne se charge pas. Un webhook de commande authentifié apporte une confirmation serveur complémentaire, sans remplacer le consentement.

Script via Content → Design → Configuration dans le HTML Head de votre vue boutique.

1. 1Connectez-vous au panneau d’administration Magento (généralement jouwdomein.nl/admin).
2. 2Dans le menu de gauche, cliquez sur Content → Configuration sous 'Design'.
3. 3Un tableau affiche Default, Website et Store View. Cliquez sur Edit à droite de la vue boutique à mesurer.
4. 4Dépliez la section HTML Head (cliquez sur le titre).
5. 5Collez le script dans le champ 'Scripts and Style Sheets', après les lignes existantes, pas entre elles.
6. 6Cliquez sur Save Configuration en haut à droite.
7. 7Accédez à System → Tools → Cache Management, cochez Page Cache et Configuration, choisissez Refresh et cliquez sur Submit.

Script dans le code personnalisé du head global de votre projet.

1. 1Ouvrez votre projet dans le Webflow Designer.
2. 2Cliquez sur le logo Webflow en haut à gauche → Site settings (ou depuis votre tableau de bord, accédez au projet → Settings).
3. 3Cliquez sur l’onglet Custom code en haut.
4. 4Collez le script dans le champ du haut : 'Head code' (au-dessus de 'Footer code').
5. 5Cliquez sur Save changes en haut à droite.
6. 6Cliquez ensuite sur Publish en haut à droite → sélectionnez vos domaines → Publish to selected domains.

Script en code personnalisé sur toutes les pages, chargé dans le head.

1. 1Accédez à manage.wix.com et sélectionnez votre site.
2. 2Cliquez sur Settings (Paramètres) en bas à gauche.
3. 3Faites défiler jusqu’à 'Advanced' et cliquez sur Custom code.
4. 4En haut à droite, près de 'Head', cliquez sur + Add Custom Code.
5. 5Collez le script dans le grand champ de code et nommez-le 'Roots pixel'.
6. 6Sous 'Add Code to Pages', sélectionnez All pages et activez 'Load code on each new page'.
7. 7Sous 'Place Code in', sélectionnez Head et cliquez sur Apply.
8. 8Cliquez sur Publish en haut à droite de l’éditeur si des modifications restent à publier.

Script via l’injection de code dans l’en-tête de votre site.

1. 1Connectez-vous et ouvrez votre site dans l’administration Squarespace.
2. 2Dans le menu de gauche, cliquez sur Settings → Developer tools (version 7.1 : Website → Website tools).
3. 3Cliquez sur Code injection.
4. 4Collez le script dans le champ du haut intitulé Header.
5. 5Cliquez sur Save en haut à gauche.
6. 6Vous avez une boutique en ligne ? Collez aussi le script dans 'Order confirmation page' avec srAttribution.track("purchase", { value: {orderGrandTotal} }).

Pixel de base via WPCode ou functions.php ; purchase sur la page de remerciement via woocommerce_thankyou.

1. 1Placez le pixel de base via WPCode → Header & Footer → Header, ou utilisez le hook wp_head de l’exemple PHP ci-dessous. Utilisez une seule méthode, pas les deux.
2. 2Ajoutez le code PHP pour woocommerce_thankyou via un thème enfant ou un extrait PHP dans WPCode. Utilisez votre propre clé de pixel.
3. 3L’événement purchase n’est envoyé que pour une commande payée, avec valeur, devise, identifiant de commande et e-mail de facturation. Roots ne transmet les coordonnées qu’avec un consentement publicitaire enregistré.
4. 4Pour la confirmation serveur, créez une intégration de commande sécurisée vers /api/public/order avec x-roots-platform: woocommerce et x-roots-secret. Stockez sr_vid dans les métadonnées de commande pour relier visite et commande.
5. 5WooCommerce → Settings → Advanced → Webhooks propose order.created/order.updated. Un relais serveur peut ajouter x-roots-secret et filtrer le statut de paiement ; la signature native WooCommerce ne remplace pas la clé Roots.

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

Pixel de base comme balise Custom HTML sur All Pages ; conversions personnalisées via un événement dataLayer.

1. 1Dans GTM, créez une balise Custom HTML avec le pixel de base et le déclencheur All Pages. Remplacez sr_xxx par votre clé de pixel.
2. 2N’activez pas de déclencheur ni d’exigence de consentement supplémentaire pour cette balise Roots : sr.js gère lui-même le consentement. Cela ne s’applique pas aux autres balises publicitaires. Votre bannière cookies doit toujours se charger avant GTM.
3. 3Créez les Data Layer Variables roots_name, roots_value et roots_currency, puis une seconde balise Custom HTML avec le code de conversion ci-dessous. Déclencheur : Custom Event roots_conversion.
4. 4Faites envoyer roots_conversion par votre site une fois la réservation ou la conversion réellement confirmée. Un simple clic ne suffit pas. Publiez le conteneur après vérification.

<!-- 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 juste avant la balise fermante </head> dans votre modèle ou layout partagé.

1. 1Ouvrez le fichier chargé sur chaque page : index.html, base.html.twig, layout.blade.php, _document.tsx, app.html ou votre composant de layout racine.
2. 2Collez le script en dernière ligne avant </head> pour capturer les identifiants de clic dès le premier rendu.
3. 3Vous utilisez React, Vue ou Svelte avec SSR ? Placez le script dans le modèle HTML, pas dans un composant, pour qu’il se charge dès la première page vue.
4. 4Effectuez un commit et déployez votre site.
5. 5Envoyez vos conversions personnalisées avec srAttribution.track("naam", { value: 89.5, currency: "EUR" }) lorsque la conversion réussit.
6. 6Envoyez les conversions côté serveur (remboursements, commandes hors ligne, réservations téléphoniques) via l’API de conversion avec la même clé de pixel.