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 :

Conditions préalables

Pour terminer les leçons de cette section, vous devez d’abord suivre celles de Configurer les balises et Ajouter le service d’identité.

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 :

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. Les clients qui utilisent encore l’ancienne bibliothèque de Target, mbox.js, , doivent effectuer la mise à niveau vers at.js 2.x pour utiliser des balises.

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

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

À 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

Avec l’action Load 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

Validation de la requête de chargement de page

Maintenant que vous avez ajouté l’extension Target v2 et déclenché les actions Load Target et Fire Page Load Request, une requête de chargement de page doit être envoyé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

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 :

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 le service d’identités 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

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

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 :

Vous n’avez pas besoin de transmettre de paramètres d’entité dans ce tutoriel, mais le processus est identique à ce que vous avez fait précédemment lors de la transmission du paramètre de requête pageName. Il vous suffit de donner 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 le service dʼidentités Adobe Experience Platform 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 du service d’identités avant de déclencher la demande de chargement de page. Pour ce faire, assurez-vous de disposer des fonctionnalités suivantes sur votre site :

Dans la leçon précédente, Ajout du service d’identités d’Adobe Experience Platform, vous avez créé la règle All Pages - Library Loaded - Authenticated - 10 pour déclencher l’action « Définir l’ID client ». 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

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 fonction targetPageParams(). 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 :

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é

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 :

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 leads comportent généralement des entonnoirs de leads avec un « ID de lead » 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. En outre, la demande de commande est un élément essentiel des mises en oeuvre de Recommendations, qui optimise les algorithmes en fonction du comportement d’achat. Pour obtenir les dernières informations sur la prise en charge d’A4T, consultez 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

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

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

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

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.

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 Custom Code (Code personnalisé) dans l’extension Core pour déclencher une requête à l’aide des méthodes getOffer()/applyOffer() et trackEvent(). Ceci est très similaire à ce que vous venez de faire dans l’exercice Requête de confirmation de commande, mais vous utiliserez un nom de requête différent et non les paramètres de commande spéciaux. Veillez à utiliser l’action Charger Target avant d’effectuer 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 :

Suite : "Ajout d’Adobe Analytics" >