Intégration d'Adobe Experience Platform pour le commerce électronique

Cette page explique comment implémenter le SDK Web pour Rokt Ecommerce en utilisant Adobe Experience Platform afin de fournir des expériences client plus pertinentes lors du passage en caisse. Le SDK vous permet de déclencher et de suivre ces expériences (comme afficher des offres sur les pages de confirmation) en se déclenchant sur des pages configurées et en renvoyant les données utilisateur et transactionnelles à Rokt pour personnalisation et mesure.

Vous apprendrez comment créer des éléments de données dans Adobe basés sur votre couche de données et comment créer des règles pour initialiser le SDK Rokt et afficher les emplacements Rokt.

Ajouter l'extension Rokt

1. Connectez-vous à Adobe Experience Platform.

2. Accédez à l'onglet Extensions et recherchez mParticle par Rokt dans le catalogue.

3. Cliquez sur l'extension mParticle par Rokt et cliquez sur Installer.

4. Accédez à l'extension mParticle par Rokt installée dans l'onglet Extensions et cliquez sur Configurer.

5. Entrez vos paramètres de configuration dans l'onglet Configuration :

   • Sous Clé API, entrez la clé API fournie par votre gestionnaire de compte Rokt.
   • Activez Utiliser le stockage de cookies si votre site Web utilise plusieurs sous-domaines (par exemple, mysite.com et checkout.mysite.com).
   • Si vous testez votre intégration, activez le drapeau Mode Développement. Une fois que votre intégration est prête pour les données de production, ce drapeau doit être désactivé.
   • L'extension mParticle par Rokt permet aux développeurs de spécifier un Niveau de journalisation qui enverra des avertissements, des erreurs et d'autres informations directement depuis votre intégration. Il est recommandé de définir le Niveau de journalisation sur Verbeux lors du test de votre intégration.
   • Si vous configurez un domaine personnalisé pour une intégration de domaine de première partie, entrez votre nouveau nom de domaine sous Domaine CNAME. Veuillez entrer le domaine dans le format suivant rkt.yourcompany.com.
   • Activez noTargeting et noFunctional pour désactiver les cookies de ciblage/fonctionnels, qui sont normalement utilisés pour la personnalisation et les expériences de passage en caisse améliorées.

Pour une discussion plus détaillée, voir Drapeaux de consentement aux cookies.

6. Configurez l'identité dans l'onglet Identités utilisateur :

   • Si vous allez intégrer un email brut, entrez l'élément de données que vous avez créé dans le champ Email.
   • Si vous allez intégrer un email haché (SHA-256), entrez l'élément de données que vous avez créé dans le champ Email SHA256.

7. Cliquez sur Enregistrer.

Créez vos Règles

Initialiser le SDK Rokt

1. Accédez à l'onglet Règles et choisissez Ajouter une règle.
2. Donnez à votre règle un nom descriptif, tel que Rokt - Initialization, et créez votre Événement pour déclencher la règle.

remarque

Chaque site est différent, mais Rokt recommande d'utiliser le Type d'Événement Bibliothèque chargée (haut de page) pour s'assurer que l'Action d'Initialisation se charge dès que possible.

3. Créez votre Action et choisissez mParticle par Rokt comme Extension et Initialiser Rokt comme Type d'Action. 4. Cliquez sur Conserver les modifications dans la Configuration de l'Action et Enregistrer dans la bibliothèque.

remarque

Chaque site est différent, mais Rokt recommande de déclencher l'Action d'Initialisation sur chaque page. Cela garantit la latence de livraison d'offre la plus faible et la précision d'identification de l'utilisateur la plus élevée.

Identifier l'utilisateur

Vous devriez créer une règle qui identifie l'utilisateur actuel à Rokt. Assurez-vous d'inclure cette règle sur votre site afin qu'elle soit déclenchée dès que l'adresse e-mail est connue.

1. Accédez à l'onglet Règles et choisissez Ajouter une règle.
2. Donnez à votre règle un nom descriptif, tel que Rokt - Identify, et créez votre Événement pour déclencher la règle.
3. Créez votre Action et choisissez mParticle par Rokt comme Extension et Événements d'Identité comme Type d'Action.
4. Sélectionnez Identifier comme Méthode d'Identité.
5. Cliquez sur Conserver les modifications dans la Configuration de l'Action et Enregistrer dans la bibliothèque.

Une fois que cette action a été exécutée, elle identifiera l'utilisateur en utilisant la valeur Email/Email SHA256 des paramètres de l'Extension.

Enregistrer les vues de page

Vous devriez enregistrer les vues de page dès que chaque page du parcours de transaction de l'utilisateur est chargée. Pour activer les vues de page :

1. Accédez à l'onglet Règles et choisissez Ajouter une règle.
2. Donnez à votre règle un nom descriptif, tel que Rokt - Page View, et créez votre Événement pour déclencher la règle.

remarque

Chaque site est différent, mais Rokt recommande d'enregistrer les vues de page dès que la page se charge et que l'action Initialiser Rokt a été déclenchée. Veuillez consulter Combinaison de Règles pour plus d'informations.

3. Créez votre Action et choisissez mParticle par Rokt comme Extension et Enregistrer la Vue de Page comme Type d'Action.
4. Ajoutez les configurations de Vue de Page pour les Paramètres de Page, les Attributs Personnalisés et les Drapeaux Personnalisés.

L'action Enregistrer la Vue de Page accepte les champs suivants :

• Nom de l'Événement : une chaîne pour le nom de la page en cours de chargement
• Attributs Personnalisés : un objet de paires clé/valeur contenant des informations sur la page
• Drapeaux Personnalisés : un objet de paires clé/valeur contenant des informations sur la page, généralement spécifiques à un partenaire technologique ; par exemple SnapchatConversions.ClickId

Le champ du nom de la page doit être défini sur un nom de page générique. Par exemple, un site de commerce électronique pourrait avoir des centaines de pages de détails de produit. Pour les enregistrer correctement, vous devriez utiliser un nom générique (par exemple, "Page de Détail du Produit") et ensuite enregistrer l'url et d'autres attributs de la page en tant qu'attributs.

Dans l'exemple ci-dessous, l'action Enregistrer la Vue de Page :

• Sous Nom de l'Événement, définissez la valeur page view.
• Définissez un Élément de Données screen_name dérivé du dernier segment du chemin URL (avec un retour à "accueil").
• Définissez un Élément de Données url capturant l'URL complète de la page actuelle.
• Définissez un Élément de Données referring-page, capturé à partir de document.referrer.

Pour des conseils sur la façon de construire ces Éléments de Données, veuillez consulter les Attributs Recommandés pour l'Événement de Vue d'Écran ci-dessous.

5. Cliquez sur Conserver les modifications dans la Configuration de l'Action et Enregistrer dans la bibliothèque.

Afficher les Emplacements Rokt

En plus de permettre aux Actions d'initialiser le SDK Rokt, les intégrations Rokt Ecommerce nécessitent également une Action pour afficher les emplacements Rokt.

1. Accédez à l'onglet Règles et choisissez Ajouter une Règle.
2. Donnez à votre Règle un nom descriptif, tel que Rokt - Show Placement, et créez votre Événement pour déclencher la règle.

La configuration exacte du déclencheur variera pour chaque site. Voici des exemples de configurations de déclencheurs selon que votre site est une application multi-pages (MPA) ou une application à page unique (SPA) :

• Configuration du déclencheur pour les applications multi-pages

  1. Définissez le Type d'Événement sur Core → DOM Ready, Core → Page Bottom, ou Core - Rokt Init Complete si vous utilisez l'Événement Personnalisé roktInitComplete.
  2. Sous Conditions, ajoutez une condition Core → Path Without Query String.
  3. Entrez une règle de correspondance pour identifier la page où la balise doit être déclenchée. Par exemple, si votre page de confirmation est example.com/cart/payment/confirmation, le paramètre d'identification peut être l'un des /cart, /payment, ou /confirmation.

• Configuration du déclencheur pour les applications à page unique

  1. Définissez le Type d'Événement sur Core → History Change.
  2. Sous Conditions, ajoutez une condition Core → Path Without Query String.
  3. Entrez une règle de correspondance pour identifier la page où la balise doit être déclenchée. Par exemple, si votre page de confirmation est example.com/cart/payment/confirmation, le paramètre d'identification peut être l'un des /cart, /payment, ou /confirmation.

3. Créez votre Action et choisissez mParticle by Rokt comme Extension et Show Placements comme Type d'Action.

4. Dans les Paramètres d'Emplacement :

   • Il y a une option pour définir un Identifiant de Page. Un identifiant de page identifie de manière unique la page où l'emplacement Rokt sera ajouté, et est utile si vous avez un flux de paiement en plusieurs étapes qui utilise 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 mise en scène (ou de test).
     • prod.rokt.conf - Une page de confirmation dans un environnement de production.
     • stg.rokt.payments - Une page de paiement dans un environnement de mise en scène (ou de test).
     • prod.rokt.payments - Une page de paiement dans un environnement de production.
   • Activez Hash raw email attribute (SHA256) si vous préférez envoyer à Rokt la version hachée de l'attribut Email.

5. Dans l'onglet Attributs de Base, remplissez tous les attributs disponibles à envoyer à Rokt. Vous devriez fournir au moins les attributs email, firstname, lastname, billingzipcode et confirmationref.

6. Dans l'onglet Attributs Personnalisés, ajoutez tous les autres attributs qui ne sont pas prédéfinis dans les Attributs de Base.

7. Cliquez sur Conserver les Modifications dans la Configuration de l'Action et Enregistrer.

Recommandations de Configuration

Ordonnancement des Règles

Adobe Experience Platform ne garantit pas l'ordre d'exécution des règles entre différentes règles, même si elles partagent le même événement. Pour s'assurer que les événements suivants sont déclenchés correctement, vous pouvez contrôler indirectement le séquençage de ces règles en utilisant un Événement Personnalisé Partagé.

Il est crucial que les actions soient déclenchées dans l'ordre attendu. Par exemple :

• Pour les Applications Multi-pages (MPAs), l'action Initialize Rokt doit être déclenchée avant que toute action suivante puisse être déclenchée lors de tout chargement de page.
• Si vous identifiez un utilisateur et affichez un emplacement sur la même page, l'action Identity Events sera déclenchée automatiquement si vous définissez l'attribut Email dans l'action Show Placements.

Pour vous assurer que vos actions suivantes seront déclenchées après l'action Initialize Rokt, vous pouvez ajouter l'événement personnalisé suivant afin qu'il soit déclenché après que l'action ait été exécutée sur chaque page :

1. Dans la configuration de votre action Initialize Rokt, assurez-vous que Wait to run next action est activé dans les Options Avancées.
2. Dans la configuration de votre règle Initialize Rokt, ajoutez une nouvelle Action avec Core comme Extension et Custom Code comme Type d'Action. Nommez cette Action Core - Rokt Init Complete.
3. Sélectionnez JavaScript comme Langage et dans l'Éditeur, collez la ligne suivante :

window.dispatchEvent(new CustomEvent("roktInitComplete"));

4. Dans les configurations de règles suivantes, telles que Log Event ou Log Page View, déclenchez votre action à partir d'un Événement avec une Extension Core et un Type d'Événement Custom Event.
5. Définissez le Type d'Événement Personnalisé sur roktInitComplete et sélectionnez any element.
6. Cliquez sur Conserver les Modifications.
7. Ajoutez toutes autres Conditions pertinentes à la configuration de votre Règle pour vous assurer qu'elle se déclenche sur la ou les bonnes pages.

Cette configuration garantira que vous déclenchez les actions dans le bon ordre sur chaque page.

remarque

Répétez cette même configuration pour activer un événement personnalisé roktIdentityComplete pour vous assurer que votre action Identity a été déclenchée avant l'action Log Event.

Combinaison des Règles

Rokt recommande de combiner plusieurs Actions mParticle par Rokt en une seule règle. Un exemple est de combiner les actions Initialize Rokt & Log Page View car elles sont toutes deux chargées sur toutes les pages.

1. Répétez les étapes 1-3 de Ordonnancement des Règles.
2. Créez une nouvelle Action et choisissez mParticle par Rokt comme Extension et Log Page View comme Type d'Action.

Cela garantira que les actions Initialize Rokt et Log Page View sont exécutées dans la même règle sur chaque page.

Éléments de données

Comprendre la couche de données

La couche de données devrait avoir été implémentée sur votre page web par vos développeurs.

Une couche de données est un objet qui contient toutes les informations que vous souhaitez partager avec les Éléments de Données de l'Adobe Experience Platform. Des informations telles que des événements ou des variables peuvent être partagées avec Adobe via la couche de données, et des déclencheurs peuvent être configurés dans les Éléments de Données de l'Adobe Experience Platform en fonction des valeurs des variables ou des événements spécifiques.

Adobe recommande d'utiliser le Adobe Client Data Layer pour les nouvelles implémentations ou les implémentations restructurées. Vous êtes libre d'utiliser d'autres spécifications de couche de données. S'aligner sur une couche de données cohérente qui répond aux besoins de votre organisation est le plus important.

Consultez le guide du développeur Adobe Experience pour des détails complets sur le fonctionnement de la couche de données.

Exemple d'une couche de données

window.adobeDataLayer = window.adobeDataLayer || [];

window.adobeDataLayer.push({
  email: "jenny.smith@rokt.com",
  user: { firstname: "Jenny", lastname: "Smith" },
  ecommerce: { transaction: { amount: "12.36" } },
  event: "page loaded",
});

Identifier vos éléments de données

Les éléments de données sont configurés dans votre Adobe Experience Platform et sont associés à la couche de données. Consultez le guide du développeur Adobe Experience pour plus de détails sur les éléments de données.

La structure de votre couche de données sur votre page affecte le nom de l'élément de données dans votre Adobe Experience Platform. Voir les exemples suivants. Si vous utilisez un objet collecteur de données dans le cadre de votre couche de données, utilisez simplement la notation par point dans le chemin pour référencer l'objet et la propriété que vous souhaitez capturer dans l'élément de données, comme _myData.pageName, ou adobeDataLayer.pageName, etc.

Exemple de script de couche de données 1 :

window.adobeDataLayer.push({
  email: "jenny.smith@rokt.com",
});

Nom du chemin de la couche de données : adobeDataLayer.email

Exemple de script de couche de données 2 :

window.adobeDataLayer.push({
  user: {
    firstname: "Jenny",
  },
});

Nom du chemin de la couche de données : adobeDataLayer.user.firstname

Exemple de script de couche de données 3 :

window.adobeDataLayer.push({
  ecommerce: {
    transaction: {
      amount: "12.36",
    },
  },
});

Nom du chemin de la couche de données : adobeDataLayer.ecommerce.transaction.amount

remarque

Le type d'élément de données de variable JavaScript traite les références de tableau comme des points au lieu de crochets, donc référencer l'élément de données prénom comme adobeDataLayer.user[0].firstname ne fonctionnera pas.

Ajouter des éléments de données

1. Accédez à l'onglet Éléments de Données et choisissez Ajouter un Élément de Données.

2. Nommez votre variable et choisissez Core comme extension.

   • Utilisez cependant votre développeur a stocké vos valeurs pour Type d'Élément de Données
   • Utilisez Variable JavaScript pour les valeurs en mémoire (par exemple, adobeDataLayer.email)
   • Utilisez Stockage Local uniquement si les valeurs sont conservées dans le localStorage du navigateur

3. Entrez le nom du chemin qui correspond au nom de la variable dans votre configuration de couche de données par votre développeur.

Attributs Recommandés pour l'Événement d'Affichage d'Écran

Un exemple d'attributs que Rokt recommande aux Partenaires d'envoyer sont screen_name, url, et referring-page. Pour ajouter ces attributs en tant qu'Éléments de Données :

1. Accédez à l'onglet Éléments de Données et choisissez Ajouter un Élément de Données.

2. Nommez votre variable et choisissez Core comme extension.

   • Pour screen_name :
     • Définissez le Type d'Élément de Données comme Code Personnalisé
     • Cliquez sur Ouvrir l'Éditeur et collez la ligne suivante :

     return location.pathname.split("/").filter(Boolean).pop() || "home";

   • Pour url :
     • Définissez le Type d'Élément de Données comme Info Page
     • Dans le menu déroulant Attribut, sélectionnez URL
   • Pour referring-page :
     • Définissez le Type d'Élément de Données comme Info Page
     • Dans le menu déroulant Attribut, sélectionnez Référent

3. Cliquez sur Enregistrer et Enregistrer dans la Bibliothèque Vous pouvez maintenant référencer ces Éléments de Données dans vos Attributs Personnalisés Log Page View.