Intégration de Adobe Experience Platform pour les annonceurs

Cette page explique comment mettre en œuvre des publicités Rokt en utilisant Adobe Experience Platform pour boucler la boucle en liant les conversions à vos campagnes. En liant les conversions à votre engagement publicitaire, vous pouvez permettre une attribution plus précise, une optimisation en temps réel et une mesure des campagnes.

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 enregistrer des conversions.

Créez vos Règles

Initialiser le SDK Rokt

1. Connectez-vous à Adobe Experience Platform.
2. À partir de la page d'aperçu d'une propriété, ouvrez l'onglet Règles et choisissez Ajouter une règle.
3. Donnez à votre règle un nom descriptif, comme Initialisation de Rokt, et créez votre événement pour déclencher la règle.
   • Chaque site est différent, mais Rokt recommande d'inclure le script SDK sur chaque page. Cela garantit la latence de livraison des offres la plus basse et la précision d'identification des utilisateurs la plus élevée.
4. Créez votre Action et choisissez Core comme Extension et Code personnalisé comme Type d'Action.
5. Choisissez HTML comme langage et collez le fragment suivant :

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

// Si vous avez configuré un domaine de première partie, définissez-le comme valeur de DOMAIN au lieu du domaine par défaut apps.rokt-api
const ROKT_DOMAIN = "https://apps.rokt-api.com";

// Définissez vos paramètres de configuration du SDK
window.mParticle = {
    config: {
        // Spécifiez l'environnement de données avec isDevelopmentMode:
        // 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,
        // Identifiez l'utilisateur actuel:
        // Si vous avez l'adresse e-mail de l'utilisateur, incluez-la dans un objet appelé `userIdentities` au sein de `identifyRequest` comme indiqué ci-dessous.
        identifyRequest: {
            userIdentities: {
                // Assurez-vous de remplacer la variable d'exemple {email} par la variable que vous créez pour stocker l'e-mail de votre utilisateur
                email: _satellite.getVar('email'),
                // Les adresses e-mail hachées doivent être passées dans le champ `other`
                other: _satellite.getVar('hashed_email')
            },
        }
    },
};

// Charger 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>

6. Entrez vos paramètres de configuration :
   • Remplacez YOUR_API_KEY par la clé API fournie par votre gestionnaire de compte Rokt.
   • Si vous avez configuré un domaine personnalisé pour une intégration de domaine de première partie, remplacez https://apps.rokt-api.com par votre nouveau domaine.
   • Si vous êtes prêt à utiliser vos actions pour les données de production, réglez isDevelopmentMode sur false. Laissez-le sur true si vous êtes encore en train de tester vos actions.
   • Assurez-vous que email est défini sur l'élément de données que vous avez créé pour stocker l'adresse e-mail non-hachée de votre utilisateur. Dans l'exemple de code ci-dessus, vous pouvez accéder à votre élément de données en utilisant _satellite.getVar('email').
7. Cliquez sur Keep Changes dans la Configuration de l'Action et sur Save.

Identifier l'utilisateur

Vous devez également créer une Règle qui identifie l'utilisateur actuel à Rokt. Assurez-vous d'inclure cette Règle dans votre site afin qu'elle soit déclenchée dès que l'utilisateur fournit son adresse e-mail.

1. Depuis la page d'aperçu d'une propriété, ouvrez l'onglet Rules et choisissez Add Rule.
2. Donnez à votre Règle un nom descriptif, tel que Rokt Identify, et créez votre Événement pour déclencher la règle.
   • Configurez un Événement pour que cette Règle soit déclenchée dès qu'un utilisateur fournit son adresse e-mail. L'Événement que vous utilisez dépendra de votre intégration spécifique.

attention

La configuration exacte de l'Événement que vous utilisez pour la Règle d'Identification de l'Utilisateur dépendra de votre intégration. Si vous avez des questions sur la meilleure façon de mettre en œuvre cette Règle afin que vos utilisateurs soient identifiés avant d'enregistrer les événements, parlez à votre gestionnaire de compte Rokt.

3. Créez votre Action et choisissez Core comme Extension et Custom Code comme Type d'Action.
4. Choisissez HTML comme langage et collez le code suivant :

<script>
const identifyRequest = {
    userIdentities: {
        // Si vous utilisez un email brut, non-haché, passez-le dans le champ `email`
        email: _satellite.getVar('email'),
        // Si vous utilisez un email haché, passez-le dans le champ `other`
        other: _satellite.getVar('hashed_email')
    }
};
window.mParticle.Identity.identify(identifyRequest);
</script>

5. Si vous envoyez l'adresse e-mail brute et non-hachée de l'utilisateur à Rokt, définissez-la sur email. Si vous envoyez l'adresse e-mail hachée, définissez-la sur other. Veillez à remplacer les noms des variables d'exemple (email et hashed-email) par le nom de l'Élément de Donnée que vous avez créé pour stocker l'adresse e-mail de votre utilisateur.
6. Cliquez sur Conserver les modifications dans la Configuration de l'action et Enregistrer.

Suivre les vues de page

Les annonceurs doivent suivre les vues de chaque page à travers l'entonnoir de conversion en ajoutant une règle de vue de page dès que possible lorsque chaque page est chargée.

1. Depuis la page d'aperçu d'une propriété, ouvrez 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.
   • Configurez un Événement pour que cette règle soit déclenchée dès que chaque page est chargée. L'Événement que vous utilisez dépendra de votre intégration spécifique.

attention

La configuration exacte de l'Événement que vous utilisez pour la Règle de vue de page dépendra de votre intégration. Si vous avez des questions sur la meilleure façon d'implémenter cette règle afin que les pages soient suivies, parlez à votre gestionnaire de compte Rokt.

3. Créez votre Action et choisissez Core comme Extension et Code personnalisé comme Type d'action.
4. Choisissez HTML comme langue et collez le snippet suivant :

<script>
window.mParticle.ready(
  function() {
    mParticle.logPageView(
        // Nom de la page
        "page view",
        // Un objet contenant des attributs décrivant la page
        {
            "url": window.location.toString(),
            "product": "Example Product Name",
            // Ajoutez tout autre attribut spécifique à la page sous forme de paires clé/valeur
            "custom-attribute-name": "custom-attribute-value"
        }
    );
  }
);
</script>

La méthode logPageView du SDK web prend deux arguments :

• Nom de la Page : 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

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étail de produit. Pour les enregistrer correctement, vous devriez utiliser un nom générique (par exemple "Page de Détail de Produit") et ensuite enregistrer l'url et d'autres attributs de la page en tant qu'attributs.

Insérer un Placement

En plus de créer une action pour initialiser le SDK Rokt, les intégrations Rokt Ecommerce nécessitent également une action pour insérer un placement.

1. Depuis la page d'aperçu d'une propriété, ouvrez l'onglet Règles et choisissez Ajouter une règle.

2. Donnez à votre Règle un nom descriptif, tel que Rokt Ajouter un Placement, et créez votre Événement pour déclencher la règle.

   • Les étapes suivantes varient 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 ou Core → Page Bottom.
     2. Sous Conditions, ajoutez une condition Core → Path Without Query String ou Page URL.
     3. Entrez une règle correspondante pour identifier la page où l'action doit se déclencher. Par exemple, si votre page de confirmation est example.com/cart/payment/confirmation, le paramètre d'identification peut être n'importe lequel parmi 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 → Page URL.
     3. Entrez une règle correspondante pour identifier la page où l'action doit se déclencher. Par exemple, si votre page de confirmation est example.com/cart/payment/confirmation, le paramètre d'identification peut être n'importe lequel parmi cart, payment ou confirmation.

3. Créez votre Action et choisissez Core comme l'Extension et Custom Code comme le Type d'Action.

4. Choisissez HTML comme langue et collez le fragment de code suivant :

<script>

window.mParticle.ready(
  function() { 
    var selection = window.mParticle.Rokt.selectPlacements({
      attributes: {
        "email": _satellite.getVar('email'),
        "firstname": _satellite.getVar('firstname'),
        "lastname": _satellite.getVar('lastname'),
        "mobile": _satellite.getVar('mobile'),
        "age": _satellite.getVar('age'),
        "gender": _satellite.getVar('gender'),
        "billingaddress1": _satellite.getVar('billingaddress1'),
        "billingaddress2": _satellite.getVar('billingaddress2'),
        "confirmationref": _satellite.getVar('confirmationref'),
        "billingzipcode": _satellite.getVar('billingzipcode'),
        "amount": _satellite.getVar('amount'),
        "paymenttype": _satellite.getVar('paymenttype'),
        "ccbin": _satellite.getVar('ccbin'),
        "country": _satellite.getVar('country'),
        "language": _satellite.getVar('language'),
        "currency": _satellite.getVar('currency'),
        "shippingtype": _satellite.getVar('shippingtype')
      }
    });
  }
);

</script>

5. Définissez chaque attribut que vous souhaitez transférer à Rokt avec la variable que vous avez créée en fonction de la couche de données de votre site.

attention

Assurez-vous de remplacer les attributs d'exemple dans l'extrait par vos propres éléments de données.

6. Cliquez sur Conserver les modifications dans la Configuration de l'action et Enregistrer.

Ordre 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 vous assurer que les règles des événements suivants sont correctement exécutées, vous pouvez contrôler indirectement le séquencement de ces règles en utilisant un Événement Personnalisé Partagé.

1. Dans votre extrait d'Initialisation, ajoutez l'événement personnalisé suivant :

window.dispatchEvent(new Event("roktReady"));

2. Dans les règles suivantes, ajoutez un Événement avec un Type d'Événement Événement Personnalisé
3. Définissez le Type d'Événement sur le nom de l'événement que vous avez défini.
4. Ajoutez des conditions pertinentes pour votre Règle

Configuration des variables dans Adobe Experience Platform

Comprendre la couche de données

La couche de données doit 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 d'Adobe Experience Platform. Des informations telles que les événements ou les 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 d'Adobe Experience Platform en fonction des valeurs des variables ou en fonction 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 de 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",
});

Identification de 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 votre couche de données, utilisez simplement la notation par points 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 firstname comme adobeDataLayer.user[0].firstname ne fonctionnera pas.

:::## Ajout d'éléments de données

1. Accédez à l'onglet Éléments de Données et choisissez Ajouter un Élément de Donnée.
2. Nommez votre variable et choisissez Core comme extension.
   • Utilisez le type d'élément de données qui correspond à la manière dont votre développeur a stocké vos valeurs pour Type d'Élément de Donnée
   • Utilisez Variable JavaScript pour les valeurs en mémoire (par exemple, adobeDataLayer.email)
   • Utilisez Storage Local uniquement si les valeurs sont enregistrées dans le localStorage du navigateur
3. Entrez le nom de chemin qui correspond au nom de la variable dans la configuration de votre couche de données par votre développeur.

Rokt suggère de créer des variables pour les attributs suivants :

• email
• firstname
• lastname
• zipcode
• mobile
• conversiontype
• confirmationref
• amount
• currency