Guide d'Intégration du SDK Web pour Rokt Ads

Cette page explique comment implémenter le SDK Web pour Rokt Ads afin de connecter les conversions avec vos campagnes. En reliant les conversions à l'engagement publicitaire, vous pouvez obtenir une attribution plus précise, une optimisation en temps réel et une meilleure mesure des campagnes.

Votre gestionnaire de compte Rokt dédié vous aidera à configurer votre compte pour le SDK Web. Il vous fournira 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.

remarque

Travaillez avec votre gestionnaire de compte Rokt pour d'abord implémenter le SDK dans un environnement de développement. Cela vous permet de tester et de résoudre minutieusement les problèmes de votre intégration avant de la déployer dans un environnement de production.

Configuration de Domaine de Première PartieLien direct vers Configuration de Domaine de Première Partie

Les navigateurs et les outils de blocage des publicités bloquent parfois les balises Rokt et les points de collecte d'événements. Pour éviter cela et maximiser la collecte de données, configurez un domaine de première partie pour la collecte d'événements et utilisez-le à la place du domaine par défaut apps-rokt-api.com. Pour éviter ce trafic HTTP bloqué, créez un sous-domaine personnalisé et pointez son enregistrement DNS vers Rokt. Cela le rend moins susceptible d'être bloqué car le domaine correspond au même domaine racine visible dans la barre d'adresse.

Pour savoir comment configurer un domaine de première partie pour votre intégration SDK, voir Intégration de Domaine de Première Partie.

1. Initialiser le SDK RoktLien direct vers 1. Initialiser le SDK Rokt

Pour initialiser le SDK, copiez et collez le script d'initialisation du SDK dans votre application web. Le SDK web de Rokt est léger (moins de 30 Ko) et distribué mondialement via un CDN.

Chaque application web est différente, mais Rokt recommande d'inclure le script SDK sur chaque page pour s'assurer que les utilisateurs sont suivis tout au long de l'entonnoir de conversion et peuvent être re-ciblés s'ils abandonnent l'inscription ou le panier.

Applications à page unique (SPA) : Si votre site web est une SPA, insérez le script d'initialisation dans le <head> de la page principale index.html, ou l'emplacement principal où le reste de votre contenu est rendu.
Applications multi-pages (MPA) : Si votre site web est une MPA et que vous utilisez un système de rendu basé sur des modèles (le plus courant), placez le script d'initialisation dans le fichier de mise en page partagé principal. Si vous n'utilisez pas un système de rendu basé sur des modèles, placez le script dans chaque fichier HTML de votre site web.

Notez que bien que chaque page puisse inclure le script, en raison de la mise en cache du navigateur, le SDK se chargerait par défaut à partir du cache plutôt que d'être chargé à chaque chargement de page de votre site web.

Initialisation du SDK et Événement de Vue de PageLien direct vers Initialisation du SDK et Événement de Vue de Page

<script type="text/javascript">

// Enter your Rokt API key
const API_KEY = "YOUR_API_KEY";

// Enter your custom subdomain if you are using a first-party domain configuration (optional)
const ROKT_DOMAIN = "https://apps.rokt-api.com";

      window.mParticle = {
        config: {
          // Identify the current user:
          // Only include fields that have actual values (not placeholders or null)
          identifyRequest: {
            userIdentities: (function() {
              const identities = {};
              // Fetch user email from your persistence layer (e.g., localStorage, sessionStorage, cookies, or server-side session)
              // If you're using an un-hashed email address, set it in 'email'.
              const email = null; // e.g., localStorage.getItem('userEmail') or sessionStorage.getItem('email') or null
              // If you're using a hashed email address, set it in 'other' instead of `email`.
              // Fetch hashed email from your persistence layer where you store the SHA-256 hashed value; Prior to hashing, lowercase and trim all trailing spaces
              const hashedEmail = null; // e.g., localStorage.getItem('hashedEmail') or null

              if (email) {
                identities.email = email;
              }
              if (hashedEmail) {
                identities.other = hashedEmail; 
              }

              // Always return an object (empty if no identities are set)
              return identities;
            })(),
          },
          identityCallback: function (result) {
            if (result.getUser()) {
              const user = result.getUser();
              // Fetch user attributes from your persistence layer (e.g., localStorage, sessionStorage, cookies, or server-side session)
              // Only set attributes when they have actual values (not null or undefined)
              const firstname = null; // e.g., localStorage.getItem('firstName') or sessionStorage.getItem('firstname') or null
              const lastname = null; // e.g., localStorage.getItem('lastName') or sessionStorage.getItem('lastname') or null
              
              if (firstname) {
                user.setUserAttribute('firstname', firstname);
              }
              if (lastname) {
                user.setUserAttribute('lastname', lastname);
              }
            }
          },
        },
      };


// Load the SDK
(function(e) { window.mParticle = window.mParticle || {}; window.mParticle.EventType = { Unknown: 0, Navigation: 1, Location: 2, Search: 3, Transaction: 4, UserContent: 5, UserPreference: 6, Social: 7, Other: 8, Media: 9 }; window.mParticle.eCommerce = { Cart: {} }; window.mParticle.Identity = {}; window.mParticle.Rokt = {}; window.mParticle.config = window.mParticle.config || {}; window.mParticle.config.rq = []; window.mParticle.config.snippetVersion = 2.8; window.mParticle.ready = function(e) { window.mParticle.config.rq.push(e); }; ["endSession", "logError", "logBaseEvent", "logEvent", "logForm", "logLink", "logPageView", "setSessionAttribute", "setAppName", "setAppVersion", "setOptOut", "setPosition", "startNewSession", "startTrackingLocation", "stopTrackingLocation"].forEach(function(e) { window.mParticle[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift(e); window.mParticle.config.rq.push(t); }; }); ["setCurrencyCode", "logCheckout"].forEach(function(e) { window.mParticle.eCommerce[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("eCommerce." + e); window.mParticle.config.rq.push(t); }; }); ["identify", "login", "logout", "modify"].forEach(function(e) { window.mParticle.Identity[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Identity." + e); window.mParticle.config.rq.push(t); }; }); ["selectPlacements","hashAttributes","hashSha256","setExtensionData","use","getVersion","terminate"].forEach(function(e) { window.mParticle.Rokt[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Rokt." + e); window.mParticle.config.rq.push(t); }; }); var t = window.mParticle.config.isDevelopmentMode ? 1 : 0, n = "?env=" + t, a = window.mParticle.config.dataPlan; if (a) { var o = a.planId, r = a.planVersion; o && (r && (r < 1 || r > 1e3) && (r = null), n += "&plan_id=" + o + (r ? "&plan_version=" + r : "")); } var i = window.mParticle.config.versions, s = []; i && Object.keys(i).forEach(function(e) { s.push(e + "=" + i[e]); }); var c = document.createElement("script"); c.type = "text/javascript"; c.async = !0; window.ROKT_DOMAIN = ROKT_DOMAIN || 'https://apps.rokt-api.com'; mParticle.config.domain = ROKT_DOMAIN.split('//')[1]; c.src = ROKT_DOMAIN + "/js/v2/" + e + "/app.js" + n + "&" + s.join("&"); c.onerror = function() { var u = ["https://apps.","rokt","ecommerce",".com"].join(""); window.ROKT_DOMAIN = u; mParticle.config.domain = u.split("//")[1]; var d = document.createElement("script"); d.type = "text/javascript"; d.async = !0; d.src = u + "/js/v2/" + e + "/app.js" + n + "&" + s.join("&"); var f = document.getElementsByTagName("script")[0]; f.parentNode.insertBefore(d, f); }; var l = document.getElementsByTagName("script")[0]; l.parentNode.insertBefore(c, l); })(API_KEY);

// Fire Page View Event once the SDK initializes. 
window.mParticle.ready(function () {
        mParticle.logPageView(
          // Event name: "page view" identifies the type of event being logged
          "page view",
          {
            // Capture the last segment of the URL path as the screen name,
            // e.g., "/products/shoes" → "shoes". Defaults to "home" if the path is empty.
            screen_name:
              location.pathname.split("/").filter(Boolean).pop() || "home",

            // Record the full URL of the current page (including protocol, path, query, and hash)
            url: window.location.toString(),

            // Capture the URL of the page that referred the user to this one,
            // if available. This helps track user navigation between pages or sites.
            "referring-page": document.referrer,
          }
        );
      });

</script>

Lors de l'ajout du script d'initialisation sur votre site, configurez les paramètres suivants :

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

Définissez API_KEY sur 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 SDK Rokt.

1.2 Entrez votre sous-domaine personnalisé (optionnel)Lien direct vers 1.2 Entrez votre sous-domaine personnalisé (optionnel)

Si vous souhaitez acheminer le SDK via votre propre domaine, suivez les instructions dans Configuration de Domaine de Première Partie, et définissez ROKT_DOMAIN sur le sous-domaine que vous avez créé.

Cette étape est optionnelle. Vous pouvez laisser ROKT_DOMAIN défini sur https://apps.rokt-api.com, les requêtes au SDK Rokt seront acheminées via apps.rokt-api.com.

1.3 Configurez votre environnement de donnéesLien direct vers 1.3 Configurez votre environnement de données

Rokt maintient deux environnements de données : Développement pour étiqueter et stocker des données à des fins de test et Production pour collecter l'activité réelle des clients.

Si vous testez encore le SDK Rokt, définissez isDevelopmentMode sur true.

Si vous avez terminé les tests et souhaitez commencer à collecter l'activité réelle des clients, définissez isDevelopmentMode sur false.

1.4 Identifiez l'utilisateurLien direct vers 1.4 Identifiez l'utilisateur

Lorsque le SDK est initialisé, il peut identifier l'utilisateur actuel afin que toutes les données collectées lui soient correctement attribuées et pour s'assurer qu'il voit les publicités les plus pertinentes en fonction de son comportement.

Le script d'initialisation du SDK inclut un objet appelé identifyRequest:

identifyRequest: {
  userIdentities: (function() {
    const identities = {};
    // Fetch user email from your persistence layer (e.g., localStorage, sessionStorage, cookies, or server-side session)
    // If you're using an un-hashed email address, set it in 'email'.
    const email = null; // e.g., localStorage.getItem('userEmail') or sessionStorage.getItem('email') or null
    // If you're using a hashed email address, set it in 'other' instead of `email`.
    // Fetch hashed email from your persistence layer where you store the SHA-256 hashed value ; Prior to hashing, lowercase and trim all trailing spaces
    const hashedEmail = null; // e.g., localStorage.getItem('hashedEmail') or null

    if (email) {
      identities.email = email;
    }
    if (hashedEmail) {
      identities.other = hashedEmail;
    }

    // Always return an object (empty if no identities are set)
    return identities;
  })(),
}

Dans identifyRequest, récupérez l'adresse e-mail de l'utilisateur à partir de votre couche de persistance (par exemple, localStorage, sessionStorage, cookies ou session côté serveur). Si vous utilisez une adresse e-mail non hachée, définissez-la dans la variable email. Si vous utilisez une adresse e-mail hachée, définissez-la dans la variable hashedEmail, qui sera assignée à other.

Le code utilise une fonction qui définit conditionnellement les identités uniquement lorsque des valeurs sont disponibles, garantissant que les valeurs vides ou nulles ne sont pas transmises au SDK.

Incluez toujours identifyRequest dans le script d'initialisation, même si vous n'avez pas l'adresse e-mail de l'utilisateur au moment de l'initialisation.

remarque

Si vous n'avez pas l'adresse e-mail de l'utilisateur, laissez les variables email et hashedEmail à null. Le SDK s'initialisera toujours, et vous pourrez identifier l'utilisateur plus tard en suivant les instructions à l'étape suivante.

1.5 Définir des attributs utilisateur supplémentairesLien direct vers 1.5 Définir des attributs utilisateur supplémentaires

Le script d'initialisation inclut une fonction de rappel qui vous permet de définir des attributs utilisateur supplémentaires pour l'utilisateur s'ils sont identifiés avec succès avec leur adresse e-mail :

// The identityCallback determines if the identifyRequest was successful.
identityCallback: function(result) {
    if (result.getUser()) {
        // If the user was identified, set additional user attributes with setUserAttribute.
           result.getUser().setUserAttribute("attribute-key", "attribute-value");
    }
}

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

2. Identifier l'utilisateurLien direct vers 2. Identifier l'utilisateur

Lors de l'initialisation, le SDK soumet une identifyRequest à Rokt avec l'adresse e-mail de l'utilisateur ou l'adresse hachée pour identifier l'utilisateur actuel, si disponible.

En plus d'identifier l'utilisateur lors de l'initialisation, chaque fois que l'utilisateur fournit son adresse e-mail après que le SDK a été initialisé (par exemple, lorsqu'il se connecte ou effectue un achat), vous devez appeler la méthode identify pour transmettre leur e-mail à Rokt. Cela garantit que les données sont correctement attribuées à l'utilisateur actuel.

Pour identifier l'utilisateur, commencez par créer un objet identifyRequest pour contenir l'adresse e-mail de l'utilisateur. Récupérez l'e-mail de votre couche de persistance (par exemple, localStorage, sessionStorage, cookies ou session côté serveur) ou à partir d'une soumission de formulaire.

const identifyRequest = {
  userIdentities: (function() {
    const identities = {};
    // Fetch user email from your persistence layer or form submission
    // If you're using an un-hashed email address, set it in 'email'.
    const email = null; // e.g., localStorage.getItem('userEmail') or document.getElementById('emailInput').value or null
    // If you're using a hashed email address, set it in 'other' instead of `email`.
    // Fetch hashed email from your persistence layer where you store the SHA-256 hashed value; Prior to hashing, lowercase and trim all trailing spaces
    const hashedEmail = null; // e.g., localStorage.getItem('hashedEmail') or null

    if (email) {
      identities.email = email;
    }
    if (hashedEmail) {
      identities.other = hashedEmail;
    }

    // Always return an object (empty if no identities are set)
    return identities;
  })(),
};

Pour hacher l'adresse e-mail ou d'autres attributs, voir Hacher les attributs utilisateur.

Ensuite, vous avez la possibilité de définir des attributs utilisateur supplémentaires lors de l'identification d'un utilisateur en créant une fonction de rappel. Si le identifyRequest réussit, alors les attributs utilisateur que vous définissez avec setUserAttribute sont attribués à l'utilisateur.

const identityCallback = function (result) {
  if (result.getUser()) {
    result.getUser().setUserAttribute("attribute-key", "attribute-value");
  }
};

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

Enfin, après avoir créé votre identifyRequest et votre identityCallback, pour définir des attributs supplémentaires, appelez la méthode identify, en passant les objets identifyRequest et identityCallback que vous venez de créer :

mParticle.Identity.identify(identifyRequest, identityCallback);

Par exemple, pour identifier un utilisateur nommé Jane Smith avec l'adresse e-mail j.smith@example.com (et vous n'avez pas besoin de hacher leur adresse e-mail), vous utiliseriez :

const identifyRequest = {
  userIdentities: {
    email: "j.smith@example.com",
  },
};

const identityCallback = function (result) {
  if (result.getUser()) {
    result.getUser().setUserAttribute("firstname", "Jane");
    result.getUser().setUserAttribute("lastname", "Smith");
  }
};

mParticle.Identity.identify(identifyRequest, identityCallback);

2.1 Hacher les attributs utilisateurLien direct vers 2.1 Hacher les attributs utilisateur

Si vous devez hacher les attributs utilisateur (tels que l'adresse e-mail) après l'initialisation du SDK en utilisant SHA-256, utilisez les méthodes suivantes. Le hachage suit les directives de hachage de Rokt.

2.1.1 Hacher plusieurs attributs utilisateurLien direct vers 2.1.1 Hacher plusieurs attributs utilisateur

Utilisez hashAttributes pour hacher plusieurs attributs à la fois. La méthode renvoie à la fois les versions originales et hachées de chaque attribut.

mParticle.ready(async function() {
  const hashedAttributes = await mParticle.Rokt.hashAttributes({
    email: 'j.smith@example.com',
    mobile: '3125551515',
  });

  // `hashAttributes` returns:
  // {
  //   email: 'j.smith@example.com',
  //   mobile: '3125551515',
  //   emailsha256: '<sha256 hex>',
  //   mobilesha256: '<sha256 hex>'
  // }

  const identifyRequest = {
    userIdentities: {
      email: 'j.smith@example.com',
      other: hashedAttributes.emailsha256 // hashed copy emailsha256
    }
  };
});

2.1.2 Hacher un seul attribut utilisateurLien direct vers 2.1.2 Hacher un seul attribut utilisateur

Utilisez hashSha256 lorsque vous devez hacher un seul attribut. La méthode renvoie uniquement la valeur hachée.

mParticle.ready(async function() {
  const emailSha256 = await mParticle.Rokt.hashSha256('j.smith@example.com');

  const identifyRequest = {
    userIdentities: {
      email: 'j.smith@example.com',
      other: emailSha256
    }
  };
});

3. Définir les attributs utilisateurLien direct vers 3. Définir les attributs utilisateur

Les exemples ci-dessus montrent comment définir les attributs utilisateur lorsque l'utilisateur est identifié lors de l'initialisation du SDK et lorsque l'utilisateur est identifié après avoir fourni son adresse e-mail. Cependant, après que l'utilisateur a été identifié, vous pouvez définir les attributs utilisateur à tout moment.

Pour définir les attributs utilisateur, exécutez ce qui suit :

// To retrieve the current user, call getCurrentUser.
const currentUser = mParticle.Identity.getCurrentUser();

// Once you have successfully set the current user to a const called `currentUser`, you can set user attributes with:
currentUser.setUserAttribute("user-attribute-key", "user-attribute-value");

// To set a list attribute, set the value of the attribute to an array of strings. For example:
currentUser.setUserAttribute("favorite-genres", [
  "documentary",
  "comedy",
  "romance",
  "drama",
]);

// To remove a user attribute, call removeUserAttribute and pass in the attribute name. All user attributes share the same key space.
currentUser.removeUserAttribute("attribute-to-remove");

Attributs utilisateur recommandésLien direct vers Attributs utilisateur recommandés

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

Clé d'attribut utilisateur	Valeur d'exemple	Remarques
firstname	John	Le prénom du client.
firstnamesha256	fab1e2e699b3b927cbf875046a64f222	Hachage SHA-256 du prénom. Avant le hachage, mettez en minuscule et supprimez tous les espaces de fin.
lastname	Doe	Le nom de famille du client.
lastnamesha256	fab1e2e699b3b927cbf875046a64f222	Hachage SHA-256 du nom de famille. Avant le hachage, mettez en minuscule et supprimez tous les espaces de fin.
mobile	3125551515	Les numéros de téléphone peuvent être formatés soit comme `1112345678` soit comme `+1 (222) 345-6789`.
mobilesha256	fab1e2e699b3b927cbf875046a64f222	SHA-256 du numéro de mobile. Remarque : Le numéro de mobile doit être formaté dans ce format spécifique avant le hachage : 5551234567 (sans tirets ni espaces).
age	33	L'âge du client.
dob	19900717	Date de naissance. Formatée comme `yyyymmdd`.
gender	M	Le sexe du client. Par exemple, `M`, `Male`, `F`, ou `Female`.
city	Brooklyn	La ville du client.
state	NY	L'état du client.
zip	11201	Le code postal du client.
title	Mr	Le titre du client. Par exemple, `Mr`, `Mrs`, `Ms`.
language	en	Langue associée à l'achat.
value	52.25	La valeur du client.
predictedltv	136.23	La valeur totale de durée de vie prédite du client.

Tous les attributs utilisateur (y compris les attributs de liste et les balises) doivent avoir des noms distincts.

4. Suivre les conversionsLien direct vers 4. Suivre les conversions

Pour suivre une conversion, exécutez l'extrait de code suivant sur la page la plus appropriée qui est chargée après qu'un client a converti, comme une page de confirmation d'achat ou une page de "remerciement".

Lorsque vous collez l'extrait de code sur votre site, assurez-vous de :

Remplacer les attributs utilisateur d'exemple dans les appels .setUserAttribute par les valeurs réelles pour votre utilisateur ou client. Rokt recommande de définir au moins les attributs utilisateur suivants :
- firstname
- lastname
- zipcode
- mobile
Remplacer les attributs d'événement de conversion d'exemple par les valeurs réelles de votre événement de conversion.
Attributs de conversion requis.
- conversiontype Le type de conversion indique le nom de cet événement, par exemple inscription, achat, etc.
- confirmationref La référence de confirmation sert de clé de déduplication

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

remarque

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

remarque

Lorsque vous initialisez le SDK Rokt, il capture automatiquement l'ID de clic Rokt et le temps passé sur le site. Ceux-ci sont inclus lorsque vous enregistrez un événement de conversion.

// Set user attributes before logging the conversion event
currentUser.setUserAttribute("firstname", "John");
currentUser.setUserAttribute("lastname", "Doe");
currentUser.setUserAttribute("zipcode", "98103");
currentUser.setUserAttribute("mobile", "3125551515");

// Log the conversion event
mParticle.logEvent(
  "conversion", // The name of the event
  mParticle.EventType.Transaction, // The event type
  {
    conversiontype: "signup", // Type of conversion
    confirmationref: "54321", // Transaction ID / Order ID
    amount: "300.5", // Transaction amount e.g. 300.5
    currency: "USD", // Transaction currency e.g. USD

    // You can track your own custom event attributes!
    CUSTOM_EVENT_ATTRIBUTE_NAME: "CUSTOM_EVENT_ATTRIBUTE_VALUE",
  }
);

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

Rokt recommande de tester votre nouvelle intégration pour s'assurer que le SDK s'initialise correctement et que les événements sont enregistrés avec succès.

remarque

Après avoir vérifié les étapes suivantes pour vous assurer que l'intégration est correctement configurée, effectuez quelques achats ou inscriptions test en simulant un utilisateur final. Ensuite, fournissez l'email ou l'email haché que vous avez utilisé au gestionnaire de compte Rokt afin qu'il puisse vérifier que les données sont correctement ingérées dans Rokt.

Si vous n'intégrez pas un email ou un email haché avec Rokt, fournissez le mPID de votre session de test. Vous pouvez l'obtenir en tapant mParticle.Identity.getCurrentUser().getMPID() dans la console de votre navigateur.

Test de l'initialisationLien direct vers Test de l'initialisation

Ouvrez une nouvelle fenêtre de navigateur.
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.
Dans le panneau des outils de développement, naviguez jusqu'à l'onglet Réseau et entrez apps.rokt-api.com dans la barre de filtre.
Vous devriez voir le JS Rokt être chargé, ainsi que les appels API qui enregistrent l'initialisation.
- Alternativement, vous pouvez également taper mParticle.config.appName dans la console de votre navigateur, ce qui renverra le nom de votre application exécutant actuellement le SDK, confirmant que le SDK a été chargé avec succès.

Test de Suivi de ConversionLien direct vers Test de Suivi de Conversion

Ouvrez une nouvelle fenêtre de navigateur.
Accédez au panneau des outils de développement de votre navigateur. Pour la plupart des navigateurs, faites un clic droit sur votre écran et sélectionnez Inspecter.
Dans le panneau des outils de développement, naviguez vers l'onglet Réseau et entrez apps.rokt-api.com dans la barre de filtre.
Vous devriez voir le chargement du Rokt JS, ainsi que les appels API qui enregistrent l'initialisation.
Après l'appel d'initialisation, vous devriez voir un appel API qui enregistre la conversion.

Test des Attributs Email et UtilisateurLien direct vers Test des Attributs Email et Utilisateur

Ouvrez une nouvelle fenêtre de navigateur.
Accédez au panneau des outils de développement de votre navigateur. Pour la plupart des navigateurs, faites un clic droit sur votre écran et sélectionnez Inspecter.
Dans le panneau des outils de développement, naviguez vers l'onglet Réseau et entrez apps.rokt-api.com dans la barre de filtre.
Vous devriez voir le chargement du Rokt JS, ainsi que les appels API qui enregistrent l'initialisation.
Lorsque vous définissez un email utilisateur, un email haché dans l'appel d'identité, ou que vous définissez un prénom, un nom de famille ou un numéro de mobile utilisateur, vous verrez ces informations incluses dans l'appel API effectué au serveur Rokt. Alternativement pour récupérer :
- Email Utilisateur : Tapez mParticle.Identity.getCurrentUser().getUserIdentities() dans la console de votre navigateur, ce qui renverra un objet avec l'identité de l'utilisateur actuel définie dans la session ; aucune information enregistrée en dehors de la session actuelle n'est jamais retournée.
- Attributs Utilisateur : Tapez mParticle.Identity.getCurrentUser().getAllUserAttributes() dans la console de votre navigateur, ce qui renverra un objet avec les attributs de l'utilisateur actuel définis dans la session ; aucune information enregistrée en dehors de la session actuelle n'est jamais retournée.

DépannageLien direct vers Dépannage

Le SDK Web de Rokt fournit un rapport d'erreurs contextuel. Si vous rencontrez des difficultés pour valider votre intégration, la meilleure façon de déboguer le problème est d'utiliser l'onglet Console dans le panneau des outils de développement de votre navigateur.

Bien que vous puissiez rencontrer des erreurs non liées au SDK Rokt, certaines erreurs courantes du SDK Rokt à vérifier sont :

Erreurs de syntaxeLien direct vers Erreurs de syntaxe

Assurez-vous de ne manquer aucune virgule dans votre code d'intégration.

Pour vérifier les erreurs de syntaxe :

Allez dans le panneau des outils de développement de votre navigateur et sélectionnez l'onglet Console.
Si le fichier où vous avez placé le SDK Web contient une erreur, elle devrait être enregistrée dans la console. Cliquez sur le fichier pour voir le code et l'erreur signalée.
Toute erreur est indiquée dans le fichier. En particulier, vérifiez que tous les attributs sont séparés par des virgules comme indiqué ci-dessous.

Incorrect :

email: ''
emailsha256: '',

Correct :

email: '',
emailsha256: '',

Erreurs d'initialisationLien direct vers Erreurs d'initialisation

Assurez-vous que le script d'initialisation du SDK a été placé sur la bonne page.
Si vous avez intégré en utilisant un gestionnaire de balises, assurez-vous d'avoir configuré vos déclencheurs de balises pour que l'initialisation se charge sur les bonnes pages, et que vos balises selectPlacements et de journalisation de conversion se déclenchent après l'initialisation du SDK.

AnnexeLien direct vers Annexe

Après avoir mis en œuvre les placements et le suivi des vues de page en suivant les instructions ci-dessus, vous pouvez vouloir mettre en œuvre un suivi d'événements supplémentaires.

Suivre des événements personnalisésLien direct vers Suivre des événements personnalisés

Vous pouvez définir et suivre des événements personnalisés en appelant logEvent et en passant le nom de l'événement, le type d'événement et un objet JSON contenant une liste de tous les attributs personnalisés pour l'événement.

Les types d'événements personnalisés pris en charge sont :

Navigation
Location
Search
Transaction
UserContent
UserPreference
Social
Other

Le type d'événement est facultatif ; si vous omettez le type d'événement, l'événement est simplement catégorisé comme unknown.

mParticle.logEvent(
  // The event name
  "event-name",
  // The event type
  mParticle.EventType.Other,
  // Include custom event attributes to further describe the event
  {
    "custom-attribute-name": "custom-attribute-value",
  }
);

En plus de suivre des événements personnalisés et des événements de conversion, voici quelques exemples d'événements commerciaux que vous pourriez vouloir suivre. Parlez avec votre gestionnaire de compte pour vous aider à identifier les meilleurs événements à suivre, et comment les mettre en œuvre sur votre site :

purchase - lorsqu'un utilisateur effectue un achat ou une transaction.
sign_up - lorsqu'un utilisateur s'inscrit ou s'enregistre pour un événement ou un service.
first_time_deposit - lorsqu'un utilisateur fournit un dépôt.
subscription_started - lorsqu'un utilisateur commence un abonnement.
app_install - lorsqu'un utilisateur installe une application.
add_payment_info - lorsqu'un utilisateur ajoute des détails de paiement.
add_to_cart - lorsqu'un utilisateur ajoute un article à son panier.
add_to_wishlist - lorsqu'un utilisateur ajoute un article à sa liste de souhaits.

Politique de sécurité du contenuLien direct vers Politique de sécurité du contenu

Si votre site applique une politique de sécurité du contenu, cela peut bloquer le chargement du script SDK ou bloquer les appels du SDK aux domaines de Rokt. Et si votre campagne présente votre page à l'intérieur d'un placement Rokt sur un site partenaire (une expérience intégrée), votre CSP contrôle également si Rokt est autorisé à encadrer votre page. Les deux sont généralement configurés par l'équipe qui possède votre serveur web ou CDN, séparément de l'intégration du SDK sur cette page.

Voir Configuration de la politique de sécurité du contenu pour les instructions.