DocumentationShopify

Shopify

Un pixel personnalisé, à coller dans l’administration Shopify : pages vues, fiches produit, panier, commande et achats, sans donnée client.

Sur cette page
  1. Installer le pixel
  2. Événements transmis
  3. Vérifier la boutique
  4. Limites

Installer le pixel#

  1. Copiez le code du pixel

    Dans la console, Installation › Installer le traceur › Shopify : le code y est déjà rempli avec l’identifiant de votre site.

  2. Créez un pixel personnalisé

    Dans l’administration Shopify : Paramètres › Événements clients › Ajouter un pixel personnalisé. Donnez-lui un nom, par exemple « Kreomnis ».

  3. Collez le code, enregistrez, puis cliquez sur « Connecter »

    Le pixel est actif sur la boutique et le tunnel de commande.

Pixel personnalisé Shopifyjs
// Shopify : Paramètres › Événements clients › Ajouter un pixel personnalisé, coller ceci, puis Connecter.
const SITE = 'ID_DU_SITE';
const API = 'https://kreomnisindexation.com/api/collect';

// Origine + chemin + utm_* / ref : le reste de la requête peut contenir des données personnelles.
function clean(href, keepQuery) {
  try {
    const u = new URL(href);
    const q = new URLSearchParams();
    if (keepQuery) u.searchParams.forEach((v, k) => { if (/^utm_|^ref$/.test(k)) q.append(k, v); });
    const s = q.toString();
    return u.origin + u.pathname + (s ? '?' + s : '');
  } catch (e) { return null; }
}
function send(n, event, extra) {
  try {
    const href = event?.context?.document?.location?.href || init?.context?.document?.location?.href;
    const u = href && clean(href, true);
    if (!u) return;
    const body = Object.assign({ s: SITE, n: n, u: u }, extra || {});
    fetch(API, { method: 'POST', body: JSON.stringify(body), keepalive: true, headers: { 'Content-Type': 'text/plain' } }).catch(() => {});
  } catch (e) { /* jamais d'erreur visible pour la boutique */ }
}
function money(m) {
  const n = Number(m?.amount);
  return Number.isFinite(n) ? n : null;
}
// cartLine : { merchandise, quantity } ; lineItem de commande : { variant, title, quantity }.
const str = (x, n) => (x === undefined || x === null || x === '' ? null : String(x).slice(0, n));
function line(l) {
  const v = l?.merchandise || l?.variant || {};
  const p = v.product || {};
  const price = money(v.price);
  return { id: str(v.sku || v.id || p.id, 100), name: str(p.title || l?.title || v.title, 200) || 'Produit', category: str(p.type, 100),
    variant: str(v.title, 100), price: price !== null && price >= 0 ? price : null, quantity: Math.max(1, Math.round(Number(l?.quantity) || 1)) };
}
const lines = (list) => (Array.isArray(list) ? list.slice(0, 50).map(line) : []);

analytics.subscribe('page_viewed', (e) => {
  const ref = e?.context?.document?.referrer;
  send('pageview', e, { r: (ref && clean(ref, false)) || null, w: e?.context?.window?.screen?.width || null, l: e?.context?.navigator?.language || null });
});
analytics.subscribe('product_viewed', (e) => send('view_item', e, { it: [line({ merchandise: e?.data?.productVariant, quantity: 1 })] }));
analytics.subscribe('product_added_to_cart', (e) => send('add_to_cart', e, { it: [line(e?.data?.cartLine)] }));
analytics.subscribe('product_removed_from_cart', (e) => send('remove_from_cart', e, { it: [line(e?.data?.cartLine)] }));
analytics.subscribe('checkout_started', (e) => send('begin_checkout', e, { it: lines(e?.data?.checkout?.lineItems) }));
analytics.subscribe('checkout_completed', (e) => {
  const c = e?.data?.checkout || {};
  const amount = money(c.totalPrice);
  const currency = c.currencyCode || c.totalPrice?.currencyCode;
  const order = c.order?.id || c.token;
  send('purchase', e, Object.assign(
    { it: lines(c.lineItems) },
    amount !== null && currency ? { rv: { amount: amount, currency: currency } } : {},
    order ? { p: { order_id: String(order) } } : {},
  ));
});
N’ajoutez pas aussi le traceur au thème

Le pixel compte déjà les pages vues. Ajouter k.js dans le thème en plus les compterait deux fois.

Événements transmis#

Le pixel s’abonne aux événements clients standards de Shopify et les traduit ainsi :

Événement ShopifyÉvénement KreomnisContenu
page_viewedpageviewPage, référent (origine et chemin), largeur d’écran, langue.
product_viewedview_itemLe produit vu.
product_added_to_cartadd_to_cartLa ligne ajoutée.
product_removed_from_cartremove_from_cartLa ligne retirée.
checkout_startedbegin_checkoutLes lignes du panier.
checkout_completedpurchaseLignes, montant total, devise et identifiant de commande.

Chaque produit porte sa référence (SKU, sinon l’identifiant de variante), son nom, son type, sa variante, son prix et sa quantité. L’identifiant de commande évite de compter deux fois le même achat.

Aucune donnée client

Le pixel ne lit ni e-mail, ni adresse, ni téléphone. L’adresse des pages est réduite à l’origine, au chemin et aux paramètres utm_* et ref. Il n’utilise aucune clé d’API.

Vérifier la boutique#

Le pixel s’exécute dans un environnement isolé et ne peut pas poser la balise de vérification. Pour prouver la propriété de la boutique, utilisez l’enregistrement DNS si vous gérez le domaine, ou ajoutez la balise meta dans le <head> du thème (fichier theme.liquid).

Limites#

  • Le pixel n’envoie ni temps d’engagement, ni défilement, ni Web Vitals, ni erreurs JavaScript : ces mesures demandent le traceur k.js, qui ne s’exécute pas dans le pixel.
  • Les robots ne sont pas comptés : ils passent par les serveurs de Shopify, sur lesquels aucun code ne peut être ajouté.
  • Les événements que vous définissez vous-même (inscription, formulaire) ne sont pas transmis par le pixel.

Une question sans réponse ici ? Consultez les questions fréquentes.