Ajout d’Adobe Target

Dans cette leçon, nous allons mettre en œuvre l’extension Adobe Target avec une requête de chargement de page et des paramètres personnalisés.

Adobe Target est la solution d’Adobe Experience Cloud qui fournit tout ce dont vous avez besoin pour personnaliser l’expérience de vos clients afin de maximiser les recettes de vos sites web et mobiles, de vos applications, de vos médias sociaux et d’autres canaux numériques.

Objectifs d’apprentissage

À la fin de cette leçon, vous saurez comment :

• Ajoutez le fragment de code de masquage préalable utilisé pour gérer le scintillement lors de l’utilisation de Target avec des codes intégrés de balises asynchrones.
• ajouter l’extension Target v2 ;
• déclencher la requête de chargement de page (anciennement appelée « mbox générale » ou « mbox globale ») ;
• ajouter des paramètres à la requête de chargement de page ;
• expliquer comment ajouter des paramètres de profil et d’entité à la requête de chargement de page ;
• déclencher la requête de confirmation de commande avec les paramètres requis ;
• expliquer comment ajouter des configurations avancées telles que le code d’en-tête de bibliothèque et de pied de page de bibliothèque ;
• valider une mise en œuvre de Target.

Conditions préalables

Pour terminer les leçons de cette section, vous devez d’abord suivre celles de la rubrique Configuration des balises et Ajout d’Identity Service.

Ajout du fragment de code de masquage préalable Target

Avant de commencer, nous devons effectuer une légère mise à jour des codes incorporés de balise. Lorsque les codes incorporés de balise sont chargés de manière asynchrone, la page peut terminer le rendu avant que la bibliothèque Target ne soit complètement chargée et que son contenu ait été permuté. Cela peut donner lieu à ce que l’on qualifie de « scintillement », où le contenu par défaut s’affiche brièvement avant d’être remplacé par le contenu personnalisé spécifié par Target. Si vous souhaitez éviter ce scintillement, nous vous recommandons vivement de coder en dur un fragment de code de masquage préalable spécial immédiatement avant les codes incorporés asynchrones des balises.

Cela a déjà été fait sur le site Luma, mais nous pouvons le faire sur la page d’exemple pour que vous compreniez cette manipulation. Copiez les lignes de code suivantes :

<script>
   //prehiding snippet for Adobe Target with asynchronous tags deployment
   ;(function(win, doc, style, timeout) {
   var STYLE_ID = 'at-body-style';
   function getParent() {
      return doc.getElementsByTagName('head')[0];
   }
   function addStyle(parent, id, def) {
      if (!parent) {
      return;
      }
      var style = doc.createElement('style');
      style.id = id;
      style.innerHTML = def;
      parent.appendChild(style);
   }
   function removeStyle(parent, id) {
      if (!parent) {
      return;
      }
      var style = doc.getElementById(id);
      if (!style) {
      return;
      }
      parent.removeChild(style);
   }
   addStyle(getParent(), STYLE_ID, style);
   setTimeout(function() {
      removeStyle(getParent(), STYLE_ID);
   }, timeout);
   }(window, document, "body {opacity: 0 !important}", 3000));
</script>

Ouvrez l’exemple de page et collez-le juste avant votre code incorporé de balise comme illustré ci-dessous (ne vous inquiétez pas si les numéros de ligne sont différents). Dans cette capture d’écran, le fragment de code de masquage préalable a été minimisé :

Rechargez votre page d’exemple. Vous remarquerez que la page sera masquée pendant trois secondes avant de s’afficher. Ce comportement est temporaire et disparaîtra une fois Target déployé. Ce comportement de masquage préalable est contrôlé par deux configurations à la fin du fragment de code, qui peuvent être personnalisées, mais qu’il convient généralement de conserver avec les paramètres par défaut :

• body {opacity: 0 !important} spécifie la définition CSS à utiliser pour le masquage préalable jusqu’au chargement de Target. Par défaut, la totalité du corps sera masquée. Si vous disposez d’une structure DOM cohérente avec un élément de conteneur facilement identifiable encapsulant tout le contenu sous votre navigation, par exemple, et que vous ne souhaitez jamais tester ou personnaliser votre navigation, vous pouvez utiliser ce paramètre pour limiter le masquage préalable à cet élément de conteneur.
• 3000 spécifie le délai d’expiration pour le masquage préalable. Par défaut, si Target ne s’est pas chargé en trois secondes, la page s’affiche. Cette situation devrait être extrêmement rare.

Pour plus d’informations et pour obtenir le fragment de code de masquage préalable complet, voir Extension Adobe Target avec un déploiement asynchrone.

Ajout de l’extension Target

L’extension Adobe Target prend en charge les mises en œuvre côté client à l’aide du SDK JavaScript de Target pour le Web moderne, at.js. Clients utilisant toujours l’ancienne bibliothèque de Target, mbox.js, doit effectuer la mise à niveau vers at.js 2.x pour utiliser des balises.

L’extension Target v2 se compose de deux parties principales :

1. La configuration de l’extension, qui gère les paramètres de bibliothèque principaux
2. Les actions de règle, qui effectuent les opérations suivantes :
   1. Charger Target (at.js 2.x)
   2. Ajouter des paramètres aux requêtes de chargement de page
   3. Ajouter des paramètres à toutes les requêtes
   4. Déclencher la requête de chargement de page

Dans ce premier exercice, nous allons ajouter l’extension et examiner les configurations. Dans les exercices ultérieurs, nous utiliserons les actions.

Ajout de l’extension

1. Accédez à Extensions > Catalogue.

2. Saisissez target dans le filtre pour localiser rapidement les extensions Adobe Target. Il existe deux extensions : Adobe Target et Adobe Target v2. Ce tutoriel utilisera la version v2 de l’extension, qui utilise la dernière version d’at.js (actuellement 2.x), idéale pour les sites web traditionnels et les applications d’une seule page (SPA).

3. Cliquez sur Installer.

   

4. Comme illustré ci-dessous, lorsque vous ajoutez l’extension, elle importe de nombreux paramètres at.js de l’interface de Target,. Un paramètre qui n’est pas importé est Délai d’expiration, qui est toujours de 3 000 ms après l’ajout de l’extension. Pour le tutoriel, conservez les paramètres par défaut. Notez que la version d’at.js fournie avec la version actuelle de l’extension est indiquée sur le côté gauche.

5. Cliquez sur Enregistrer dans la bibliothèque.

   

À ce stade, Target ne fait encore rien, il n’y a donc rien à valider.

Chargement de Target et déclenchement d’une requête de chargement de page

Les spécialistes du marketing utilisent Target pour contrôler l’expérience du visiteur sur la page lors du test et du ciblage du contenu. En raison de ce rôle important dans l’affichage de la page, Target doit être chargé le plus tôt possible afin de minimiser l’impact sur la visibilité de la page. Dans cette section, nous allons charger la bibliothèque JavaScript Target (at.js) et déclencher la requête de chargement de page (appelée « mbox générale » ou « mbox globale » dans les versions antérieures d’at.js).

Vous pouvez utiliser la règle All Pages - Library Loaded que vous avez créée dans la leçon « Ajouter des éléments de données, des règles et des bibliothèques » pour mettre en œuvre Target, car il est déjà déclenché le plus tôt possible au chargement de la page.

Chargement de Target

1. Accédez au Règles dans le volet de navigation de gauche, puis cliquez sur All Pages - Library Loaded pour ouvrir l’éditeur de règles

   

2. Sous Actions, cliquez sur l’icône pour ajouter une nouvelle action.

   

3. Sélectionnez Extension > Adobe Target v2.

4. Sélectionnez Target Charger > d’action Type.

5. Cliquez sur Conserver les modifications

   

Target ChargerLoad Target ajoutée, at.js se charge sur la page. Toutefois, aucune requête Target ne se déclenche tant que nous n’avons pas ajouté l’action Fire Page Load Request.

Déclenchement de la requête de chargement de page

1. Sous Actions, cliquez sur l’icône pour ajouter à nouveau une autre action.

   

2. Sélectionnez Extension > Adobe Target v2.

3. Sélectionnez page de chargement de requête la de Déclenchement > d’action Type.

4. Il existe certaines configurations disponibles pour la requête de chargement de page associées au fait de masquer ou non la page et le sélecteur CSS à utiliser pour le masquage préalable. Ces paramètres fonctionnent conjointement avec le fragment de code de masquage préalable codé en dur sur la page. Conservez les paramètres par défaut.

5. Cliquez sur Conserver les modifications

   

6. La nouvelle action est ajoutée dans l’ordre après Load Targetet les actions s’exécuteront dans cet ordre. Vous pouvez glisser et déposer les actions pour réorganiser l’ordre, mais dans cette situation, Load Target doit être placé avant Fire Page Load Request.

7. Cliquez sur Enregistrer dans la bibliothèque et créer.

   

Validation de la requête de chargement de page

Maintenant que vous avez ajouté l’extension Target v2 et déclenché la variable Load Target et Fire Page Load Request , une requête de chargement de page doit être effectuée sur toutes les pages où votre propriété de balise est utilisée.

Validation des actions Charger Target et Déclenchement de la requête de chargement de page

1. Rechargez votre page d’exemple. Vous ne devriez plus voir de délai de trois secondes avant que la page ne soit visible. Si vous chargez la page d’exemple à l’aide du protocole file://, vous devez effectuer cette étape dans un navigateur Firefox ou Safari, car Chrome ne déclenche pas de requête Target lors de l’utilisation du protocole file://.

2. Ouvrez le site Luma.

3. Assurez-vous que le débogueur mappe la propriété de balise à your Environnement de développement, comme décrit dans la section leçon précédente

   

4. Accédez à l’onglet Résumé du débogueur.

5. Dans la section Launch, vérifiez que Target s’affiche sous le titre Extensions.

6. Dans la section Target, vérifiez que la version de la bibliothèque at.js s’affiche.

   

7. Enfin, accédez à l’onglet Target, développez votre code client et vérifiez que votre requête de chargement de page s’affiche :

   

Félicitations ! Vous avez mis en œuvre Target !

Ajout de paramètres

Le transfert de paramètres dans la requête Target ajoute de grandes possibilités à vos activités de ciblage, de test et de personnalisation. L’extension de balise fournit deux actions pour transférer des paramètres :

1. Add Params to Page Load Request , qui ajoute des paramètres aux requêtes de chargement de page (équivalent à la méthode targetPageParams())

2. Add Params to All Requests , qui ajoute des paramètres à toutes les requêtes Target, par exemple la requête de chargement de page plus les requêtes supplémentaires effectuées à partir d’actions de code personnalisé ou codées en dur sur votre site (équivalent à la méthode targetPageParamsAll())

Ces actions peuvent être utilisées avant l’action Load Target et peuvent définir différents paramètres sur différentes pages en fonction des configurations de vos règles. Utilisez la fonction d’agencement des règles que vous avez utilisée lors de la définition des ID de client avec Identity Service pour définir des paramètres supplémentaires sur l’événement Library Loaded avant la règle qui déclenche la requête de chargement de page.

Paramètres de requête (mbox)

Les paramètres servent à transmettre des données personnalisées à Target, enrichissant ainsi vos possibilités de personnalisation. Ils sont parfaits pour les attributs qui changent fréquemment au cours d’une session de navigation, tels que le nom de la page, le modèle, etc., et ne sont pas persistants.

Ajoutons l’élément de données Page Name que nous avons créé plus tôt dans la leçon Ajout d’éléments de données, de règles et de bibliothèques comme paramètre de requête.

Ajout du paramètre de requête

1. Accédez au Règles dans le volet de navigation de gauche, puis cliquez sur All Pages - Library Loaded pour ouvrir l’éditeur de règles.

   

2. Sous Actions, cliquez sur l’icône pour ajouter une nouvelle action.

   

3. Sélectionnez Extension > Adobe Target v2.

4. Sélectionnez page de chargement de requête la à paramètres de Ajout > d’action Type.

5. Saisissez pageName dans le champ Nom.

6. Cliquez sur pour ouvrir le modal des éléments de données.

7. Cliquez sur l’élément de données Page Name.

8. Cliquez sur le bouton Sélectionner.

   

9. Cliquez sur Conserver les modifications

   

10. Cliquez et faites glisser sur le bord gauche l’action Add Params to Page Load Request de façon à ce qu’elle soit avant l’action Fire Page Load Request. Elle peut être avant ou après Load Target.

11. Cliquez sur Enregistrer dans la bibliothèque et créer.

    .

Validation des paramètres de requête

Pour le moment, les paramètres personnalisés transmis avec les requêtes at.js 2.x ne sont pas facilement visibles dans le débogueur. Nous utiliserons donc les outils de développement du navigateur.

Validation du paramètre de requête pageName

1. Rechargez le site Luma, en veillant à ce qu’il soit mappé sur votre propre propriété de balise.
2. Ouvrez les outils de développement de votre navigateur.
3. Cliquez sur l’onglet Réseau.
4. Filtrez les requêtes sur tt.omtrdc (ou sur votre domaine CNAME pour les requêtes Target).
5. Développez la section Headers > Request Payload > execute.pageLoad.parameters pour valider le paramètre pageName et sa valeur.

Paramètres de profil

Comme pour les paramètres de requête, les paramètres de profil sont transmis par le biais de la requête Target. Cependant, les paramètres de profil sont stockés dans la base de données du profil du visiteur Target et sont conservés pendant toute la durée du profil du visiteur. Vous pouvez les définir sur une page de votre site et les utiliser dans des activités Target sur une autre page. Voici un exemple issu d’un site web automobile. Lorsqu’un visiteur accède à la page d’un véhicule, vous pouvez transmettre un paramètre de profil « profile.lastViewed=sportscar » pour enregistrer son intérêt pour ce véhicule particulier. Lorsque le visiteur accède à d’autres pages ne se rapportant pas à un véhicule, vous pouvez cibler le contenu en fonction du dernier véhicule qu’il a consulté. Les paramètres de profil sont idéaux pour les attributs qui changent rarement ou ne sont disponibles que sur certaines pages.

Vous ne transmettrez aucun paramètre de profil dans ce tutoriel, mais le processus est presque identique à celui que vous avez réalisé au moment de transmettre le paramètre pageName. La seule différence est que vous devez attribuer un préfixe profile. aux paramètres de nom du profil. Voici à quoi ressemble un paramètre de profil appelé « userType » dans l’action Add Params to Page Load Request:

Paramètres d’entité

Les paramètres d’entité sont des paramètres spéciaux utilisés dans les Mises en œuvre des recommandations pour trois raisons principales :

1. Comme clé pour déclencher des recommandations de produit. Par exemple, lorsque vous utilisez un algorithme de recommandations comme « Les personnes qui ont consulté le produit X ont également consulté Y », « X » est la « clé » de la recommandation. Il s’agit généralement du SKU (entity.id) ou de la catégorie (entity.categoryId) du produit que le visiteur est en train de consulter.
2. Pour collecter le comportement des visiteurs afin d’alimenter les algorithmes de recommandations, tels que « Produits récemment affichés » ou « Produits les plus consultés ».
3. Pour renseigner le catalogue des recommandations. Ce catalogue contient une base de données de tous les produits ou articles de votre site web, afin qu’ils puissent être diffusés dans l’offre de recommandations. Par exemple, lorsque vous recommandez des produits, vous souhaitez généralement afficher des attributs tels que le nom (entity.name) et l’image (entity.thumbnailUrl) du produit. Certains clients remplissent leur catalogue à l’aide de flux d’arrière-plan, mais ils peuvent également le faire à l’aide de paramètres d’entité dans des requêtes Target.

Vous n’avez pas besoin de transmettre des paramètres d’entité dans ce tutoriel, mais le processus est identique à ce que vous avez fait précédemment lors de la transmission de la variable pageName paramètre de requête : attribuez simplement au paramètre un nom précédé du préfixe "entity." et de le mapper sur l’élément de données approprié. Notez que certaines entités courantes ont des noms réservés qui doivent être utilisés (par exemple, entity.id pour le SKU du produit). Voici à quoi pourrait ressembler la définition des paramètres d’entité dans l’action Add Params to Page Load Request :

Ajout de paramètres d’ID de client

La collecte des ID de client avec Adobe Experience Platform Identity Service facilite l’importation de données depuis un CRM dans Target à l’aide de la fonctionnalité Attributs du client d’Adobe Experience Cloud. Elle favorise également la connexité des visiteurs d’un appareil à l’autre, ce qui vous permet de maintenir une expérience utilisateur cohérente lorsque vos clients passent d’un ordinateur portable à leur appareil mobile.

Il est absolument nécessaire de définir l’ID de client dans l’action Set Customer IDs d’Identity Service avant de déclencher la demande de chargement de page. Pour ce faire, assurez-vous de disposer des fonctionnalités suivantes sur votre site :

• L’ID de client doit être disponible sur la page avant le code incorporé des balises.
• L’extension Adobe Experience Platform Identity Service doit être installée.
• Vous devez utiliser l’action Set Customer IDs dans une règle qui se déclenche à l’événement « (page la de Haut chargée Bibliothèque) ».
• Utilisez l’action Fire Page Load Request dans une règle qui se déclenche après l’action « client de ID des Définition ».

Dans la leçon précédente, Ajout d’Adobe Experience Platform Identity Service, vous avez créé la règle All Pages - Library Loaded - Authenticated - 10 pour déclencher l’action «c lient de ID des Définition ». Comme cette règle a un paramètre Order de 10, les ID de client sont définis avant que notre demande de chargement de page ne se déclenche à partir de la règle All Pages - Library Loaded avec son paramètre Order de 50. Vous avez donc déjà mis en œuvre la collecte des ID de client pour Target !

Validation de l’ID de client

Pour le moment, les paramètres personnalisés transmis avec les requêtes at.js 2.x ne sont pas facilement visibles dans le débogueur. Nous utiliserons donc les outils de développement du navigateur.

Validation de l’ID de client

1. Ouvrez le site Luma.

2. Assurez-vous que le débogueur mappe la propriété de balise à your Environnement de développement, comme décrit dans la section leçon précédente

   

3. Connectez-vous au site Luma à l’aide des informations d’identification suivantes : test@adobe.com/test

4. Revenez à la page d’accueil de Luma.

5. Ouvrez les outils de développement de votre navigateur.

6. Cliquez sur l’onglet Réseau.

7. Filtrez les requêtes sur tt.omtrdc (ou sur votre domaine CNAME pour les requêtes Target).

8. Développez la section Headers > Request Payload > id.customerIds.0 pour valider les paramètres d’ID de client et leur valeur :

Ajout du paramètre de jeton de propriété

Le jeton de propriété est un paramètre réservé utilisé avec la fonctionnalité Target Premium Autorisations des utilisateurs Enterprise. Il sert à définir différentes propriétés numériques afin que différents membres d’une organisation Experience Cloud puissent se voir attribuer différentes autorisations pour chaque propriété. Par exemple, vous souhaitez peut-être qu’un groupe d’utilisateurs puisse configurer des activités Target sur votre site web, mais pas sur votre application mobile.

Les propriétés de Target sont similaires aux propriétés de balise et aux suites de rapports Analytics. Une entreprise qui possède plusieurs marques, sites web et équipes marketing peut utiliser une propriété Target, une propriété de balise et une suite de rapports Analytics différentes pour chaque site web ou application mobile. Les propriétés des balises se différencient par leur code incorporé, les suites de rapports Analytics par leur identifiant de suite de rapports et les propriétés Target par leur paramètre de jeton de propriété.

Le jeton de propriété doit être implémenté à l’aide d’une action de code personnalisé dans les balises avec la propriété targetPageParams() fonction . Si vous implémentez plusieurs sites avec des valeurs at_property différentes avec une seule propriété de balise, vous pouvez gérer la valeur at_property par le biais d’un élément de données.

Voici un exercice facultatif, si vous êtes un client Target Premium et si vous souhaitez mettre en œuvre un jeton de propriété dans votre propriété de tutoriel :

1. Dans un onglet distinct, ouvrez l’interface utilisateur de Target.

2. Accédez à Administration > Propriétés

3. Identifiez la propriété à utiliser, puis cliquez sur le bouton </> (ou créer une propriété)

4. Copiez le fragment de code dans le <script></script> dans le presse-papiers ;

   

5. Dans l’onglet de vos balises, accédez à la Règles dans le volet de navigation de gauche, puis cliquez sur All Pages - Library Loaded pour ouvrir l’éditeur de règles.

   

6. Sous Actions, cliquez sur l’action Core - Custom Code pour ouvrir Action Configuration.

   

7. Ouvrez l’éditeur de code et collez le code de l’interface de Target contenant le targetPageParams() function

8. Cliquez sur le bouton Enregistrer button

   

9. Vérifiez les Exécuter globalement box so targetPageParams() est déclaré dans la portée globale

10. Cliquez sur Conserver les modifications

    

11. Cliquez sur Enregistrer dans la bibliothèque et créer.

    

Validation du jeton de propriété

Pour le moment, les paramètres personnalisés transmis avec les requêtes at.js 2.x ne sont pas facilement visibles dans le débogueur. Nous utiliserons donc les outils de développement du navigateur.

Validation du paramètre de jeton de propriété

1. Ouvrez le site Luma.

2. Assurez-vous que le débogueur mappe la propriété de balise à your Environnement de développement, comme décrit dans la section leçon précédente

   

3. Ouvrez les outils de développement de votre navigateur.

4. Cliquez sur l’onglet Réseau.

5. Filtrez les requêtes sur tt.omtrdc (ou sur votre domaine CNAME pour les requêtes Target).

6. Développez la section Headers > Request Payload > property.token pour valider la valeur.
   

Ajout de requêtes personnalisées

Ajout d’une requête de confirmation de commande

La requête de confirmation de commande est un type spécial de requête utilisé pour envoyer les détails de la commande à Target. L’inclusion de trois paramètres de requête spécifiques orderId, orderTotal et productPurchasedId transforme une requête Target ordinaire en une requête de commande. Outre la création de rapports de chiffre d’affaires, la requête de commande effectue également les opérations suivantes :

1. Elle déduplique les renvois de commande accidentels.
2. Elle filtre les commandes extrêmes (toute commande dont le total était supérieur à trois écarts types par rapport à la moyenne).
3. Elle utilise un algorithme différent en arrière-plan pour calculer la fiabilité statistique.
4. Elle crée un rapport d’audit spécial et téléchargeable des détails de commande individuels.

La bonne pratique consiste à utiliser une requête de confirmation de commande dans tous les entonnoirs de commande, même sur des sites non liés à la vente au détail. Par exemple, les sites de génération de piste comportent généralement des entonnoirs de piste avec un « ID de piste » unique généré à la fin. Ces sites doivent mettre en œuvre une requête de commande à l’aide d’une valeur statique (telle que « 1 ») pour orderTotal.

Les clients qui utilisent l’intégration Analytics for Target (A4T) pour la plupart de leurs rapports peuvent également souhaiter mettre en oeuvre la demande de commande si vous utilisez des activités Automated Personalization, qui ne prennent pas en charge A4T. De plus, la requête de commande est un élément essentiel des mises en œuvre des recommandations, qui optimise les algorithmes en fonction du comportement d’achat. Pour obtenir les informations les plus récentes sur la prise en charge d’A4T, voir la documentation.

La requête de confirmation de commande doit se déclencher à partir d’une règle qui n’est déclenchée que sur la page de confirmation de votre commande ou de votre événement. Il est souvent possible de la combiner avec une règle définissant l’événement d’achat Adobe Analytics. Elle doit être configurée à l’aide de l’action Code personnalisé de l’extension Core, à l’aide des éléments de données appropriés pour définir les paramètres orderId, orderTotal et productPurchasedId.

Ajoutons les éléments de données et la règle dont nous avons besoin pour déclencher une requête de confirmation de commande sur le site Luma. Comme vous avez déjà créé plusieurs éléments de données, ces instructions sont abrégées.

Création de l’élément de données pour l’ID de commande

1. Cliquez sur Éléments de données dans le volet de navigation de gauche
2. Cliquez sur Ajouter un élément de données.
3. Nommez l’élément de données Order Id.
4. Sélectionnez Type d’élément de données > Variable JavaScript.
5. Utilisez digitalData.cart.orderId comme JavaScript variable name.
6. Cochez l’option Clean text.
7. Cliquez sur Enregistrer dans la bibliothèque.
   (Nous ne créerons pas la bibliothèque tant que nous n’aurons pas apporté toutes les modifications à la requête de confirmation de commande.)

Création de l’élément de données pour le montant du panier

1. Cliquez sur Ajouter un élément de données.
2. Nommez l’élément de données Cart Amount.
3. Sélectionnez Type d’élément de données > Variable JavaScript.
4. Utilisez digitalData.cart.cartAmount comme JavaScript variable name.
5. Cochez l’option Clean text.
6. Cliquez sur Enregistrer dans la bibliothèque.

Création d’un élément de données pour les SKU du panier (Target)

1. Cliquez sur Ajouter un élément de données.

2. Nommez l’élément de données Cart SKUs (Target).

3. Sélectionnez Type d’élément de données > Code personnalisé.

4. Pour Target, les SKU doivent être représentés par une liste séparée par des virgules. Ce code personnalisé formate à nouveau le tableau de couche de données dans le format approprié. Dans l’éditeur de code personnalisé, collez les éléments suivants :

   var targetProdSkus="";
   for (var i=0; i<digitalData.cart.cartEntries.length; i++) {
     if(i>0) {
       targetProdSkus = targetProdSkus + ",";
     }
     targetProdSkus = targetProdSkus + digitalData.cart.cartEntries[i].sku;
   }
   return targetProdSkus;
   

5. Cochez l’option Force lowercase value.

6. Cochez l’option Clean text.

7. Cliquez sur Enregistrer dans la bibliothèque.

Nous devons maintenant créer une règle pour déclencher la requête de confirmation de commande avec ces éléments de données comme paramètres sur la page de confirmation de commande.

Création de la règle pour la page de confirmation de commande

1. Cliquez sur Règles dans le volet de navigation de gauche
2. Cliquez sur Ajouter une règle.
3. Donnez à la règle le nom Order Confirmation Page - Library Loaded - 60.
4. Cliquez sur Événements > Ajouter.
   1. Sélectionnez Type d’événement > Bibliothèque chargée (Haut de page).
   2. Sous Options avancées, modifiez la variable Order to 60 afin qu’il se déclenche après l’événement Load Target action (qui se trouve dans notre All Pages - Library Loaded où Order est défini sur 50)
   3. Cliquez sur Conserver les modifications
5. Cliquez sur Conditions > Ajouter.

   1. Sélectionnez Type de condition > Chemin sans chaîne de requête.

   2. Pour le champ Path equals, saisissez thank-you.html.

   3. Activez l’option Regex pour modifier la logique de equals à contains. Vous pouvez utiliser la fonction Test pour confirmer que le test réussira avec l’URL https://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html.

      

   4. Cliquez sur Conserver les modifications

6. Cliquez sur Actions > Ajouter.

   1. Sélectionnez Type d’action > Code personnalisé.

   2. Cliquez sur Ouvrir l’éditeur.

   3. Collez le code suivant dans le modal Edit Code.

      adobe.target.getOffer({
        "mbox": "orderConfirmPage",
        "params":{
           "orderId": _satellite.getVar('Order Id'),
           "orderTotal": _satellite.getVar('Cart Amount'),
          "productPurchasedId": _satellite.getVar('Cart SKUs (Target)')
        },
        "success": function(offer) {
          adobe.target.applyOffer({
            "mbox": "orderConfirmPage",
            "offer": offer
          });
        },
        "error": function(status, error) {
          console.log('Error', status, error);
        }
      });
      

   4. Cliquez sur Enregistrer pour enregistrer le code personnalisé.

   5. Cliquez sur Conserver les modifications pour conserver l’action.

7. Cliquez sur Enregistrer dans la bibliothèque et créer.

Validation de la requête de confirmation de commande

Pour le moment, les paramètres personnalisés transmis avec les requêtes at.js 2.x ne sont pas facilement visibles dans le débogueur. Nous utiliserons donc les outils de développement du navigateur.

1. Ouvrez le site Luma.

2. Assurez-vous que le débogueur mappe la propriété de balise à your Environnement de développement, comme décrit dans la section leçon précédente

   

3. Parcourez le site et ajoutez plusieurs produits à votre panier.

4. Passez à la caisse.

5. Au cours du processus de paiement, les seuls champs obligatoires sont First Name et Last Name.

   

6. Sur la page de vérification de la commande, veillez à cliquer sur le bouton Place Order.

7. Ouvrez les outils de développement de votre navigateur.

8. Cliquez sur l’onglet Réseau.

9. Filtrez les requêtes sur tt.omtrdc (ou sur votre domaine CNAME pour les requêtes Target).

10. Cliquez sur la seconde requête.

11. Développez la section Headers > Request Payload > execute.mboxes.0 pour valider le nom de la requête et les paramètres de commande :

Requêtes personnalisées

Il existe de rares cas où vous devez effectuer des requêtes Target autres que la requête de chargement de page et de confirmation de commande. Par exemple, les données importantes que vous souhaitez utiliser pour la personnalisation ne sont pas définies sur la page avant les codes incorporés de balise. Elles peuvent être codées en dur au bas de la page ou être renvoyées à partir d’une requête API asynchrone. Ces données peuvent être envoyées à Target à l’aide d’une requête supplémentaire, bien qu’il ne soit pas recommandé d’utiliser cette requête pour la diffusion de contenu puisque la page sera déjà visible. Ces données peuvent être utilisées pour enrichir le profil du visiteur en vue d’une utilisation ultérieure (à l’aide des paramètres de profil) ou pour compléter le catalogue Recommendations.

Dans ces circonstances, utilisez l’action Code personnalisé dans l’extension Core pour déclencher une requête à l’aide des méthodes
getOffer()/applyOffer() et trackEvent(). Cette manipulation est similaire à ce que vous avez effectué dans l’exercice Requête de confirmation de commande, mais vous utilisez un autre nom de requête et non des paramètres de commande spéciaux. Veillez à utiliser l’action Charger Target avant d’adresser des requêtes Target à partir du code personnalisé.

En-tête et pied de page de bibliothèque

L’écran Modifier at.js de l’interface utilisateur de Target contient des emplacements dans lesquels vous pouvez coller le code JavaScript personnalisé qui s’exécute immédiatement avant ou après le fichier at.js. L’en-tête de bibliothèque est parfois utilisé pour remplacer les paramètres at.js par le biais de la fonction targetGlobalSettings() ou pour transmettre des données provenant de tiers en utilisant la fonction Fournisseurs de données. Le pied de page de la bibliothèque est parfois utilisé pour ajouter des détecteurs d’événements personnalisés at.js.

Pour répliquer cette fonctionnalité dans des balises, utilisez simplement l’action Custom Code (Code personnalisé) dans l’extension Core et séquencez l’action avant (En-tête de bibliothèque) ou après (Pied de page de bibliothèque) l’action Load Target (Charger Target). Cette action peut être effectuée dans la même règle que l’action Load Target, comme illustré ci-dessous, ou dans des règles distinctes avec des événements ou des paramètres de commande qui se déclenchent de manière fiable avant ou après la règle contenant Load Target :

Pour en savoir plus sur les cas d’utilisation pour les en-têtes et pieds de page personnalisés, consultez les ressources suivantes :

• Utilisation de dataProviders pour intégrer des données tierces dans Adobe Target
• Implémentation de dataProviders pour intégrer des données tierces dans Adobe Target
• Utilisation de jetons de réponse et d’événements personnalisés at.js avec Adobe Target

Suite : « Ajout d’Adobe Analytics » >

Ressources Business.Adobe.com