> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lemrock.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Suivi des conversions sur Shopify

> Installez le Pixel Lemrock comme pixel personnalisé Shopify, sans modifier votre thème.

Le Pixel Lemrock montre quelles publicités Lemrock mènent à des ventes dans votre boutique. Lemrock peut ainsi vous remonter vos résultats et diffuser davantage auprès des acheteurs. Sur Shopify, il s'installe comme un pixel personnalisé : un seul code à coller dans votre administration Shopify, sans modifier votre thème.

Il vous faut votre **ID de pixel**. Il commence par `lr_px_`, suivi de 22 caractères. Votre contact Lemrock vous le communique.

## 1. Ajouter le pixel

1. Dans Shopify, allez dans **Paramètres > Événements clients > Ajouter un pixel personnalisé**. Nommez-le `Lemrock`.
2. Dans **Confidentialité des clients**, réglez **Autorisation** sur **Obligatoire** et cochez **Marketing**. Le pixel ne fonctionne alors que pour les visiteurs qui acceptent les cookies marketing.
3. Collez le code ci-dessous dans **Code** et remplacez `lr_px_...` par votre ID de pixel.
4. Cliquez sur **Enregistrer**, puis sur **Connecter**.

```js theme={null}
const PIXEL_ID = "lr_px_...";
const VALIDATE_ONLY = false; // true while testing: events are checked, not recorded

const ENDPOINT = "https://api.lemrock.com/v1/browser/events";
const COOKIE = "lemrock_click";
const LRCLID = /^lr_clk_[A-Za-z0-9_-]{22}$/;

const cents = (money) => {
  if (!money || money.amount == null) return undefined;
  return Math.round(Number(money.amount) * 100);
};

const item = (variant, quantity) => ({
  id: String(variant?.product?.id ?? ""),
  name: variant?.product?.title,
  quantity,
  amount: cents(variant?.price),
  currency: variant?.price?.currencyCode,
});

const checkoutData = (checkout) => ({
  amount: cents(checkout.subtotalPrice),
  currency: checkout.currencyCode,
  contents: checkout.lineItems.map((line) => item(line.variant, line.quantity)),
});

async function sha256(text) {
  const bytes = new TextEncoder().encode(text);
  const hash = await crypto.subtle.digest("SHA-256", bytes);
  return Array.from(new Uint8Array(hash), (b) =>
    b.toString(16).padStart(2, "0"),
  ).join("");
}

async function send(eventType, eventId, event, data, user) {
  const lrclid = await browser.cookie.get(COOKIE);
  if (!lrclid && !user) return;

  fetch(ENDPOINT, {
    method: "POST",
    headers: { "content-type": "application/json" },
    keepalive: true,
    body: JSON.stringify({
      event_type: eventType,
      event_id: String(eventId),
      event_time_ms: Date.parse(event.timestamp) || Date.now(),
      lrclid: lrclid || undefined,
      user,
      source_url: event.context.document.location.href,
      pixel_id: PIXEL_ID,
      pixel_version: "shopify-1.0.0",
      data: { type: "contents", ...data },
      validate_only: VALIDATE_ONLY,
    }),
  });
}

analytics.subscribe("page_viewed", async (event) => {
  const url = new URL(event.context.document.location.href);
  const token = (url.searchParams.get("lrclid") || "").trim();
  if (LRCLID.test(token)) {
    await browser.cookie.set(
      `${COOKIE}=${token}; path=/; max-age=${90 * 86400}; SameSite=Lax; Secure`,
    );
  }
});

analytics.subscribe("product_viewed", (event) => {
  const variant = event.data.productVariant;
  send("contents_viewed", event.id, event, { contents: [item(variant, 1)] });
});

analytics.subscribe("product_added_to_cart", (event) => {
  const line = event.data.cartLine;
  send("items_added", event.id, event, {
    amount: cents(line.cost.totalAmount),
    currency: line.cost.totalAmount.currencyCode,
    contents: [item(line.merchandise, line.quantity)],
  });
});

analytics.subscribe("checkout_started", (event) => {
  send("checkout_started", event.id, event, checkoutData(event.data.checkout));
});

analytics.subscribe("checkout_completed", async (event) => {
  const checkout = event.data.checkout;
  const email = checkout.email?.trim().toLowerCase();
  const user = email ? { email_sha256: await sha256(email) } : undefined;
  send(
    "order_created",
    checkout.order?.id ?? event.id,
    event,
    checkoutData(checkout),
    user,
  );
});
```

* **Les identifiants produits doivent correspondre à votre flux catalogue.** Le code envoie l'ID produit Shopify. Si votre flux utilise des ID de variante ou des SKU, remplacez `variant?.product?.id` par `variant?.id` ou `variant?.sku`.
* **Le code envoie l'e-mail du client haché, jamais en clair.** Il est haché dans le navigateur avant l'envoi : Lemrock ne reçoit jamais l'adresse elle-même. Rien à configurer.

## 2. Vérifier l'installation

1. **Activez le mode test.** Passez `VALIDATE_ONLY = true` et enregistrez.
2. **Simulez un clic publicitaire.** Ouvrez votre boutique en ajoutant `?lrclid=lr_clk_0000000000000000000000` à l'adresse, puis acceptez le bandeau cookies.
3. **Parcourez le tunnel d'achat.** Consultez un produit, ajoutez-le au panier et passez une commande de test.
4. **Ouvrez les outils de développement de votre navigateur**, onglet **Réseau**, et filtrez sur `browser/events`. Chaque étape affiche une requête avec le statut `202`.
5. **Désactivez le mode test.** Passez `VALIDATE_ONLY = false` et enregistrez.

Si quelque chose ne va pas :

* **Aucune requête :** vérifiez que le pixel est connecté et que le bandeau cookies a été accepté. [Shopify Pixel Helper](https://help.shopify.com/fr/manual/promoting-marketing/pixels/custom-pixels/testing) indique si le pixel s'exécute.
* **Statut `400` :** la réponse indique le champ refusé par Lemrock.
* **Une modification n'apparaît pas au paiement :** un paiement garde la version du pixel avec laquelle il a commencé. Démarrez un nouveau paiement après avoir enregistré.
* **Vérifiez que vos redirections conservent** `lrclid` dans l'adresse.

Votre contact Lemrock peut confirmer que les événements arrivent. Envoyez-lui votre ID de pixel et l'heure de votre test.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.