Aller au contenu principal

Guide d'Intégration du Service Pixel

Cette page explique comment implémenter le Service Pixel de Rokt pour connecter les conversions avec vos campagnes. Le Service Pixel est destiné à être utilisé comme solution de secours dans les situations où le Rokt Web SDK n'est pas une option. Un exemple courant concerne les annonceurs dans des secteurs réglementés — tels que les services financiers ou la santé — dont les politiques de sécurité imposent une politique de sécurité de contenu (CSP) stricte qui bloque l'exécution de JavaScript tiers, mais permet toujours les requêtes d'image.

Votre gestionnaire de compte Rokt dédié vous aidera à configurer votre compte pour le Service Pixel. Ils vous fourniront la clé API requise et toutes les ressources supplémentaires nécessaires.

remarque

Les instructions ci-dessous nécessiteront des ressources de développement pour être complétées. Si vous avez besoin d'une assistance supplémentaire, veuillez contacter votre gestionnaire de compte Rokt.

Toutes les requêtes au Service Pixel sont effectuées sous forme de requêtes HTTP GET à :

https://pixels.mparticle.com/v1/{api_key}/Pixel

Où {api_key} est la clé API Rokt fournie par votre gestionnaire de compte.

1. Suivre les vues de pageLien direct vers 1. Suivre les vues de page

Pour suivre une vue de page, envoyez une requête pixel à chaque chargement de page. Placez la requête dans le <head> de votre page, ou déclenchez-la depuis votre JavaScript dès que la page se charge.

1.1 Entrez votre clé API RoktLien direct vers 1.1 Entrez votre clé API Rokt

Remplacez {api_key} dans l'URL par la clé API Rokt fournie par votre gestionnaire de compte Rokt dédié.

Votre clé API Rokt est une information d'identification unique fournie par votre gestionnaire de compte Rokt qui permet à votre site de se connecter et d'interagir en toute sécurité avec le Service Pixel de Rokt.

remarque

Le Service Pixel est destiné aux organisations dont la politique de sécurité de contenu (CSP) bloque le JavaScript tiers. Si votre organisation n'a pas cette restriction, utilisez plutôt le Rokt Web SDK, qui offre des fonctionnalités plus riches.

1.2 Identifier l'utilisateurLien direct vers 1.2 Identifier l'utilisateur

Rokt nécessite un identifiant utilisateur constant pour toutes les appels pixel afin de relier les événements du tunnel. Sans cela, chaque vue de page est traitée comme un utilisateur anonyme distinct, rendant impossible le suivi de la progression dans le tunnel ou la création d'audiences de reciblage pour les utilisateurs qui ont montré une forte intention mais n'ont pas converti.

Transmettez les identités des utilisateurs en utilisant des paramètres ui_t (clés de type d'identité) et ui_v (valeurs de type d'identité) séparés par des virgules.

Utilisateurs connus (email disponible)

Si l'utilisateur a fourni son adresse email, transmettez à la fois l'identifiant anonyme persistant et l'email afin que Rokt puisse lier toutes les vues de page anonymes antérieures à l'utilisateur désormais connu :

  • Email non haché : ui_t=other3,email
  • Email haché SHA-256 : ui_t=other3,other
ui_t=other3,email&ui_v={sessionId},j.smith%40example.com

Utilisateurs anonymes (aucune PII disponible)

Si l'utilisateur n'a fourni aucune PII — par exemple, un utilisateur naviguant dans un tunnel d'application sans se connecter — vous devez tout de même transmettre un identifiant persistant pour que Rokt puisse lier tous les événements de vue de page, à la fois lors d'une visite et lors de visites ultérieures.

Générez un ID unique lorsque l'utilisateur arrive pour la première fois et conservez-le dans localStorage afin qu'il soit réutilisé lors de futures visites. Transmettez-le à chaque appel pixel en utilisant ui_t=other3:

function getSessionId() {
  let sessionId = localStorage.getItem('rokt_session_id');
  if (!sessionId) {
    sessionId = crypto.randomUUID();
    localStorage.setItem('rokt_session_id', sessionId);
  }
  return sessionId;
}
ui_t=other3&ui_v={sessionId}
remarque

L'identifiant stocké dans localStorage n'est pas lié à une identité utilisateur réelle — c'est un ID anonyme stable qui persiste à travers les visites afin que les utilisateurs revenant soient reconnus comme le même utilisateur plutôt que comme de nouveaux. Si l'utilisateur fournit plus tard son email (par exemple, sur une page de confirmation de conversion), incluez les deux identifiants pour que Rokt puisse associer toute l'activité anonyme antérieure à l'utilisateur désormais connu :

ui_t=other3,email&ui_v={sessionId},j.smith%40example.com

Ce modèle permet deux résultats pour les utilisateurs anonymes qui ne convertissent pas :

  • Rokt peut voir que l'utilisateur a progressé dans le tunnel (signal de forte intention).
  • Rokt place ces utilisateurs dans une audience de reciblage pour les réengager, et les reconnaît comme le même utilisateur s'ils reviennent.

1.3 Définir les attributs utilisateurLien direct vers 1.3 Définir les attributs utilisateur

Vous pouvez inclure des attributs utilisateur avec chaque requête pixel en utilisant des paramètres ua_k (clés d'attributs utilisateur) et ua_v (valeurs d'attributs utilisateur) séparés par des virgules.

Pour une liste des attributs que Rokt recommande de collecter, voir Attributs utilisateur recommandés.

ua_k=firstname,lastname,zip&ua_v=Jane,Smith,98103

1.4 Définir le nom de l'écranLien direct vers 1.4 Définir le nom de l'écran

Transmettez un nom d'écran à chaque vue de page en tant qu'attribut d'événement screen_name afin que Rokt puisse distinguer les écrans dans votre tunnel.

attrs_k=screen_name&attrs_v=checkout
remarque

Ceci est particulièrement important pour les applications monopage (SPAs). Lorsqu'un utilisateur navigue entre les écrans dans une SPA, l'URL et le titre du document ne changent souvent pas, donc hn et ttl seuls ne peuvent pas indiquer à Rokt quel écran l'utilisateur consulte. Sans un screen_name explicite, chaque vue d'écran apparaît identique et les événements d'entonnoir se regroupent en un même événement répété tout au long de la session. Définissez screen_name explicitement à chaque changement de route.

Exemple de vue de pageLien direct vers Exemple de vue de page

// ─── Page View Pixel ───────────────────────────────────────────────────────

const API_KEY = "YOUR_API_KEY";
const pixelURL = `https://pixels.mparticle.com/v1/${API_KEY}/Pixel`;
const currentTime = new Date().getTime();

// Generate or retrieve a persistent anonymous ID to tie all page view events
// together across visits.
function getSessionId() {
  let sessionId = localStorage.getItem("rokt_session_id");
  if (!sessionId) {
    sessionId = crypto.randomUUID();
    localStorage.setItem("rokt_session_id", sessionId);
  }
  return sessionId;
}

// If rtid is present in the URL (landing page), persist it for use throughout
// the funnel. On subsequent pages, retrieve the stored value instead.
function getRtid() {
  const fromUrl = new URLSearchParams(window.location.search).get("rtid");
  if (fromUrl) {
    const normalized = fromUrl.toLowerCase();
    localStorage.setItem("rokt_rtid", normalized);
    return normalized;
  }
  const stored = localStorage.getItem("rokt_rtid");
  return stored ? stored.toLowerCase() : "";
}

// Fetch user email from your persistence layer (e.g., localStorage,
// sessionStorage, cookies, or server-side session).
const email = null; // e.g., localStorage.getItem("userEmail") or null
// If you're using a hashed email address, set it in 'hashedEmail' instead
// (lowercase and trim before hashing).
const hashedEmail = null; // e.g., localStorage.getItem("hashedEmail") or null

const sessionId = getSessionId();
const rtid = getRtid();

// Set this to a value identifying the current screen — for example,
// "home", "product_details", or "checkout". On SPAs, update it whenever
// the screen changes, since the URL may not.
const screenName = "YOUR_SCREEN_NAME";

const params = new URLSearchParams({
  dt: "ScreenView",
  ct: currentTime,
  hn: window.location.hostname,
  ttl: document.title,

  // Event attributes — screen_name identifies the current screen
  attrs_k: "screen_name",
  attrs_v: screenName,
});

if (email) {
  // Known user: pass session ID, email, and Rokt Click ID (rtid)
  params.append("ui_t", "other3,email,other2");
  params.append("ui_v", `${sessionId},${email},${rtid}`);
} else if (hashedEmail) {
  // Known user with hashed email
  params.append("ui_t", "other3,other,other2");
  params.append("ui_v", `${sessionId},${hashedEmail},${rtid}`);
} else {
  // Anonymous user: pass session ID and Rokt Click ID only
  params.append("ui_t", "other3,other2");
  params.append("ui_v", `${sessionId},${rtid}`);
}

fetch(pixelURL + "?" + params.toString());

2. Suivre les conversionsLien direct vers 2. Suivre les conversions

Pour suivre une conversion, envoyez une requête de pixel sur la page qui se charge après qu'un client ait converti, comme une page de confirmation d'achat ou de remerciement.

Lors de l'envoi du pixel de conversion, assurez-vous de :

  1. Inclure l'identité de l'utilisateur (ui_t, ui_v) avec leur adresse e-mail ou adresse e-mail hachée. Si vous avez suivi l'utilisateur de manière anonyme, transmettez à la fois l'identifiant anonyme persistant et l'e-mail ensemble afin que Rokt puisse lier l'activité anonyme de l'entonnoir à l'utilisateur converti :

    ui_t=other3,email&ui_v={sessionId},j.smith%40example.com

  2. Inclure les attributs de l'utilisateur (ua_k, ua_v) avec au moins :

    • firstname
    • lastname
    • zip
    • mobile

  3. Inclure les attributs d'événement de conversion requis suivants (attrs_k, attrs_v) :

    • conversiontype — Le nom de l'événement de conversion, par exemple, signup ou purchase.
    • confirmationref — Votre ID de transaction ou de commande, utilisé comme clé de déduplication de Rokt.
remarque

Les attributs conversiontype et confirmationref permettent à Rokt d'optimiser efficacement votre campagne et de dédupliquer les événements et conversions de manière appropriée. Ce sont des attributs de lancement requis.

Lors de l'enregistrement d'un événement de conversion, incluez autant d'attributs utilisateur et d'attributs d'événement que possible pour améliorer la capacité de Rokt à optimiser vos campagnes.

// ─── Conversion Pixel ──────────────────────────────────────────────────────

const API_KEY = "YOUR_API_KEY";
const pixelURL = `https://pixels.mparticle.com/v1/${API_KEY}/Pixel`;
const currentTime = new Date().getTime();

function getSessionId() {
  let sessionId = localStorage.getItem("rokt_session_id");
  if (!sessionId) {
    sessionId = crypto.randomUUID();
    localStorage.setItem("rokt_session_id", sessionId);
  }
  return sessionId;
}

// Retrieve rtid from localStorage — it was captured and stored on the landing page.
function getRtid() {
  const fromUrl = new URLSearchParams(window.location.search).get("rtid");
  if (fromUrl) {
    const normalized = fromUrl.toLowerCase();
    localStorage.setItem("rokt_rtid", normalized);
    return normalized;
  }
  const stored = localStorage.getItem("rokt_rtid");
  return stored ? stored.toLowerCase() : "";
}

const sessionId = getSessionId();
const rtid = getRtid();

const params = new URLSearchParams({
  dt: "AppEvent",
  et: "Transaction",
  n: "conversion",
  ct: currentTime,

  // User identity — include the persistent session ID, email, and Rokt Click ID
  ui_t: "other3,email,other2",
  ui_v: `${sessionId},j.smith@example.com,${rtid}`,

  // User attributes
  ua_k: "firstname,lastname,zip,mobile",
  ua_v: "John,Doe,98103,3125551515",

  // Conversion event attributes — conversiontype and confirmationref are required
  attrs_k: "conversiontype,confirmationref,amount,currency",
  attrs_v: "signup,54321,300.5,USD",
});

fetch(pixelURL + "?" + params.toString());

Rokt recommande de définir autant que possible les attributs utilisateur suivants :

Clé d'attribut utilisateurValeur d'exempleRemarques
firstnameJohnLe prénom du client.
firstnamesha256fab1e2e699b3b927cbf875046a64f222Hachage SHA-256 du prénom. Avant le hachage, mettez en minuscules et supprimez tous les espaces de fin.
lastnameDoeLe nom de famille du client.
lastnamesha256fab1e2e699b3b927cbf875046a64f222Hachage SHA-256 du nom de famille. Avant le hachage, mettez en minuscules et supprimez tous les espaces de fin.
mobile3125551515Les numéros de téléphone peuvent être formatés soit comme 1112345678 soit comme +1 (222) 345-6789.
mobilesha256fab1e2e699b3b927cbf875046a64f222SHA-256 du numéro de mobile. Avant le hachage, formatez comme 5551234567 (sans tirets ni espaces).
age33L'âge du client.
dob19900717Date de naissance. Formatée comme yyyymmdd.
genderMLe genre du client. Par exemple, M, Male, F, ou Female.
cityBrooklynLa ville du client.
stateNYL'état du client.
zip11201Le code postal du client.
titleMrLe titre du client. Par exemple, Mr, Mrs, Ms.
languageenLangue associée à l'achat.
value52.25La valeur du client.
predictedltv136.23La valeur totale de la durée de vie prédite du client.

Tous les attributs utilisateur doivent avoir des noms distincts.

3. Testez votre intégrationLien direct vers 3. Testez votre intégration

Rokt recommande de tester votre intégration pour s'assurer que les requêtes pixel sont envoyées correctement et que les événements sont enregistrés avec succès.

remarque

Après avoir vérifié les étapes suivantes, effectuez quelques achats ou inscriptions de test en tant qu'utilisateur final. Ensuite, fournissez l'email ou l'email haché que vous avez utilisé à votre gestionnaire de compte Rokt afin qu'il puisse vérifier que les données sont correctement ingérées dans Rokt.

Test du suivi des pages vuesLien direct vers Test du suivi des pages vues

  1. Ouvrez une nouvelle fenêtre de navigateur.
  2. Accédez au panneau des outils de développement de votre navigateur. Pour la plupart des navigateurs, faites cela en cliquant avec le bouton droit de la souris sur votre écran et en sélectionnant Inspecter.
  3. Dans le panneau des outils de développement, naviguez vers l'onglet Réseau et entrez pixels.mparticle.com dans la barre de filtre.
  4. Chargez la page où vous avez placé le pixel de vue de page. Vous devriez voir une requête GET vers pixels.mparticle.com.

Test du suivi des conversionsLien direct vers Test du suivi des conversions

  1. Ouvrez une nouvelle fenêtre de navigateur.
  2. Accédez au panneau des outils de développement de votre navigateur. Pour la plupart des navigateurs, faites cela en cliquant avec le bouton droit de la souris sur votre écran et en sélectionnant Inspecter.
  3. Dans le panneau des outils de développement, naviguez vers l'onglet Réseau et entrez pixels.mparticle.com dans la barre de filtre.
  4. Effectuez une conversion de test sur votre site. Sur la page de confirmation, vous devriez voir une requête GET vers pixels.mparticle.com contenant les attributs de votre événement de conversion.

DépannageLien direct vers Dépannage

Pendant les tests, vérifiez que :

  • Le paramètre dt est correctement défini (ScreenView pour les vues de page, AppEvent pour les événements de conversion).
  • Le paramètre ct contient un horodatage epoch valide en millisecondes.
  • Toutes les valeurs des paramètres de requête sont encodées en URL, en particulier les adresses email (par exemple, %40 pour @).
Cet article vous a-t-il été utile ?
Last updated Aug 4, 2026