Guide d'Intégration du SDK Web

Cette page explique comment implémenter le SDK Web pour Rokt Ecommerce afin d'offrir des expériences clients plus pertinentes lors du paiement. Le SDK vous permet de déclencher et de suivre ces expériences (comme l'affichage d'offres sur les pages de confirmation) en s'activant sur des pages configurées et en renvoyant les données utilisateur et transaction à Rokt pour personnalisation et mesure.

Votre représentant de compte dédié vous aidera à configurer votre compte pour le SDK Web. Ils vous fourniront à la fois la clé API nécessaire pour initialiser le SDK et les ressources supplémentaires nécessaires pour rendre les expériences les plus pertinentes pour vos clients.

remarque

Ces instructions nécessitent 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. Les boutiques Shopify peuvent configurer un emplacement Rokt en quelques secondes à l'aide de l'application Rokt Ecommerce — pas besoin de coder !

remarque

Travaillez avec votre gestionnaire de compte Rokt pour implémenter d'abord le SDK dans un environnement de développement. Cela vous permet de tester et de dépanner minutieusement votre intégration avant de la publier dans un environnement de production.

Configuration de domaine de première partie

Rokt recommande d'utiliser un domaine de première partie lors de l'intégration du SDK sur votre site. Cela garantit que le SDK Rokt utilise votre propre domaine lors des appels à l'API de Rokt, offrant ainsi à vos clients une expérience transparente et minimisant le risque de contenu bloqué.

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

1. Initialiser le SDK Rokt

Pour initialiser le SDK, copiez et collez l'intégralité du script d'initialisation du SDK dans votre site.

Chaque site est différent, mais Rokt recommande d'inclure le script d'initialisation du SDK sur chaque page de votre site. Cela garantit que le SDK s'initialise toujours, offrant une latence de livraison des offres la plus basse et la précision la plus élevée de l'identification des utilisateurs.

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 à plusieurs 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ée principal. Si vous n'utilisez pas de système de rendu basé sur des modèles, placez le script dans chaque fichier HTML de votre site web.

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

Script d'Initialisation SDK

<script type="text/javascript">

// Entrez votre clé API Rokt
const API_KEY = "YOUR_API_KEY";

// Entrez votre sous-domaine personnalisé si vous utilisez une configuration de domaine de première partie (optionnel)
const ROKT_DOMAIN = "https://apps.rokt-api.com";

window.mParticle = {
    config: {
        // Définir l'environnement de données :
        // Réglez isDevelopmentMode sur true si vous testez encore votre intégration. 
        // Réglez isDevelopmentMode sur false si votre intégration est prête pour les données de production.
        isDevelopmentMode: true,
        // Identifier l'utilisateur actuel :
        // Si vous n'avez pas l'adresse e-mail de l'utilisateur, vous pouvez transmettre une valeur nulle
        identifyRequest: {
            userIdentities: {
                // Si vous utilisez une adresse e-mail non hachée, définissez-la dans 'email'.
                email: 'j.smith@example.com',
                // Si vous utilisez une adresse e-mail hachée, définissez-la dans 'other' à la place de `email`.
                other: 'adresse e-mail hachée sha256 ici'
            }
        },
        // Si l'utilisateur est identifié avec son adresse e-mail, définissez des attributs utilisateur supplémentaires.
        identityCallback: function(result) {
            if (result.getUser()) {
                result.getUser().setUserAttribute('clé-attribut', 'valeur-attribut');
            }
        }
    }
};

// Chargez le 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.7; 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","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("&"); var l = document.getElementsByTagName("script")[0]; l.parentNode.insertBefore(c, l); })(API_KEY);
</script>

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

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 identification unique fournie par votre représentant 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)

Si vous souhaitez rediriger 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éé.

Un sous-domaine personnalisé permet au SDK Rokt d'être redirigé via votre propre domaine, réduisant ainsi le risque que les publicités ou les données soient bloquées par les navigateurs ou les bloqueurs de publicités.

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

1.3 Configurez votre environnement de données

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

Si vous êtes encore en train de tester le SDK Rokt, définissez isDevelopmentMode sur true.

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

1.4 Identifier 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 garantir qu'il reçoive les publicités les plus pertinentes en fonction de son comportement.

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

identifyRequest: {
    userIdentities: {
        // Définissez l'adresse email brute de l'utilisateur dans 'email'
        email: 'j.smith@example.com',
        // Définissez l'adresse email hachée de l'utilisateur dans 'other'
        other: 'sha256 hashed email goes here'
    }
}

Dans identifyRequest, passez l'adresse email de l'utilisateur dans le champ email si elle n'est pas hachée ou dans other si elle est hachée en utilisant SHA256.

Toujours inclure identifyRequest dans le script d'initialisation, même si vous n'avez pas l'adresse email de l'utilisateur au moment de l'initialisation.

remarque

Si vous n'avez pas l'adresse email de l'utilisateur, passez une valeur nulle. Le SDK s'initialisera tout de même, et vous pourrez identifier l'utilisateur plus tard en suivant les instructions à la section 2. Identifier l'Utilisateur.

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'il est identifié avec succès avec son adresse e-mail:

// La fonction identityCallback détermine si la demande d'identification a réussi.
identityCallback: function(result) {
    if (result.getUser()) {
        // Si l'utilisateur a été identifié, définissez des attributs utilisateur supplémentaires avec setUserAttribute.
        result.getUser().setUserAttribute('attribute-key', 'attribute-value');
    }
}

Pour une liste des attributs que Rokt recommande de collecter pour vos utilisateurs, voir Recommended user attributes.

2. Identifier l'Utilisateur

Lors de l'initialisation, le SDK soumet une demande d'identification à Rokt avec l'adresse e-mail de l'utilisateur pour identifier l'utilisateur actuel.

En plus d'identifier l'utilisateur lors de l'initialisation, chaque fois que l'utilisateur fournit son adresse e-mail après l'initialisation du SDK (par exemple, lorsqu'il se connecte ou effectue un achat), vous devriez appeler la méthode d'identification 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.

Si vous fournissez une adresse e-mail non hachée, utilisez :

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

Si vous fournissez une adresse e-mail hachée, utilisez :

const identifyRequest = { 
    userIdentities: { 
        other: 'sha256 hashed email goes here' 
    }
};

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 la 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 Recommended user attributes.

Enfin, après avoir créé votre identifyRequest et votre identityCallback pour définir tous les attributs supplémentaires, appelez la méthode d'identification, 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 son 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);

3. Définir les attributs utilisateur

Les exemples ci-dessus montrent comment définir des attributs utilisateur lorsque l'utilisateur est identifié lors de l'initialisation du SDK et lorsqu'il est identifié après avoir fourni son adresse e-mail.

Cependant, après que l'utilisateur a été identifié, vous pouvez définir des attributs utilisateur à tout moment. Ces attributs sont inclus avec vos placements publicitaires ou événements enregistrés. Vous pouvez également définir des attributs utilisateur directement lors de l'insertion d'un placement.

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

// Pour récupérer l'utilisateur actuel, appelez getCurrentUser.
const currentUser = mParticle.Identity.getCurrentUser();

// Une fois que vous avez réussi à définir l'utilisateur actuel sur une constante appelée `currentUser`, vous pouvez définir des attributs utilisateur avec :
currentUser.setUserAttribute("user-attribute-key", "user-attribute-value");

// Pour définir un attribut de liste, définissez la valeur de l'attribut sur un tableau de chaînes. Par exemple :
currentUser.setUserAttribute("favorite-genres", ["documentary", "comedy", "romance", "drama"]);

// Pour supprimer un attribut utilisateur, appelez removeUserAttribute et transmettez le nom de l'attribut. Tous les attributs utilisateur partagent le même espace de clé.
currentUser.removeUserAttribute("attribute-to-remove");

Attributs utilisateur recommandés

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

Clé Attribut Utilisateur	Exemple de valeur	Remarques
firstname	John	Le prénom du client.
lastname	Doe	Le nom de famille du client.
mobile	3125551515	Les numéros de téléphone peuvent être formatés soit en `1112345678` soit en `+1 (222) 345-6789`.
age	33	L'âge du client.
dob	19900717	Date de naissance. Formaté sous la forme `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 à 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 Événements de Funnel

Le SDK Rokt vous permet de mettre en œuvre le suivi des événements pour collecter des données décrivant le parcours de vos utilisateurs à travers votre site. Vous pouvez ensuite utiliser ces données pour optimiser l'expérience de vos utilisateurs.

Il existe trois types d'événements principaux que vous pouvez suivre avec le SDK :

Événements de Vue de Page : Ce sont des événements que vous pouvez déclencher lorsqu'une page de votre site est chargée.
Événements Personnalisés : Ce sont des événements libres que vous créez pour suivre des informations spécifiques à votre site.
Événements de Commerce : Ce sont des événements spécifiques au commerce électronique qui peuvent décrire les différentes étapes de l'expérience d'achat, y compris l'ajout d'articles à un panier et l'achat final.

Lors de la première intégration avec le SDK Rokt, commencez par mettre en œuvre le suivi des vues de pages. Pour en savoir plus sur le suivi des événements personnalisés et de commerce, voir l'Annexe.

Suivre les Vues de Page

L'un des types d'événements les plus basiques que vous pouvez suivre est la vue de page.

Pour enregistrer une vue de page, utilisez la méthode logPageView() après que le SDK a été initialisé.

Dans l'exemple ci-dessous, l'événement inclut :

Un screen_name dérivé du dernier segment du chemin de l'URL (avec un retour par défaut à "home").
L'url complète de la page actuelle.
La referring-page, capturée à partir de document.referrer.

Cela est utile pour suivre la navigation de l'utilisateur sur votre site sans avoir besoin de spécifier manuellement les identifiants des pages.

// Attendez que le SDK soit entièrement chargé avant d'enregistrer l'événement
window.mParticle.ready(function() {
    mParticle.logPageView(
        // Nom de l'événement : "vue de page" identifie le type d'événement enregistré
        "page view",
        {
            // Capturez le dernier segment du chemin de l'URL comme nom d'écran,
            // par exemple, "/products/shoes" → "shoes". Valeur par défaut : "home" si le chemin est vide.
            "screen_name": location.pathname.split("/").filter(Boolean).pop() || "home",

            // Enregistrez l'URL complète de la page actuelle (y compris protocole, chemin, requête, et hash)
            "url": window.location.toString(),

            // Capturez l'URL de la page qui a référé l'utilisateur à celle-ci,
            // si disponible. Cela aide à suivre la navigation de l'utilisateur entre les pages ou les sites.
            "referring-page": document.referrer
        }
    );
});

5. Afficher un Placement

La principale valeur du SDK Rokt est déverrouillée grâce à la méthode selectPlacements, qui sert un placement hyper pertinent pour vos clients en fonction des attributs que vous fournissez.

Une fois l'intégration Rokt initialisée, vous pouvez appeler la méthode selectPlacements sur n'importe quelle page ou composant de votre site où vous souhaitez qu'un placement soit servi. Vous devriez appeler selectPlacements dès que la page a été chargée, que le SDK a été initialisé, et que les attributs suggérés montrés dans l'exemple de code ci-dessous sont disponibles pour être inclus dans votre appel.

Vous pouvez également passer un identifiant de page à identifier comme montré dans l'extrait ci-dessous. Cela identifie de manière unique la page où le placement Rokt sera ajouté, et est utile si vous avez un processus de commande en plusieurs étapes utilisant la même URL sur plusieurs pages. Vous pouvez utiliser n'importe quelle valeur pour votre identifiant de page, mais quelques exemples incluent :

stg.rokt.conf - Une page de confirmation dans un environnement de staging (ou de test).
prod.rokt.conf - Une page de confirmation dans un environnement de production.
stg.rokt.payments - Une page de paiements dans un environnement de staging (ou de test).
prod.rokt.payments - Une page de paiements dans un environnement de production.

Lors de l'appel de selectPlacements, vous devez fournir au moins les attributs email, firstname, lastname, billingzipcode et confirmationref. Les attributs supplémentaires que vous pourriez vouloir inclure sont montrés dans l'exemple.

remarque

Les attributs utilisateur définis avant un appel à selectPlacements en utilisant currentUser.setUserAttribute et les attributs définis dans un appel à selectPlacements sont envoyés à Rokt. Cependant, si vous définissez un attribut utilisateur deux fois (avant l'appel à selectPlacements, et dans l'appel à selectPlacements), la dernière valeur définie dans l'appel à selectPlacements est utilisée.

Par exemple, si vous définissez le prénom de l'utilisateur en utilisant currentUser.setUserAttribute("firstname", "Johnathan") mais que vous incluez également "firstname": "John" dans l'objet attributes de selectPlacements, alors la valeur "John" est envoyée à Rokt.

mParticle.ready(async function () {
    const selection = await window.mParticle.Rokt.selectPlacements({
        identifier: "yourPageIdentifier",
        attributes: {
            "email": "j.smith@example.com", // Adresse email du client utilisée lors du paiement
            "firstname": "Jenny",           // Prénom du client
            "lastname": "Smith",            // Nom de famille du client
            "confirmationref": "54321",     // Numéro de référence de commande / confirmation
            "billingzipcode": "90210",      // Code postal ou zip de facturation du client
            "amount": "100.00",             // Montant de la transaction en décimal p. ex. 300.5
            "paymenttype": "VISA",          // P. ex. Carte cadeau | Chase, Visa
            "ccbin": "372888",              // Bin de carte de crédit p. ex. 372888
            "mobile": "123-456-7890",       // Numéro de mobile / portable du client
            "country": "USA",               // Code pays ISO Alpha-2
            "language": "en",               // Code langue ISO 639-1 à 2 lettres
            "currency": "USD",              // Devise de la transaction p. ex. USD
            "billingaddress1": "",          // Ligne d'adresse 1 du client
            "billingaddress2": "",          // Ligne d'adresse 2 du client
            "age": "29",                    // Âge du client
            "gender": "f",                  // Genre du client m / f
            "cartItems": JSON.stringify(["item 1", "item 2", "item 3"]), // Contenu du panier sous forme de chaîne
        
            // Vous pouvez également passer des attributs supplémentaires pertinents pour la transaction ici
            // Voir le lien ci-dessous pour une liste complète des attributs
            "shippingtype": "Priority Express"
        }
    });
});

S'abonner à un emplacement

En vous abonnant à un événement de placement, vous pouvez recevoir des notifications déclenchées lorsqu'un emplacement est prêt ou lorsqu'un client interagit avec une offre.

mParticle.ready(async function () {
  // sélection
  const selection = await window.mParticle.Rokt.selectPlacements({
    // ajouter des attributs
  });
 
  // Écouter lorsque l'emplacement devient interactif/prêt à être affiché
  selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
    // Logique à exécuter après que l'emplacement soit devenu interactif
  });
 
  // Écouter lorsque l'utilisateur interagit positivement ou négativement avec une offre
  selection.on('OFFER_ENGAGEMENT').subscribe(function () {
    // Logique à exécuter après l'interaction avec l'offre
  });
});

Fermer un emplacement

Si votre site est une application monopage, une fois que vous avez servi un emplacement en appelant selectPlacements, il est important de fermer l'emplacement après que l'utilisateur a navigué vers une page différente. Cela empêche l'emplacement de s'afficher encore à l'utilisateur lorsqu'il navigue de retour.

Pour fermer et retirer un emplacement, appelez .close() sur l'objet de placement que vous avez créé:

// Ferme l'emplacement appelé 'selection'
selection.close();

remarque

Pour obtenir la liste complète des attributs pris en charge, voir Attributs de Données.

Votre équipe dédiée Rokt configurera vos layouts de placement pour vous afin qu'ils correspondent à votre marque et guide de style UX.

6. 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.

Ouvrez une nouvelle fenêtre de navigateur.
Ouvrez le panneau des outils de développement de votre navigateur. Pour la plupart des navigateurs, vous pouvez le faire en cliquant avec le bouton droit de la souris sur votre écran et en cliquant sur Inspecter.
Dans le panneau des outils de développement, allez à l'onglet Réseau et tapez experiences dans la barre de filtrage.
Accédez au site et à la page où vous avez intégré le SDK.
- Remarque : Assurez-vous d'ouvrir le panneau des outils de développement avant de naviguer vers votre site pour vous assurer que l'appel /experiences est enregistré par le navigateur.
Dans l'onglet Réseau du panneau des outils de développement, vous devriez voir au moins une requête /experiences. Cela indique que le SDK Web a été chargé avec succès.
Cliquez sur la requête /experiences (elle devrait avoir un statut de 200). Vérifiez l'onglet Charge utile/Requête pour vérifier les données partagées avec Rokt.
- Remarque : Pendant le test, vous pourriez voir un autre appel /experiences avec un statut de 204. Assurez-vous de faire la vérification sur l'appel avec un statut de 200.

Dépannage

Le SDK Web Rokt fournit des rapports d'erreurs contextuels. 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 syntaxe

Assurez-vous de ne pas oublier de virgules 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 illustré ci-dessous.

Incorrect :

email: ''
emailsha256: '',

Correct :

email: '',
emailsha256: '',

Erreurs d'initialisation

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

Annexe

Après avoir implémenté les placements et le suivi des vues de pages en suivant les instructions ci-dessus, vous pouvez vouloir implémenter un suivi d'événements supplémentaire.

Suivre les é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 de l'événement et un objet JSON contenant une liste de tout attribut personnalisé 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(
    // Le nom de l'événement
    'event-name',
    // Le type de l'événement
    mParticle.EventType.Other,
    // Inclure des attributs d'événements personnalisés pour décrire plus en détail l'événement
    {
        'custom-attribute-name': 'custom-attribute-value'
    }
);

Suivre les événements de commerce

Suivre un événement de commerce nécessite trois étapes :

Définir le produit ou les produits qui sont achetés dans une variable en utilisant la méthode createProduct.
Créer un objet pour contenir un résumé de la transaction.
Appeler la méthode logProductAction, incluant vos définitions de produit dans un tableau et un résumé de transaction.

1. Définir le produit

Lors de la définition du produit, créez un nouveau produit en utilisant la méthode mParticle.eCommerce.createProduct, en passant les attributs suivants et un objet JSON optionnel contenant des attributs de produit personnalisés que vous pouvez définir sous forme de paires clé/valeur.

remarque

Les attributs de produit doivent être ajoutés dans l'ordre indiqué ci-dessous. Si vous n'avez pas de valeur pour l'un des attributs optionnels, vous devez définir la valeur à null. Vous ne pouvez pas sauter ou omettre des attributs à l'exception de l'objet JSON optionnel pour les attributs personnalisés.

Attribut du produit	Description	Type de données	Obligatoire
Nom	Le nom du produit en cours d'achat.	Chaîne	Oui
SKU	L'unité de gestion des stocks pour le produit.	Chaîne	Oui
Prix	Le prix du produit.	Décimal	Oui
Quantité	Le nombre d'unités.	Entier	Non
Variante	La version spécifique du produit, si vous proposez des variantes. Par exemple : taille ou couleur.	Chaîne	Non
Catégorie	La catégorie à laquelle appartient le produit.	Chaîne	Non
Marque	Le nom de la marque du produit.	Chaîne	Non
Position	La position.	Chaîne	Non
Code promo	Le code promo pour le produit.	Chaîne	Non

var product1 = mParticle.eCommerce.createProduct(
    'Double Room - Econ Rate',  // Nom (obligatoire)
    'econ-1',                   // SKU (requis)
    100.00,                     // Prix (requis)
    4,                          // Quantité
    'variant',                  // Variante
    'room',                     // Catégorie
    'lodge-o-rama',             // Marque
    'banner',                   // Position
    null,                       // Code promo
    // Ajoutez des attributs personnalisés facultatifs sous forme d'un objet de paires clé/valeur
    {
        'ocean-view': true,
        'balcony': false
    }     
);

2. Résumer la transaction

Créez un résumé de la transaction dans un objet appelé transactionAttributes.

var transactionAttributes = {
    Id: 'foo-transaction-id',
    Revenue: 430.00,
    Tax: 30
};

3. Enregistrer l'événement commercial

Pour enregistrer l'événement commercial, appelez mParticle.eCommerce.logProductAction, et définissez ProductActionType à l'un des types d'actions pris en charge listés ci-dessous.

Incluez vos définitions de produits dans un tableau. Même si vous n'avez qu'une seule définition de produit, incluez-la dans un tableau comme indiqué dans l'exemple.

Vous pouvez également définir des attributs d'événement personnalisés pour l'événement commercial dans customAttributes.

// Plusieurs types "d'actions de produit" sont pris en charge, tels que AddToCart et Checkout. Cet exemple utilise l'action d'achat de produit.
mParticle.eCommerce.logProductAction(
    // Le type d'action de produit en cours d'enregistrement. Dans cet exemple, le type est "Purchase"
    mParticle.ProductActionType.Purchase,
    // Le tableau contenant les définitions de produits que vous avez déjà créées à l'étape 1.
    [product1],
    // Attributs personnalisés décrivant l'événement commercial
    customAttributes = { 
        'sale': true
    },
    // Cet espace est réservé à la spécification de drapeaux personnalisés pour les intégrations mParticle par Rokt. Les clients Rokt Ecommerce peuvent ignorer cette section en entrant 'null'.
    null, 
    // L'objet transactionAttributes que vous avez déjà créé à l'étape 2.
    transactionAttributes
);

Lors de l'appel de la méthode logProductAction, vous devez spécifier le type d'action de produit.

Types d'actions de production prises en charge

AddToCart
RemoveFromCart
Checkout
CheckoutOption
Click
ViewDetail
Purchase
Refund
AddToWishlist
RemoveFromWishlist
Unknown

Passage d'options supplémentaires de lancement d'intégration

Le SDK Rokt peut accepter des paramètres optionnels supplémentaires pour configurer le comportement de l'intégration.

Pour inclure une option de lancement facultative, incluez-la dans l'objet windiow.mParticle.config.launcherOptions dans le script d'initialisation :

// Incluez ceci dans le script d'initialisation à l'étape 1 ci-dessus
windiow.mParticle.config.launcherOptions = {
    noFunctional: true,
    // Voir toutes les options de lancement qui peuvent être définies ci-dessous
};

Gérer les préférences de cookies des clients

Utilisez cette option pour respecter les préférences de désinscription des clients en désactivant les cookies fonctionnels, qui sont normalement utilisés pour la personnalisation et les expériences de paiement améliorées.

Paramètre	Type	Par défaut
`noFunctional`	booléen	`false`

Un indicateur booléen permettant la gestion de la préférence utilisateur pour les cookies fonctionnels. Les cookies fonctionnels vous permettent de fournir les expériences client les plus pertinentes et optimales sur votre propre site, avec une personnalisation améliorée. Ils aident également à alimenter des fonctionnalités avancées au sein du checkout (par exemple, vendre des Upsells). En pratique, définir la valeur sur true empêche Rokt d'utiliser n'importe quel identifiant de suivi propriétaire.

Pour une discussion plus détaillée, voir Indicateurs de Consentement aux Cookies.

Mesurer les performances de chargement des pages dans les applications monopages

Fournissez le timestamp du chargement d'une page virtuelle pour que Rokt puisse mesurer avec précision les performances dans les SPAs et détecter les anomalies pouvant affecter l'expérience client.

Paramètre	Type	Par défaut
`pageInitTimestamp`	Date	`PerformanceNavigationTiming.responseStart`

Dans le cas où le lanceur d'intégration est initialisé sur une page virtuelle d'une SPA, cette valeur vous permet de fournir le timestamp de la page étant initialisée. Cela permet à Rokt de mesurer correctement les performances de chargement par rapport à la page qui l'a déclenchée, sans facteurs externes tels que le temps qu'il a fallu à l'utilisateur pour atteindre cette page. Avec ces informations, Rokt peut détecter toute anomalie dans les temps de chargement qui pourrait nuire à l'efficacité de l'intégration.

Lier l'activité du client avec un ID de session Rokt

Transmettez un ID de session Rokt généré précédemment pour vous assurer que l'activité dans différentes parties de l'expérience est correctement liée.

Paramètre	Type	Par défaut
`sessionId`	chaîne	—

ID de session Rokt à transmettre au cas où vous auriez déjà généré votre ID de session.

Par exemple, il est possible de faire générer votre ID de session en se connectant avec le backend de Rokt avant de visiter une page où votre balise est affichée. Dans ce cas, vous devez fournir l'ID de session Rokt généré précédemment en tant que paramètre afin que Rokt puisse associer les deux interactions.

Activez cette option lorsque vous souhaitez avoir un contrôle total sur la façon dont les liens Rokt et annonceurs s'ouvrent (par exemple, à l'intérieur d’un WebView au lieu d’un navigateur).

Paramètre	Type	Par défaut
`overrideLinkNavigation`	booléen	`false`

Lorsqu’il est défini sur true, Rokt ne gérera plus directement les ouvertures de liens. À la place, un événement partenaire LINK_NAVIGATION_REQUEST sera émis.

Ce drapeau est utile dans les scénarios où les partenaires nécessitent une gestion personnalisée des liens. Un cas d'utilisation courant est la gestion de différents comportements de liens, comme ouvrir les liens dans un WebView tout en utilisant un navigateur externe pour les liens de Rokt et des annonceurs. Pour distinguer entre les liens de Rokt et des annonceurs, les partenaires peuvent vérifier si l'URL contient la sous-chaîne "rokt.com".

Pour garantir un traitement approprié des événements, un mécanisme de temporisation est en place. Si un événement LINK_NAVIGATION_REQUEST n'est pas consommé dans les 3 secondes, une erreur sera levée. Cette précaution assure qu'il existe des abonnements actifs du côté du partenaire pour traiter l'événement, et si ce n'est pas le cas, Rokt en sera informé. .

Configuration de domaine de première partie​

1. Initialiser le SDK Rokt​

Script d'Initialisation SDK​

1.1 Entrez votre clé API Rokt​

1.2 Entrez votre sous-domaine personnalisé (optionnel)​

1.3 Configurez votre environnement de données​

1.4 Identifier l'utilisateur​

1.5 Définir des attributs utilisateur supplémentaires​

2. Identifier l'Utilisateur​

3. Définir les attributs utilisateur​

Attributs utilisateur recommandés​

4. Suivre les Événements de Funnel​

Suivre les Vues de Page​

5. Afficher un Placement​

S'abonner à un emplacement​

Fermer un emplacement​

6. Testez votre intégration​

Dépannage​

Erreurs de syntaxe​

Erreurs d'initialisation​

Annexe​

Suivre les événements personnalisés​

Suivre les événements de commerce​

1. Définir le produit​

2. Résumer la transaction​

3. Enregistrer l'événement commercial​

Types d'actions de production prises en charge​

Passage d'options supplémentaires de lancement d'intégration​

Gérer les préférences de cookies des clients​

Mesurer les performances de chargement des pages dans les applications monopages​

Lier l'activité du client avec un ID de session Rokt​

Personnaliser la façon dont les liens s'ouvrent dans votre expérience​

Configuration de domaine de première partie

1. Initialiser le SDK Rokt

Script d'Initialisation SDK

1.1 Entrez votre clé API Rokt

1.2 Entrez votre sous-domaine personnalisé (optionnel)

1.3 Configurez votre environnement de données

1.4 Identifier l'utilisateur

1.5 Définir des attributs utilisateur supplémentaires

2. Identifier l'Utilisateur

3. Définir les attributs utilisateur

Attributs utilisateur recommandés

4. Suivre les Événements de Funnel

Suivre les Vues de Page

5. Afficher un Placement

S'abonner à un emplacement

Fermer un emplacement

6. Testez votre intégration

Dépannage

Erreurs de syntaxe

Erreurs d'initialisation

Annexe

Suivre les événements personnalisés

Suivre les événements de commerce

1. Définir le produit

2. Résumer la transaction

3. Enregistrer l'événement commercial

Types d'actions de production prises en charge

Passage d'options supplémentaires de lancement d'intégration

Gérer les préférences de cookies des clients

Mesurer les performances de chargement des pages dans les applications monopages

Lier l'activité du client avec un ID de session Rokt

Personnaliser la façon dont les liens s'ouvrent dans votre expérience