DocumentationExperience PlatformTutoriel du SDK web

Création de règles de balise

Last update: Tue Jul 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Débutant
  • Intermédiaire
  • Développeur

Découvrez comment envoyer des événements à l’Edge Network Adobe Experience Platform avec votre objet XDM à l’aide de règles de balise. Une règle de balise est une combinaison d’événements, de conditions et d’actions qui indique à la propriété de balise de faire quelque chose. Avec le SDK Web Platform, les règles sont utilisées pour envoyer des événements à l’Edge Network Platform avec les données appropriées.

Objectifs d'apprentissage

À la fin de cette leçon, vous pouvez :

  • Utilisation d’une convention d’affectation de nom pour la gestion des règles dans les balises
  • Envoi d’un événement avec des champs XDM à l’aide des actions Mettre à jour la variable et Envoyer un événement
  • Empiler plusieurs jeux de champs XDM dans plusieurs règles
  • Mappage d’éléments de données de tableau individuels ou entiers à l’objet XDM
  • Publish d’une règle de balise à une bibliothèque de développement

Conditions préalables

Vous connaissez les balises de collecte de données et le site de démonstration Luma et avez terminé les leçons précédentes du tutoriel :

Conventions de dénomination

Pour gérer les règles dans les balises, il est recommandé de respecter une convention d’affectation de nom standard. Ce tutoriel utilise une convention de dénomination en cinq parties :

  • [location] - [event] - [purpose] - [order]

où ;

  1. location correspond à la ou aux pages du site sur lequel la règle se déclenche.
  2. event est le déclencheur de la règle
  3. purpose est l’action principale effectuée par la règle.
  4. order est l’ordre dans lequel la règle doit se déclencher par rapport aux autres règles.

Création de règles de balise

Dans les balises, les règles sont utilisées pour exécuter des actions (appels de déclenchement) sous diverses conditions. L’extension de balises SDK Web Platform comprend deux actions utilisées dans cette leçon :

  • La variable de mise à jour mappe des éléments de données aux propriétés dans un objet XDM
  • Envoyer l’événement envoie l’objet XDM à l’Edge Network Experience Platform

Dans le reste de cette leçon, nous :

  1. Créez une règle avec l’action Mettre à jour la variable pour définir une "configuration globale" des champs XDM.

  2. Créez des règles supplémentaires avec l’action Mettre à jour la variable qui remplacent notre "configuration globale" et contribuez à des champs XDM supplémentaires sous certaines conditions (par exemple, en ajoutant des détails sur les produits sur les pages de produits).

  3. Créez une autre règle avec l’action Envoyer l’événement, qui enverra l’objet XDM complet à l’Edge Network Adobe Experience Platform.

Toutes ces règles seront séquencées correctement à l’aide de l’option "order".

Cette vidéo donne un aperçu du processus :

https://video.tv.adobe.com/v/3427710/?learn=on

Champs de configuration globaux

Pour créer une règle de balise pour les champs XDM globaux :

  1. Ouvrez la propriété de balise que vous utilisez pour ce tutoriel.

  2. Accédez à Rules dans le volet de navigation de gauche.

  3. Sélectionnez le bouton Créer une règle

    Créer une règle

  4. Donnez à la règle le nom all pages - library loaded - set global variables - 1.

  5. Dans la section Events , sélectionnez Add

    Nommez la règle et ajoutez un événement

  6. Utilisez l’ extension Core et sélectionnez Library Loaded (Page Top) comme Event Type (Type d’événement)

  7. Sélectionnez la liste déroulante Avancé et saisissez 1 comme Commande

    note note
    NOTE
    Plus le numéro de commande est bas, plus tôt il s’exécute. Par conséquent, nous donnons à notre "configuration globale" un numéro de commande faible.

  8. Sélectionnez Conserver les modifications pour revenir à l’écran de règle principal.
    Sélectionner le déclencheur chargé de bibliothèque

  9. Dans la section Actions , sélectionnez Ajouter

  10. En tant que extension, sélectionnez Adobe Experience Platform Web SDK

  11. En tant que Type d’action, sélectionnez Mettre à jour la variable

  12. En tant qu' élément de données, sélectionnez l' xdm.variable.content que vous avez créé dans la leçon Créer des éléments de données.

    Mettre à jour le schéma de variable

Maintenant, mappez vos éléments de données avec le schéma utilisé par votre objet XDM. Vous pouvez mapper des propriétés individuelles ou des objets entiers. Dans cet exemple, vous mappez les propriétés individuelles :

  1. Recherchez le champ eventType et sélectionnez-le

  2. Saisissez la valeur web.webpagedetails.pageViews

    note tip
    TIP
    Pour comprendre les valeurs à renseigner dans le champ eventType, vous devez accéder à la page de schéma et sélectionner le champ eventType pour afficher les valeurs suggérées sur le rail de droite. Vous pouvez également saisir une nouvelle valeur, si nécessaire.
    eventType valeurs suggérées sur la page des schémas

  3. Recherchez ensuite l’objet identityMap dans le schéma et sélectionnez-le.

  4. Associer à l’élément de données identityMap.loginID

    Mettre à jour la carte d’identité des variables

    note tip
    TIP
    Les champs XDM ne seront pas inclus dans la requête réseau si l’élément de données est nul. Par conséquent, lorsque l’utilisateur n’est pas authentifié et que l’élément de données identityMap.loginID est nul, l’objet identityMap ne sera pas envoyé. C'est pourquoi nous pouvons le définir dans notre "configuration globale".

  5. Faites défiler l’écran vers le bas jusqu’à ce que vous atteigniez l’objet web

  6. Sélectionner pour l’ouvrir

  7. Mappez les éléments de données suivants aux variables XDM web correspondantes

    • web.webPageDetials.name à %page.pageInfo.pageName%
    • web.webPageDetials.server à %page.pageInfo.server%
    • web.webPageDetials.siteSection à %page.pageInfo.hierarchie1%

  8. Définissez web.webPageDetials.pageViews.value sur 1.

    Mettre à jour le contenu de la variable

    note tip
    TIP
    Bien qu’Adobe Analytics n’ait pas besoin de eventType défini sur web.webpagedetails.pageViews ni de web.webPageDetails.pageViews.value pour traiter une balise en tant que page vue, il est utile d’avoir une méthode standard pour indiquer une page vue pour d’autres applications en aval.

  9. Sélectionnez Conserver les modifications, puis Enregistrer la règle dans l’écran suivant pour terminer la création de la règle.

Champs de page de produit

Maintenant, commencez à utiliser Mettre à jour la variable dans des règles séquencées supplémentaires pour enrichir l’objet XDM avant de l’envoyer à Platform Edge Network.

TIP
L’ordre des règles détermine la règle qui s’exécute en premier lorsqu’un événement est déclenché. Si deux règles possèdent le même type d’événement, celle dont le nombre est le plus faible s’exécute en premier.

Commencez par effectuer le suivi des consultations de produit sur la page des détails du produit de Luma :

  1. Sélectionnez Ajouter une règle

  2. Nommez-le ecommerce - library loaded - set product details variables - 20

  3. Sélectionnez le + symbole sous Événement pour ajouter un nouveau déclencheur.

  4. Sous Extension, sélectionnez Core

  5. Sous Event Type, sélectionnez Library Loaded (Page Top) (Bibliothèque chargée (Haut de page))

  6. Sélectionnez pour ouvrir Options avancées, saisissez 20. Cette valeur de commande garantit que la règle s’exécute après l’ all pages - library loaded - set global variables - 1 qui définit la configuration globale.

  7. Sélectionnez Keep changes

    Règles XDM Analytics

  8. Sous Conditions, sélectionnez Ajouter

  9. Laissez Type logique sur Normal

  10. Laissez Extension sur Core

  11. Sélectionnez Type de condition comme Chemin sans chaîne de requête

  12. Sur la droite, activez le bouton bascule Regex

  13. Sous path equals set /products/. Pour le site de démonstration Luma, la règle se déclenche uniquement sur les pages de produits.

  14. Sélectionnez Conserver les modifications

    Règles XDM Analytics

  15. Sous Actions, sélectionnez Ajouter

  16. Sélectionnez l’extension Adobe Experience Platform Web SDK

  17. Sélectionnez Action Type comme Mise à jour de variable

  18. Sélectionnez xdm.variable.content comme élément de données

  19. Faites défiler jusqu’à l’objet commerce

  20. Ouvrez l’objet productViews et définissez value sur 1

    Configuration de la consultation de produit

    note tip
    TIP
    La définition de commerce.productViews.value=1 dans XDM correspond automatiquement à l’événement prodView dans Analytics.

  21. Faites défiler l’écran jusqu’à eventType et définissez-le sur commerce.productViews

    note note
    NOTE
    Comme cette règle a un ordre plus élevé, elle remplacera le eventType défini dans la règle "configuration globale". eventType ne peut contenir qu’une seule valeur et nous vous recommandons de la définir avec l’événement le plus précieux.

  22. Faites défiler l’écran jusqu’à et sélectionnez le tableau productListItems

  23. Sélectionnez Fournir des éléments individuels

  24. Sélectionnez Ajouter un élément

    Définition de l’événement d’affichage de produit

    note caution
    CAUTION
    productListItems est un type de données array qui s’attend donc à ce que les données entrent en tant que collection d’éléments. En raison de la structure de couche de données du site de démonstration Luma et parce qu’il est possible d’afficher un seul produit à la fois sur le site Luma, vous ajoutez des éléments individuellement. Lors de l’implémentation sur votre propre site web, en fonction de la structure de votre couche de données, vous pouvez fournir un tableau entier.

  25. Sélectionnez pour ouvrir Item 1

  26. Mapper productListItems.item1.SKU à %product.productInfo.sku%

    Variable d’objet XDM SKU du produit

  27. Sélectionnez Conserver les modifications

  28. Sélectionnez Enregistrer pour enregistrer la règle.

Champs du panier

Vous pouvez mapper un tableau entier à un objet XDM, à condition que le tableau corresponde au format du schéma XDM. L’élément de données de code personnalisé cart.productInfo que vous avez créé précédemment effectue des boucles à travers l’objet de couche de données digitalData.cart.cartEntries sur Luma et le convertit au format requis de l’objet productListItems du schéma XDM.

Pour illustrer cela, reportez-vous à la comparaison ci-dessous de la couche de données du site Luma (à gauche) avec l’élément de données traduit (à droite) :

Format de tableau d’objet XDM

Comparez l’élément de données à la structure productListItems (indice, il doit correspondre).

IMPORTANT
Notez comment les variables numériques sont traduites, avec des valeurs de chaîne dans la couche de données telles que price et qty reformatées en nombres dans l’élément de données. Ces exigences de format sont importantes pour l’intégrité des données dans Platform et sont déterminées à l’étape configurer les schémas . Dans cet exemple, quantity utilise le type de données Integer .
Type de données de schéma XDM

Mappons maintenant notre tableau à l’objet XDM :

  1. Créez une nouvelle règle nommée ecommerce - library loaded - set shopping cart variables - 20

  2. Sélectionnez le + symbole sous Événement pour ajouter un nouveau déclencheur.

  3. Sous Extension, sélectionnez Core

  4. Sous Event Type, sélectionnez Library Loaded (Page Top) (Bibliothèque chargée (Haut de page))

  5. Sélectionnez pour ouvrir Options avancées, saisissez 20

  6. Sélectionnez Conserver les modifications

    Règles XDM Analytics

  7. Sous Conditions, sélectionnez Ajouter

  8. Laissez Type logique sur Normal

  9. Laissez Extensions comme Core

  10. Sélectionnez Type de condition comme Chemin sans chaîne de requête

  11. À droite, n’activez pas le bouton bascule Regex

  12. Sous path equals set /content/luma/us/en/user/cart.html. Pour le site de démonstration Luma, la règle se déclenche uniquement sur la page de panier.

  13. Sélectionnez Conserver les modifications

    Règles XDM Analytics

  14. Sous Actions, sélectionnez Ajouter

  15. Sélectionnez l’extension Adobe Experience Platform Web SDK

  16. Sélectionnez Action Type comme Mise à jour de variable

  17. Sélectionnez xdm.variable.content comme élément de données

  18. Faites défiler l’écran jusqu’à l’objet commerce et sélectionnez-le pour l’ouvrir.

  19. Ouvrez l’objet productListViews et définissez value sur 1.

    Configuration de la consultation de produit

    note tip
    TIP
    La définition de commerce.productListViews.value=1 dans XDM correspond automatiquement à l’événement scView dans Analytics.

  20. Sélectionnez eventType et définissez sur commerce.productListViews

  21. Faites défiler l’écran jusqu’au tableau productListItems et sélectionnez-le

  22. Sélectionnez Fournir un tableau entier

  23. Associer à l’élément de données cart.productInfo

  24. Sélectionnez Conserver les modifications

  25. Sélectionnez Enregistrer pour enregistrer la règle.

Créez deux autres règles pour le passage en caisse et l’achat suivant le même modèle avec les différences suivantes :

Nom de la règle : ecommerce - library loaded - set checkout variables - 20

  1. Condition : /content/luma/us/en/user/checkout.html

  2. Définissez eventType sur commerce.checkouts.

  3. Définissez commerce.checkout.value sur 1.

    note tip
    TIP
    Cela équivaut à définir l’événement scCheckout dans Analytics.

Nom de la règle : ecommerce - library loaded - set purchase variables - 20

  1. Condition : /content/luma/us/en/user/checkout/order/thank-you.html

  2. Définissez eventType sur commerce.purchases.

  3. Définissez commerce.purchases.value sur 1.

    note tip
    TIP
    Cela équivaut à définir l’événement purchase dans Analytics.

  4. Définissez commerce.order.purchaseID sur l’élément de données cart.orderId

  5. Définissez commerce.order.currencyCode sur la valeur codée en dur USD

    Définition de purchaseID pour Analytics

    note tip
    TIP
    Cela équivaut à définir des variables s.purchaseID et s.currencyCode dans Analytics.

  6. Faites défiler l’écran jusqu’au tableau productListItems et sélectionnez-le

  7. Sélectionnez Fournir un tableau entier

  8. Associer à l’élément de données cart.productInfo.purchase

  9. Sélectionnez Conserver les modifications

  10. Sélectionnez Save

Lorsque vous avez terminé, les règles suivantes doivent être créées.

Règles XDM Analytics

Envoyer la règle d’événement

Maintenant que vous avez défini les variables, vous pouvez créer la règle pour envoyer l’objet XDM complet à l’Edge Network Platform avec l’action Envoyer l’événement.

  1. À droite, sélectionnez Ajouter une règle pour créer une autre règle.

  2. Donnez à la règle le nom all pages - library loaded - send event - 50.

  3. Dans la section Events , sélectionnez Add

  4. Utilisez Core Extension et sélectionnez Library Loaded (Page Top) comme Event Type

  5. Sélectionnez la liste déroulante Avancé et saisissez 50 dans Ordre. Cette règle se déclenche après toutes les autres règles que vous avez configurées (dont 1 ou 20 comme Commande).

  6. Sélectionnez Conserver les modifications pour revenir à l’écran de règle principal.
    Sélectionner le déclencheur chargé de bibliothèque

  7. Dans la section Actions , sélectionnez Ajouter

  8. En tant que extension, sélectionnez Adobe Experience Platform Web SDK

  9. En tant que Type d’action, sélectionnez Send event

  10. En tant que XDM, sélectionnez l’élément de données xdm.variable.content créé dans la leçon précédente.

  11. Sélectionnez Conserver les modifications pour revenir à l’écran de règle principal.

    Ajouter l’action Envoyer l’événement

  12. Sélectionnez Enregistrer pour enregistrer la règle.

    Enregistrer la règle

Publish des règles dans une bibliothèque

Ensuite, publiez la règle dans votre environnement de développement afin que vous puissiez vérifier qu’elle fonctionne.

Pour créer une bibliothèque :

  1. Accédez à Flux de publication dans le volet de navigation de gauche.

  2. Sélectionnez Ajouter une bibliothèque

    Sélectionner Ajouter une bibliothèque

  3. Pour le Nom, saisissez Luma Web SDK Tutorial

  4. Pour l’ environnement, sélectionnez Development

  5. Sélectionnez Ajouter toutes les ressources modifiées

    note note
    NOTE
    Vous devriez voir tous les composants de balise créés dans les leçons précédentes. L’extension Core contient le JavaScript de base requis par toutes les propriétés de balise web.

  6. Sélectionnez Enregistrer et créer pour le développement

    Créer et créer la bibliothèque

La création de la bibliothèque peut prendre quelques minutes. Une fois l’opération terminée, un point vert s’affiche à gauche du nom de la bibliothèque :

Build complete

Comme vous pouvez le constater sur l’écran Flux de publication, le processus de publication ne s’étend pas au-delà de la portée de ce tutoriel. Ce tutoriel utilise une seule bibliothèque dans votre environnement de développement.

Vous êtes maintenant prêt à valider les données de la requête à l’aide de l’Adobe Experience Platform Debugger .

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