Intégration de la plateforme Adobe Experience pour les annonceurs

Cette page explique comment implémenter les annonces Rokt en utilisant la plateforme Adobe Experience 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 basés sur 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 à la plateforme Adobe Experience.
2. Depuis la page de présentation d'une propriété, ouvrez l'onglet Règles et choisissez Ajouter une règle.
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 de livraison d'offre la plus basse et la précision d'identification utilisateur 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 de code 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 SDK
window.mParticle = {
    config: {
        // Spécifiez l'environnement de données avec isDevelopmentMode:
        // Définissez isDevelopmentMode à true si vous testez encore votre intégration.
        // Définissez isDevelopmentMode à 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 indiqué 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`
                other: _satellite.getVar('hashed_email')
            },
        }
    },
};

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

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 votre balise pour les données de production, réglez isDevelopmentMode sur false. Laissez-le réglé sur true si vous testez encore votre balise.
   • Assurez-vous que email est réglé 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 Conserver les modifications dans la Configuration de l'action et Enregistrer.

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 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 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.
   • 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 correctement identifiés avant l'enregistrement des événements, 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 langage et collez le code suivant :

<script>
const identifyRequest = {
    userIdentities: {
        // Si vous utilisez un e-mail brut, non haché, passez-le dans le champ `email`
        email: _satellite.getVar('email'),
        // Si vous utilisez un e-mail 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, non hachée de l'utilisateur à Rokt, réglez-la sur email. Si vous envoyez l'adresse e-mail hachée, réglez-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.
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 pour chaque page à travers le tunnel 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 se charge. 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 de mettre en œuvre cette règle pour 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": "Nom du produit exemple",
            // Ajoutez tout autre attribut spécifique à la page en tant que 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é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 si votre site est une application multi-page (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 de correspondance pour identifier la page où la balise 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 de 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 de correspondance pour identifier la page où la balise 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 de cart, payment ou confirmation.

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() {
        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 exemple 300.5
            "currency": _satellite.getVar('currency'), // Devise de la transaction, par exemple USD
        }
    );
  }
);
</script>

5. Définissez chaque attribut que vous souhaitez transmettre à 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 le snippet 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 garantir que les règles des événements suivants sont déclenchées correctement, 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 d'événement que vous avez défini.
4. Ajoutez les 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 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 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 nouvelles implémentations ou les réorganisations. 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 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 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.
2. Nommez votre variable et choisissez Core comme extension.
   • Utilisez la méthode de stockage de vos valeurs par votre développeur pour le 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 persisté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.

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

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