Configuration d’Adobe Target avec le SDK Web de Platform

Découvrez comment implémenter Adobe Target à l’aide du SDK web d’Adobe Experience Platform. Découvrez comment diffuser des expériences et comment transmettre des paramètres supplémentaires à Target.

Adobe Target est l’application 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 et d’autres canaux numériques.

Diagramme SDK Web et Adobe Target

Objectifs d'apprentissage

À la fin de cette leçon, vous pouvez effectuer les opérations suivantes avec une mise en oeuvre SDK Web de Target :

  • Ajouter le fragment de code de masquage préalable pour empêcher le scintillement
  • Configuration d’un flux de données pour activer la fonctionnalité Target
  • Rendu des activités du compositeur d’expérience visuelle
  • Activités de rendu de compositeur de formulaire
  • Transmission de données XDM à Target et compréhension du mappage aux paramètres Target
  • Transmission de données personnalisées à Target, telles que des paramètres de profil et d’entité
  • valider une mise en œuvre de Target.
  • Séparation des requêtes de personnalisation des requêtes d’analyse
TIP
Consultez notre tutoriel Migration de Target d’at.js 2.x vers le SDK Web Platform pour obtenir un guide détaillé sur la migration de votre implémentation at.js existante.

Conditions préalables

Pour terminer les leçons de cette section, vous devez d’abord :

Ajout de la gestion des scintillements

Avant de commencer, déterminez si une solution de gestion du scintillement supplémentaire est nécessaire en fonction de la manière dont la bibliothèque de balises est chargée.

NOTE
Ce tutoriel utilise le site web Luma, qui dispose d’une mise en oeuvre asynchrone des balises et d’une atténuation du scintillement en place. Cette section sert de référence pour comprendre comment la limitation du scintillement fonctionne avec le SDK Web Platform.

Mise en oeuvre asynchrone

Lorsqu’une bibliothèque de balises se charge de manière asynchrone, le rendu de la page peut se terminer avant que Target ne remplace le contenu par défaut par du contenu personnalisé. Ce comportement peut entraîner un "scintillement", où le contenu par défaut s’affiche brièvement avant d’être remplacé par le contenu personnalisé. Si vous souhaitez éviter ce scintillement, Adobe recommande d’ajouter un fragment de code de masquage préalable spécial juste avant le code incorporé de balise asynchrone.

Ce fragment est déjà présent sur le site Luma, mais regardons de plus près pour comprendre ce que fait ce code :

<script>
  !function(e,a,n,t){var i=e.head;if(i){
  if (a) return;
  var o=e.createElement("style");
  o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
  (document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, ".personalization-container { opacity: 0 !important }", 3000);
</script>

Le fragment de code de masquage préalable crée une balise de style dans l’en-tête de la page avec la définition CSS de votre choix. Cette balise de style est supprimée lorsqu’une réponse de Target est reçue ou que le délai d’expiration est atteint.

Le comportement de masquage préalable est contrôlé par deux configurations à la fin du fragment de code.

  • 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 page entière est masquée. Vous pouvez mettre à jour cette définition avec les sélecteurs que vous souhaitez pré-masquer, ainsi que la manière dont vous souhaitez les masquer. Vous pouvez inclure plusieurs définitions, car cette valeur est simplement insérée dans la balise de style de masquage préalable. Si vous disposez d’un élément de conteneur facilement identifiable encapsulant le contenu sous 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 en millisecondes du masquage préalable. Si aucune réponse de Target n’est reçue avant le délai d’expiration, la balise de style de masquage préalable est supprimée. Il devrait être rare d’atteindre ce délai.
NOTE
Le fragment de code de prémasquage du SDK Web Platform est légèrement différent de celui utilisé avec la bibliothèque at.js de Target. Veillez à utiliser le fragment de code correct pour le SDK Web Platform, car il utilise un autre ID de style alloy-prehiding. Si le fragment de code de prémasquage d’at.js est utilisé, il se peut qu’il ne fonctionne pas correctement.

Le fragment de code de masquage préalable est également disponible dans les balises :

  1. Accédez à la section Extensions des balises.

  2. Sélectionnez Configurer pour l’extension SDK Web Adobe Experience Platform

  3. Sélectionnez le bouton Copier le fragment de code de pré-masquage dans le Presse-papiers .

    Fragment de code de prémasquage de Target pour les implémentations asynchrones

    note note
    NOTE
    Le fragment de code de prémasquage par défaut copié à partir de l’extension SDK Web Platform peut inclure une définition CSS qui n’existe pas sur votre site, telle que .personalization-container { opacity: 0 !important }. Veillez à vérifier et à modifier le fragment de code de pré-masquage approprié pour votre site.

Mise en oeuvre synchrone

Adobe recommande de mettre en oeuvre les balises de manière asynchrone, comme illustré sur le site Luma. Cependant, si la bibliothèque de balises est chargée de manière synchrone, le fragment de code de masquage préalable n’est pas obligatoire. Au lieu de cela, le style de pré-masquage est spécifié dans les paramètres de l’extension du SDK Web Platform.

Le style de prémasquage pour les implémentations synchrones peut être configuré comme suit :

  1. Accédez à la section Extensions des balises.

  2. Sélectionnez le bouton Configurer pour l’extension SDK Web Platform.

  3. Sélectionnez le bouton Editer le style de pré-masquage

    Fragment de code de prémasquage de Target pour les implémentations asynchrones

  4. Modifiez la page CSS pour inclure les sélecteurs et les méthodes de masquage que vous souhaitez utiliser, par exemple : body { opacity: 0 !important } si vous souhaitez pré-masquer tout le corps de la page.

  5. Enregistrer vos modifications et créer une bibliothèque

NOTE
Le paramètre de style de prémasquage est destiné uniquement à être utilisé pour les implémentations synchrones. Ce style doit être vide ou commenté si vous utilisez une mise en oeuvre asynchrone des balises.

Pour en savoir plus sur la façon dont le SDK Web Platform peut gérer le scintillement, consultez la section du guide : gestion du scintillement pour les expériences personnalisées.

Configuration du flux de données

Target doit être activé dans la configuration du flux de données pour que les activités Target puissent être diffusées par le SDK Web Platform.

Pour configurer Target dans le flux de données :

  1. Accédez à l’interface Collecte de données

  2. Dans le volet de navigation de gauche, sélectionnez Datastreams

  3. Sélectionnez le flux de données Luma Web SDK: Development Environment créé précédemment.

    Sélectionnez la banque de données du SDK Web Luma

  4. Sélectionnez Ajouter un service
    Ajouter un service à la banque de données

  5. Sélectionnez Adobe Target comme Service

  6. Si vous le souhaitez, renseignez les détails facultatifs de votre mise en oeuvre Target, en suivant les instructions ci-dessous.

  7. Sélectionnez Save

    Configuration de la banque de données Target

Jeton de propriété

Les clients Target Premium ont la possibilité de gérer les autorisations d’utilisateur avec des propriétés. Les propriétés de Target vous permettent de définir des limites autour de l’emplacement où les utilisateurs peuvent exécuter des activités Target. Pour plus d’informations, reportez-vous à la section Autorisations d’entreprise de la documentation de Target.

Pour configurer ou rechercher des jetons de propriété, accédez à Adobe Target > Administration > Propriétés. L’icône </> affiche le code de mise en oeuvre. La valeur at_property est le jeton de propriété que vous utiliseriez dans votre flux de données.

Jeton de propriété cible

Un seul jeton de propriété peut être spécifié par flux de données, mais les remplacements de jetons de propriété vous permettent de spécifier d’autres jetons de propriété pour remplacer le jeton de propriété principal défini dans le flux de données. Une mise à jour de l’action sendEvent est également nécessaire pour remplacer le flux de données.

Liste des identités

Identifiant de l’environnement Target

Les environnements de Target vous aident à gérer votre mise en oeuvre à toutes les étapes du développement. Ce paramètre facultatif spécifie l’environnement Target que vous allez utiliser avec chaque flux de données.

Adobe recommande de définir différemment l’identifiant de l’environnement cible pour chacun de vos flux de données de développement, d’évaluation et de production afin de garder les choses simples. Vous pouvez également organiser vos environnements dans l’interface de Target à l’aide de la fonction hosts .

Pour configurer ou rechercher des ID d’environnement, accédez à Adobe Target > Administration > Environnements.

Environnements cibles

NOTE
Si aucun identifiant d’environnement cible n’est spécifié, l’environnement cible de production est utilisé.

Espace de noms d’ID tiers de Target

Ce paramètre facultatif vous permet de spécifier le symbole d’identité à utiliser pour l’identifiant tiers Target. Target prend uniquement en charge la synchronisation des profils sur un seul symbole d’identité ou espace de noms. Pour plus d’informations, reportez-vous à la section Synchronisation des profils en temps réel pour mbox3rdPartyId du guide Target.

Les symboles d’identité se trouvent dans la liste des identités sous Collecte de données > Client > Identités.

Liste des identités

Pour les besoins de ce tutoriel utilisant le site Luma, utilisez le symbole d’identité lumaCrmId configuré lors de la leçon sur les identités.

Rendu des décisions de personnalisation visuelle

Les décisions de personnalisation visuelle se rapportent aux expériences créées dans le compositeur d’expérience visuelle Adobe Target. Tout d’abord, vous devez comprendre la terminologie utilisée dans les interfaces de Target et de balises :

  • Activité : ensemble d’expériences ciblées sur une ou plusieurs audiences. Par exemple, un simple test A/B peut être une activité avec deux expériences.
  • Expérience : ensemble d’actions ciblées sur un ou plusieurs emplacements ou portées de décision.
  • Étendue de décision : emplacement où une expérience Target est diffusée. Les portées de décision sont équivalentes à des "mbox" si vous connaissez l’utilisation d’anciennes versions de Target.
  • Décision Personalization : une action que le serveur détermine doit être appliquée. Ces décisions peuvent être basées sur les critères d’audience et la hiérarchisation des activités Target.
  • Proposition : résultat des décisions prises par le serveur, qui sont fournies dans la réponse du SDK Web Platform. Par exemple, la permutation d’une image de bannière est une proposition.

Mettre à jour l'action Send event

Les décisions de personnalisation visuelle issues de Target sont diffusées par le SDK Web de Platform, si Target est activé dans le flux de données. Cependant, ils ne sont pas rendus automatiquement. Vous devez mettre à jour l’action Send event pour activer le rendu automatique.

  1. Dans l’interface Collecte de données, ouvrez la propriété de balise que vous utilisez pour ce tutoriel.

  2. Ouvrez la règle all pages - library loaded - send event - 50

  3. Sélectionnez l’action Adobe Experience Platform Web SDK - Send event

  4. Activez Rendre les décisions de personnalisation visuelle avec la case à cocher.

    Activer les décisions de personnalisation visuelle de rendu

  5. Enregistrez vos modifications, puis créez-les dans votre bibliothèque.

Le paramètre de rendu des décisions de personnalisation visuelle oblige le SDK Web de Platform à appliquer automatiquement toutes les modifications spécifiées à l’aide du compositeur d’expérience visuelle de Target ou de la "mbox globale".

NOTE
En règle générale, le paramètre Render Visual personalization Decisions ne doit être activé que pour une seule action Envoyer l’événement par chargement de page complet. Si ce paramètre est activé pour plusieurs actions Envoyer l’événement , les demandes de rendu suivantes sont ignorées.

Si vous préférez effectuer vous-même le rendu ou agir sur ces décisions à l’aide d’un code personnalisé, vous pouvez laisser le paramètre Render Visual personalization Decisions désactivé. Le SDK Web Platform est flexible et offre cette fonctionnalité pour vous donner un contrôle total. Pour plus d’informations sur le rendu manuel du contenu personnalisé, reportez-vous au guide.

Configuration d’une activité Target avec le compositeur d’expérience visuelle

Maintenant que la partie de mise en oeuvre de base est terminée, créez une activité de ciblage d’expérience (XT) dans Target pour vérifier que tout fonctionne correctement. Si vous avez besoin d’aide, reportez-vous au tutoriel Target pour créer des activités de ciblage d’expérience.

NOTE
Si vous utilisez Google Chrome comme navigateur, l’ extension d’assistance du compositeur d’expérience visuelle (VEC)est nécessaire pour charger le site correctement en vue de le modifier dans le VEC.
  1. Accès à l’interface d’Adobe Target

  2. Créez une activité de ciblage d’expérience (XT) à l’aide de la page d’accueil Luma pour l’URL d’activité.

    Créer une activité XT

  3. Modifiez la page, par exemple, modifiez le texte sur la bannière principale de la page d’accueil. Lorsque vous avez terminé, sélectionnez Enregistrer puis Suivant.

    Modification du VEC de Target

  4. Mettez à jour le nom de l’événement, puis sélectionnez Suivant.

    Événement de mise à jour du VEC de Target

  5. Choisissez Adobe Analytics comme source de création de rapports avec la suite de rapports appropriée et la mesure Commandes comme objectif.

    Source de création de rapports du VEC de Target

    note note
    NOTE
    Si vous n’utilisez pas Adobe Analytics, sélectionnez Target comme source des rapports et choisissez une autre mesure telle que Engagement > Pages vues à la place. Une mesure d’objectif est requise pour enregistrer et prévisualiser l’activité.
  6. Enregistrement de l’activité

  7. Si vos modifications vous conviennent, vous pouvez activer votre activité. Sinon, si vous souhaitez prévisualiser l’expérience sans l’activer, vous pouvez copier l’ URL d’aperçu QA.

  8. Chargez la page d’accueil de Luma et vos modifications devraient être appliquées.

  9. Au bout de quelques heures, vous devriez être en mesure d’afficher les données d’activité et les conversions de Target dans Adobe Analytics. Reportez-vous au Guide de Target pour obtenir des informations détaillées sur la création de rapports Analytics for Target (A4T).

Validation avec Debugger

Si vous configurez une activité, le contenu doit s’afficher sur la page. Cependant, même si aucune activité n’est active, vous pouvez également consulter l’appel réseau Envoyer l’événement pour confirmer que Target est correctement configuré.

CAUTION
Si vous utilisez Google Chrome et que l’ extension d’assistance du compositeur d’expérience visuelle (VEC)est installée, assurez-vous que le paramètre Inject Target Libraries est désactivé. L’activation de ce paramètre entraîne des requêtes Target supplémentaires.
  1. Ouvrez l’extension Adobe Experience Platform Debugger browser

  2. Accédez au site de démonstration Luma et utilisez le débogueur pour changer la propriété de balise sur le site en votre propre propriété de développement.

  3. Recharger la page

  4. Sélectionnez l’outil Network dans le débogueur

  5. Filtrage par SDK Web Experience Platform

  6. Sélectionner la valeur de la ligne d’événements pour le premier appel

    Appel réseau dans le débogueur Adobe Experience Platform

  7. Notez qu’il existe des clés sous query > personalization et decisionScopes dont la valeur est __view__. Cette portée est l’équivalent de target-global-mbox. Cet appel du SDK Web Platform a demandé des décisions à Target.

    requête décisionScope

  8. Fermez la superposition et sélectionnez les détails de l’événement pour le deuxième appel réseau. Cet appel n’est présent que si Target a renvoyé une activité.

  9. Notez que des détails sur l’activité et l’expérience sont renvoyés par Target. Cet appel de SDK Web Platform envoie une notification indiquant qu’une activité Target a été rendue à l’utilisateur et incrémente une impression.

    Impression de l’activité Target

Configuration et rendu d’une portée de décision personnalisée

Les portées de décision personnalisées (anciennement appelées "mbox") peuvent être utilisées pour diffuser du contenu JSON ou d’HTML de manière structurée à l’aide du compositeur d’expérience d’après les formulaires Target. Le contenu diffusé sur l’une de ces portées personnalisées n’est pas rendu automatiquement par le SDK Web Platform. Il peut être rendu à l’aide d’une action dans les balises.

Ajoutez une portée à l'action Envoyer un événement

Modifiez votre règle de chargement de page pour ajouter une portée de décision personnalisée :

  1. Ouvrez la règle all pages - library loaded - send event - 50

  2. Sélectionnez l’action Adobe Experience Platform Web SDK - Send Event

  3. Ajoutez une ou plusieurs portées que vous souhaitez utiliser. Pour cet exemple, utilisez homepage-hero.

    Étendue personnalisée

  4. Enregistrer vos modifications et créer dans votre bibliothèque

TIP
Pour ce tutoriel, vous utiliserez une seule portée définie manuellement à des fins de démonstration. Si vous décidez d’utiliser plusieurs portées de décision destinées à des pages spécifiques, vous devez envisager d’utiliser un élément de données qui renvoie un tableau de portées de manière conditionnelle en fonction du chemin de page. Cette approche vous permet de maintenir votre mise en oeuvre simple et évolutive.

Traitement de la réponse de Target

Maintenant que vous avez configuré le SDK Web de Platform pour demander du contenu pour la portée homepage-hero, vous devez faire quelque chose avec la réponse. L’extension de balise SDK Web Platform fournit un événement Send Event Complete qui peut être utilisé pour déclencher immédiatement une nouvelle règle lors de la réception d’une réponse d’une action Send Event.

  1. Créez une règle appelée homepage - send event complete - render homepage-hero.

  2. Ajoutez un événement à la règle. Utilisez l’extension Adobe Experience Platform Web SDK et le type d’événement Send event complete .

  3. Ajoutez une condition pour restreindre la règle à la page d’accueil de Luma (chemin sans chaîne de requête égale à /content/luma/us/en.html).

  4. Ajoutez une action à la règle. Utilisez l’extension Adobe Experience Platform Web SDK et le type d’action Appliquer les propositions.

    Render homepage hero rule

    note tip
    TIP
    Attribuez à vos événements de règle, conditions et actions des noms explicites au lieu d’utiliser les noms par défaut. Des noms de composants de règle robustes rendent les résultats de recherche beaucoup plus utiles.
  5. Saisissez %event.propositions% dans le champ Propositions car nous utilisons l’événement "Envoyer l’événement terminé" comme déclencheur pour cette règle.

  6. Dans la section "métadonnées de proposition", sélectionnez l’option Utiliser un formulaire

  7. Pour l’entrée de champ Scope homepage-hero

  8. Pour l’entrée de champ Sélecteur div.heroimage

  9. Pour Action Type, sélectionnez Set HTML

  10. Sélectionnez Conserver les modifications

    Render homepage hero action

    Outre le rendu de l’activité, vous devez effectuer un appel supplémentaire vers Target pour indiquer que l’activité d’après les formulaires s’est générée :

  11. Ajoutez une autre action à la règle. Utilisez l’extension Core et le type d’action Custom code :

  12. Collez le code JavaScript suivant :

    code language-javascript
    var propositions = event.propositions;
    var heroProposition;
    if (propositions) {
       // Find the hero proposition, if it exists.
       for (var i = 0; i < propositions.length; i++) {
          var proposition = propositions[i];
          if (proposition.scope === "homepage-hero") {
             heroProposition = proposition;
             break;
          }xw
       }
    }
    // Send a "display" event
    if (heroProposition !== undefined){
       alloy("sendEvent", {
          xdm: {
             eventType: "display",
             _experience: {
                decisioning: {
                   propositions: [{
                      id: heroProposition.id,
                      scope: heroProposition.scope,
                      scopeDetails: heroProposition.scopeDetails
                   }]
                }
             }
          }
       });
    }
    

    Render homepage hero action

  13. Sélectionnez Conserver les modifications

  14. Enregistrer vos modifications et créer dans votre bibliothèque

  15. Chargez la page d’accueil de Luma quelques fois, ce qui devrait suffire à enregistrer la nouvelle portée de décision homepage-hero dans l’interface de Target.

Configuration d’une activité Target avec le compositeur d’expérience d’après les formulaires

Maintenant que vous disposez d’une règle pour effectuer le rendu manuel d’une portée de décision personnalisée, vous pouvez créer une autre activité de ciblage d’expérience (XT) dans Target. Cette fois, utilisez le compositeur d’expérience d’après les formulaires.

  1. Ouvrez Adobe Target

  2. Désactiver l’activité utilisée pour la leçon précédente

  3. Créer une activité de ciblage d’expérience (XT) à l’aide de l’option Compositeur d’expérience d’après les formulaires

    Créer une activité XT

  4. Sélectionnez l’emplacement homepage-hero dans la liste déroulante des emplacements et Créer une offre d’HTML dans la liste déroulante de contenu. Si l’emplacement n’est pas disponible, vous pouvez le saisir. Target renseigne régulièrement de nouveaux noms d’emplacement après avoir reçu des demandes pour cet emplacement ou cette portée.

    Créer une activité XT

  5. Collez le code suivant dans la zone de contenu. Ce code est une bannière principale de base avec une image d’arrière-plan différente :

    code language-html
    <div class="we-HeroImage jumbotron" style="background-image: url('/content/luma/us/en/women/_jcr_content/root/hero_image.coreimg.jpeg');">
       <div class="container cq-dd-image">
          <div class="we-HeroImage-wrapper">
             <p class="h3">New Luma Yoga Collection</p>
             <strong class="we-HeroImage-title h1">Be active with style&nbsp;</strong>
             <p>
                <a class="btn btn-primary btn-action" href="/content/luma/us/en/products.html" role="button">Shop Now</a>
             </p>
          </div>
       </div>
    </div>
    
  6. À l’étape Objectifs et paramètres, sélectionnez Adobe Target comme source de création de rapports et Engagement > Pages vues comme objectif.

  7. Enregistrement de l’activité

  8. Si vos modifications vous conviennent, vous pouvez activer votre activité. Sinon, si vous souhaitez prévisualiser l’expérience sans l’activer, vous pouvez copier l’ URL d’aperçu QA.

  9. Chargez la page d’accueil de Luma et vos modifications devraient être appliquées.

NOTE
L’objectif de conversion "A cliqué sur la mbox" ne fonctionne pas automatiquement. Comme le SDK Web Platform ne rend pas automatiquement les portées personnalisées, il ne suit pas les clics vers les emplacements que vous choisissez d’appliquer au contenu. Vous pouvez créer votre propre suivi des clics pour chaque portée à l’aide de "click" eventType avec les détails _experience applicables à l’aide de l’action sendEvent.

Validation avec Debugger

Si vous avez activé votre activité, le rendu de votre contenu doit s’afficher sur la page. Cependant, même si aucune activité n’est active, vous pouvez également consulter l’appel réseau Envoyer l’événement pour confirmer que Target demande du contenu pour vos portées personnalisées.

  1. Ouvrez l’extension de navigateur du débogueur Adobe Experience Platform

  2. Accédez au site de démonstration Luma et utilisez le débogueur pour changer la propriété de balise sur le site en votre propre propriété de développement.

  3. Recharger la page

  4. Sélectionnez l’outil Network dans le débogueur

  5. Filtrage par SDK Web Adobe Experience Platform

  6. Sélectionner la valeur de la ligne d’événements pour le premier appel

    Appel réseau dans le débogueur Adobe Experience Platform

  7. Notez qu’il existe des clés sous query > personalization et decisionScopes avec une valeur __view__ comme auparavant, mais qu’une portée homepage-hero est désormais incluse. Cet appel du SDK Web Platform a demandé des décisions à Target pour les modifications effectuées à l’aide du VEC et de l’emplacement homepage-hero spécifique.

    requête décisionScope

  8. Fermez la superposition et sélectionnez les détails de l’événement pour le deuxième appel réseau. Cet appel n’est présent que si Target a renvoyé une activité.

  9. Notez que des détails sur l’activité et l’expérience sont renvoyés par Target. Cet appel de SDK Web Platform envoie une notification indiquant qu’une activité Target a été rendue à l’utilisateur et incrémente une impression. Elle a été lancée par l’action de code personnalisé que vous avez ajoutée précédemment.

    Impression de l’activité Target

Envoi de paramètres à Target

Dans cette section, vous allez transmettre des données spécifiques à Target et examiner de plus près la façon dont les données XDM sont mappées aux paramètres Target.

Paramètres de page (mbox) et XDM

Tous les champs XDM sont automatiquement transmis à Target en tant que paramètres de page ou paramètres de mbox.

Certains de ces champs XDM sont mappés à des objets spéciaux dans le serveur principal de Target. Par exemple, web.webPageDetails.URL sera automatiquement disponible pour créer des conditions de ciblage basées sur une URL ou comme objet page.url lors de la création de scripts de profil.

Vous pouvez également ajouter des paramètres de page à l’aide de l’objet de données.

Paramètres spéciaux et objet de données

Certains points de données peuvent s’avérer utiles à Target qui ne sont pas mappés à partir de l’objet XDM. Ces paramètres Target spéciaux incluent :

Ces paramètres doivent être envoyés dans l’objet data au lieu de l’objet xdm. De plus, les paramètres de page (ou mbox) peuvent également être inclus dans l’objet data.

Pour renseigner l’objet de données, créez l’élément de données suivant, en réutilisant les éléments de données créés dans la leçon Créer des éléments de données :

  • data.content à l’aide du code personnalisé suivant :

    code language-javascript
    var data = {
       __adobe: {
          target: {
             "entity.id": _satellite.getVar("product.productInfo.sku"),
             "entity.name": _satellite.getVar("product.productInfo.title"),
             "profile.loggedIn": _satellite.getVar("user.profile.attributes.loggedIn"),
             "user.categoryId": _satellite.getVar("product.category")
          }
       }
    }
    return data;
    

Mettre à jour la règle de chargement de page

La transmission de données supplémentaires pour Target en dehors de l’objet XDM nécessite la mise à jour de toutes les règles applicables. Pour cet exemple, la seule modification que vous devez apporter est d’inclure le nouvel élément de données data.content à la règle de chargement de page générique et à la règle de consultation de page de produit.

  1. Ouvrez la règle all pages - library loaded - send event - 50

  2. Sélectionnez l’action Adobe Experience Platform Web SDK - Send event

  3. Ajoutez l’élément de données data.content au champ Données .

    Ajouter des données Target à la règle

  4. Enregistrer vos modifications et créer dans votre bibliothèque

NOTE
L’exemple ci-dessus utilise un objet data qui n’est pas entièrement renseigné sur tous les types de page. Les balises gèrent cette situation de manière appropriée et omettent les clés dont la valeur est indéterminée. Par exemple, entity.id et entity.name ne seraient transmis sur aucune page autre que les détails du produit.

Fractionnement des requêtes Personalization et Analytics

La couche de données sur le site Luma est complètement définie avant le code incorporé des balises. Cela nous permet d’utiliser un seul appel pour récupérer du contenu personnalisé (provenant d’Adobe Target, par exemple) et envoyer des données d’analyse (vers Adobe Analytics, par exemple).

Sur de nombreux sites Web, cependant, la couche de données ne peut pas être chargée suffisamment tôt ou assez rapidement pour utiliser un seul appel pour les deux applications. Dans ces situations, vous pouvez utiliser deux actions Envoyer l’événement lors d’un chargement de page unique et utiliser la première pour la personnalisation et la seconde pour les analyses. La ventilation des événements de cette manière permet à l’événement de personnalisation de se déclencher le plus tôt possible, en attendant que la couche de données se charge complètement avant d’envoyer l’événement Analytics. Ceci est similaire à de nombreuses mises en oeuvre de SDK pré-web, où Adobe Target déclenche l’appel target-global-mbox en haut de la page et Adobe Analytics déclenche l’appel s.t() en bas de la page.

Pour créer la requête de personnalisation sur le haut :

  1. Ouvrez la règle all pages - library loaded - send event - 50

  2. Ouvrez l’action Send event

  3. Sélectionnez Utiliser des événements guidés, puis Demander la personnalisation

  4. Cela verrouille le type comme Récupération de la proposition de prise de décision

    send_décision_request_alone

Pour créer la requête d’analyse en bas :

  1. Créez une nouvelle règle appelée all pages - page bottom - send event - 50
  2. Ajoutez un événement à la règle. Utilisez l’extension Core et le type d’événement Page Bottom
  3. Ajoutez une action à la règle. Utilisez l’extension Adobe Experience Platform Web SDK et le type d’action Send event
  4. Sélectionnez Utiliser des événements guidés, puis Collect analytics
  5. Cela verrouille la case à cocher Inclure les notifications d’affichage en attente sélectionnée afin que la notification d’affichage en file d’attente de la demande de prise de décision soit envoyée.

send_décision_request_alone

TIP
Si l’événement pour lequel vous récupérez une proposition de prise de décision n’a pas d’événement Adobe Analytics suivant, il utilise le style d’événement guidé Non guidé - afficher tous les champs. Vous devrez sélectionner toutes les options manuellement, mais cela déverrouille l’option envoyer automatiquement une notification d’affichage avec votre requête de récupération.

Validation avec Debugger

Maintenant que les règles sont mises à jour, vous pouvez vérifier si les données sont transmises correctement à l’aide de l’Adobe Debugger .

  1. Accédez au site de démonstration Luma et connectez-vous avec l’e-mail test@adobe.com et le mot de passe test.

  2. Accédez à une page de détails de produit.

  3. Ouvrez l’extension de navigateur du débogueur Adobe Experience Platform et basculez la propriété de balise sur votre propre propriété de développement

  4. Recharger la page

  5. Sélectionnez l’outil Network dans le débogueur et filtrez par Adobe Experience Platform Web SDK

  6. Sélectionner la valeur de la ligne d’événements pour le premier appel

  7. Notez qu’il existe des clés sous data > __adobe > target et qu’elles contiennent des informations sur le produit, la catégorie et l’état de connexion.

    requête décisionScope

Validation dans l’interface de Target

Ensuite, vérifiez dans l’interface de Target que les données ont été reçues et qu’elles peuvent être utilisées dans les audiences et les activités. Les données XDM sont automatiquement mappées aux paramètres Target personnalisés. Vous pouvez vérifier que les données XDM ont été reçues par Target et sont disponibles en créant une audience.

  1. Ouvrez Adobe Target

  2. Accédez à la section Audiences

  3. Créez une audience et choisissez le type d'attribut Personnalisé

  4. Recherchez le champ Paramètre pour web. Le menu déroulant doit être rempli avec tous les champs XDM liés aux détails de la page web.

    Valider dans l’attribut personnalisé Target

Ensuite, vérifiez que l’attribut de profil d’état de connexion a bien été transmis.

  1. Choisissez le type d’attribut Profil du visiteur

  2. Recherchez loggedIn. Si l’attribut est disponible dans le menu déroulant, il a été correctement transmis à Target. Les nouveaux attributs peuvent prendre plusieurs minutes pour être disponibles dans l’interface utilisateur de Target.

    Validation dans le profil Target

Si vous disposez de Target Premium, vous pouvez également vérifier que les données d’entité ont été transmises correctement et que les données de produit ont été écrites dans le catalogue de produits Recommendations.

  1. Accédez à la section Recommendations

  2. Sélectionnez Recherche catalogue dans la navigation de gauche.

  3. Recherchez le SKU du produit ou le nom du produit que vous avez visité précédemment sur le site Luma. Le produit doit apparaître dans le catalogue de produits. La recherche de nouveaux produits dans le catalogue de produits Recommendations peut prendre plusieurs minutes.

    Valider dans la recherche de catalogue Target

Valider avec Assurance

En outre, vous pouvez utiliser Assurance le cas échéant pour confirmer que les demandes de prise de décision Target obtiennent les données correctes et que toutes les transformations côté serveur se produisent correctement. Vous pouvez également vérifier que les informations sur les campagnes et expériences sont contenues dans les appels Adobe Analytics même lorsque les appels Target Decisioning et Adobe Analytics sont envoyés séparément.

  1. Ouvrez Assurance

  2. Démarrez une nouvelle session d’assurance, entrez le nom de session et l’ URL de base pour votre site ou toute autre page que vous testez.

  3. Cliquez sur Suivant.

    Valider dans l’assurance d’une nouvelle session

  4. Sélectionnez votre méthode de connexion. Dans ce cas, nous utiliserons copy link

  5. Copiez le lien et collez-le dans un nouvel onglet du navigateur

  6. Cliquez sur Terminé

    Valider dans la connexion d’assurance par lien de copie

  7. Une fois votre session d’assurance lancée, les événements s’affichent dans l’onglet Événements .

  8. Filtrer par "tnta"

  9. Sélectionnez l’appel le plus récent et développez les messages pour vous assurer qu’il est correctement renseigné et notez les valeurs "tnta".

    Valider dans l’assurance Accès Target

  10. Conservez ensuite le filtre "tnta" et sélectionnez l’événement analytics.mapping qui se produit après l’événement cible que nous venons de visualiser.

  11. Examinez "context.mappedQueryParams".&lt;yourSchemaName>" pour confirmer qu’il contient un attribut "tnta" avec une chaîne concaténée correspondant aux valeurs "tnta" trouvées dans l’événement cible précédent.

    Valider dans l’assurance accès Analytics

Cela confirme que les informations A4T qui étaient placées en file d’attente pour transmission ultérieure lorsque nous avons effectué l’appel de prise de décision de la cible ont été envoyées correctement lorsque l’appel de suivi des analyses s’est déclenché ultérieurement sur la page.

Maintenant que vous avez terminé cette leçon, vous devez disposer d’une mise en oeuvre opérationnelle d’Adobe Target à l’aide du SDK Web Platform.

Suivant :

NOTE
Merci d’avoir consacré du temps à l’apprentissage du SDK Web Adobe Experience Platform. Si vous avez des questions, souhaitez partager des commentaires généraux ou avez des suggestions sur le contenu à venir, partagez-les sur cet post de discussion de la communauté Experience League
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4