Aller au contenu principal

Intégration de Adobe Experience Platform pour les Annonceurs

Cette page explique comment implémenter les annonces Rokt à l'aide de Adobe Experience Platform pour boucler la boucle en reliant les conversions à vos campagnes. En reliant les conversions à l'engagement de vos annonces, 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 en fonction de votre couche de données et comment créer des règles pour initialiser le SDK Rokt et enregistrer les 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 Rules et choisissez Add Rule. adobe-rule-page
  3. Donnez à votre règle un nom descriptif, tel que Initialisation 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 la plus basse pour la livraison des offres et la précision la plus élevée pour l'identification des utilisateurs. adobe-edit-rule
  4. Créez votre Action et choisissez Core en tant qu'Extension et Custom Code en tant que Type d'Action. adobe-edit-action
  5. Choisissez HTML comme langage et collez le snippet 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 la valeur du DOMAINE 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 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 email de l'utilisateur, incluez-la dans un objet appelé `userIdentities` dans `identifyRequest` comme montré ci-dessous.
        identifyRequest: {
            userIdentities: {
                // Assurez-vous de remplacer la variable d'exemple {email} par la variable que vous créez pour stocker l'email de votre utilisateur
                email: _satellite.getVar('email'),
                // Les adresses email hachées doivent être passées dans le champ `other`
```js
                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>

adobe-edit-html

  1. Saisissez 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 votre balise pour les données de production, définissez isDevelopmentMode sur false. Laissez-le sur true si vous testez encore votre balise.
    • 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'extrait d'exemple ci-dessus, vous pouvez accéder à votre élément de données en utilisant _satellite.getVar('email').
  2. Cliquez sur Keep Changes dans la configuration de l'action et Save.

Identifier l'utilisateur​

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

  1. À partir de 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, comme Rokt Identify, et créez votre événement pour déclencher la règle.
    • Configurez un événement de sorte que cette règle soit déclenchée dès qu'un utilisateur fournit son adresse e-mail. L'événement que vous utiliserez 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 avec succès avant de consigner les événements, parlez à votre gestionnaire de compte Rokt.

  1. Créez votre action et choisissez Core comme Extension et Custom Code comme Type d'action.
  2. Choisissez HTML comme langue et collez l'extrait suivant :
<script>
const identifyRequest = {
    userIdentities: {
        // Si vous utilisez un e-mail brut, non haché, transmettez-le dans le champ `email`
        email: _satellite.getVar('email'),
        // Si vous utilisez un e-mail haché, transmettez-le dans le champ `other`
        other: _satellite.getVar('hashed_email')
    }
};
window.mParticle.Identity.identify(identifyRequest);
</script>
  1. 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. Assurez-vous de remplacer les noms de variables d'exemple (email et hashed-email) par le nom de l'élément de données que vous avez créé pour stocker l'adresse e-mail de votre utilisateur.
  2. Cliquez sur Garder les modifications dans la Configuration de l'Action et Enregistrer.

Suivre les vues de page​

Les annonceurs doivent suivre les vues pour chaque page du tunnel de conversion en ajoutant une règle de vue de page dès que possible quand 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 de sorte que cette Règle soit déclenchée dès que chaque page se charge. L'Événement que vous utiliserez dépendra de votre intégration spécifique.
attention

La configuration exacte de l'Événement que vous utiliserez pour la Règle de vue de page dépendra de votre intégration. Si vous avez des questions sur la meilleure manière de mettre en œuvre cette Règle afin que les pages soient suivies, parlez à votre gestionnaire de compte Rokt.

  1. Créez votre Action et choisissez Core comme Extension et Code personnalisé comme Type d'action.
  2. Choisissez HTML comme langage et collez l'extrait de code suivant :
<script>
window.mParticle.ready(
  function() {
    mParticle.logPageView(
        // Nom de la page
        "vue de page",
        // Un objet contenant des attributs décrivant la page
        {
            "url": window.location.toString(),
            "produit": "Nom de produit exemple",
            // Ajoutez d'autres attributs spécifiques à la page sous forme de paires clé/valeur
            "nom-attribut-personnalisé": "valeur-attribut-personnalisé"
        }
    );
  }
);
</script>

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

  • Nom de la page : une chaîne de caractères 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étails de produit. Pour les enregistrer correctement, vous devriez utiliser un nom générique (par exemple, "Page de détail du produit") puis enregistrer l'URL et d'autres attributs de la page en tant qu'attributs.

Enregistrer une conversion​

En plus de créer une Règle pour initialiser le SDK Rokt, les intégrations des annonceurs Rokt nécessitent également une Règle pour enregistrer une conversion.

  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 Log Conversion, et créez votre Événement pour déclencher la règle.

    • Les étapes suivantes varient en fonction de la nature de votre site - application multi-page (MPA) ou application mono-page (SPA) :

    • Configuration de 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 URL de la page.
      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 suivants : cart, payment ou confirmation.

    • Configuration de déclencheur pour les applications mono-page​

      1. Définissez le Type d'Événement sur Core → History Change.
      2. Sous Conditions, ajoutez une condition Core → URL de la page.
      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 suivants : cart, payment ou confirmation.

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

  4. Choisissez HTML comme langue et collez le snippet suivant :

<script>
window.mParticle.ready(
  function() {
        var currentUser = mParticle.Identity.getCurrentUser();
        currentUser.setUserAttribute("firstname", _satellite.getVar('first_name'));
        currentUser.setUserAttribute("lastname", _satellite.getVar('last_name'));
        currentUser.setUserAttribute("zipcode", _satellite.getVar('zipcode'));
        currentUser.setUserAttribute("mobile", _satellite.getVar('mobile'));

        mParticle.logEvent(
        "conversion", // Le nom de l'événement
        mParticle.EventType.Transaction, // Le type d'événement
        {
            "conversiontype": _satellite.getVar('conversiontype'), // Type de conversion
            "confirmationref": _satellite.getVar('confirmationref'), // ID de transaction / ID de commande
            "amount": _satellite.getVar('amount'), // Montant de la transaction par ex. 300.5
            "currency": _satellite.getVar('currency'), // Devise de la transaction, par exemple USD
        }
    );
  }
);
</script>
  1. Définissez chaque attribut que vous souhaitez transmettre à Rokt avec la variable 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.

  1. Cliquez sur Conserver les modifications dans la Configuration des actions et sur 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 s'assurer que les règles des événements suivants sont correctement déclenchées, vous pouvez contrôler indirectement la séquence 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"));
  1. Dans les règles suivantes, ajoutez un Événement avec un Type d'Événement Événement Personnalisé
  2. Définissez le Type d'Événement sur le nom de l'événement que vous avez défini.
  3. Ajoutez les conditions pertinentes pour votre Règle

Configuration des variables dans Adobe Experience Platform​

Comprendre le niveau de données​

Le niveau de données devrait avoir été implémenté sur votre page web par vos développeurs.

Un niveau 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 des événements ou des variables peuvent être partagées avec Adobe via le niveau 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 des événements spécifiques.

Adobe recommande d'utiliser le Adobe Client Data Layer pour les implémentations nouvelles ou restructurées. Vous êtes libre d'utiliser d'autres spécifications de niveau de données. S'aligner sur un niveau de données cohérent 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 du niveau de données.

Exemple d'un niveau 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 apparié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 pointée 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 de chemin de couche de données : adobeDataLayer.email

Exemple de script de couche de données 2 :

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

Nom de chemin de 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 de chemin de couche de données : adobeDataLayer.ecommerce.transaction.amount

remarque

Le type d'élément de données 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ées. adobe-data-element-page
  2. Nommez votre variable et choisissez Core comme extension.
    • Utilisez la méthode que votre développeur a utilisée pour stocker 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 de chemin qui correspond au nom de la variable dans votre configuration de couche de données par votre développeur. adobe-edit-data-element

Rokt recommande de créer des variables pour les attributs suivants :

  • email
  • firstname
  • lastname
  • zipcode
  • mobile
  • conversiontype
  • confirmationref
  • amount
  • currency
Cet article vous a-t-il été utile ?
Last updated Sep 24, 2025