Outil Adobe Experience Manager ContextHub

Utilisez l’outil AEM ContextHub pour intégrer Dynamic Tag Management à Adobe Experience Manager (AEM) ContextHub (version de la couche de données d’AEM). Vous pouvez également utiliser cet outil pour intégrer DTM à n’importe quelle couche de données, et ce même pour les sites web n’utilisant pas AEM.

Les clients DTM utilisent souvent des éléments de données pour mapper les couches de données de leurs sites web. Par exemple, la couche de données peut inclure des informations selon lesquelles un utilisateur examine un produit particulier ou a placé un article dans le panier. La DTM peut utiliser ces informations dans des conditions de règle et des actions de plusieurs manières. Cela inclut l’envoi de données à Analytics à des fins de compte rendu des performances ou à Target pour afficher du contenu personnalisé pour l’utilisateur.

L’outil AEM ContextHub résout de nombreux problèmes liés aux couches de données. Certaines couches de données ne se chargent pas en haut de la page. D’autres couches de données sont dynamiques ou asynchrones et changent fréquemment lorsque la page change. Dans le passé, ces deux problèmes rendaient problématique l’envoi efficace de données ou le déclenchement des actions par la DTM.

L’outil AEM ContextHub élimine la nécessité d’écrire du code personnalisé qui vérifie fréquemment si la couche de données change, se charge ailleurs que dans la partie supérieure de la page ou est modifiée au fur et à mesure que la page change.

Par exemple, supposons qu’un client place un article dans le panier, puis le supprime. Si la page n’est pas actualisée à mesure que la couche de données change, la DTM ne reconnaît pas la modification sans ajout de code personnalisé. L’outil AEM ContexHub contient un moteur d’interrogation qui vérifie toutes les secondes s’il y a des modifications.

La DTMs pouvant désormais remplir de manière proactive les éléments de données par le biais de la couche de données, les utilisateurs peuvent également utiliser les éléments de données AEM ContextHub en association avec des conditions précédemment publiées, telles que Valeur de l’élément de données. Cela permet aux utilisateurs de gérer les valeurs de couche de données au chargement d’une page ou de combiner la condition Valeur de l’élément de données avec l’événement dataelementchanged, lorsque la couche de données a changé en raison d’une interaction de l’utilisateur.

Lorsque vous configurez cet outil, vous pouvez utiliser le paramètre par défaut pour l’intégration avec AEM ContextHub ou vous pouvez personnaliser la structure pour qu’elle fonctionne avec n’importe quel site web.

  1. Cliquez sur <Nom de la propriété web> > Overview > Add a Tool > AEM ContextHub.

  2. Saisissez un nom explicite pour l’outil.

    Ce nom s’affiche dans l’onglet Overview sous Installed Tools.

  3. Cliquez sur Create Tool pour afficher la page AEM ContextHub Settings.

  4. Renseignez les champs suivants :

    Élément Description
    Utilisez la couche de données ContextHub par défaut Utilisez le format AEM ContextHub. Avec cette option sélectionnée, la DTM référence le schéma ContextHub par défaut pour cette intégration. Si vous avez apporté des modifications au schéma ContextHub ou si vous souhaitez utiliser une autre couche de données, utilisez l’option personnalisée.
    Personnaliser la couche de données ContextHub Utilisez un format personnalisé qui mappe la structure de couche de données de tout site web, même s’il n’utilise pas AEM. Cette option vous permet de modifier votre schéma de couche de données. Par défaut, elle remplit la fenêtre de modification avec la couche de données ContextHub par défaut, dans laquelle vous pouvez apporter des modifications ou la remplacer complètement par votre code.
    Open Editor (Ouvrir l’éditeur) Si vous choisissez l’option Personnaliser la couche de données ContextHub, vous pouvez utiliser l’éditeur pour insérer votre code personnalisé.
    Ajouter une note Ajoutez toute remarque concernant cette implémentation.
  5. Cliquez sur Save Changes.

Gestion des couches de données à l’aide de l’outil ContextHub

L’outil ContextHub AEM de Dynamic Tag Management peut être utilisé pour les implémentations de couches de données ContextHub et génériques. Le schéma de couche de données ContextHub est chargé par défaut dans l’outil et fournit une intégration simple avec des magasins ContextHub Adobe Experience Manager (AEM). Des exemples de mise en œuvre de la couche de données ContextHub par défaut et d’une couche de données générique personnalisée sont fournis.

Conditions préalables

Pour utiliser l’outil ContextHub, vous devez respecter les conditions préalables suivantes :

  • Une couche de données d’objet JavaScript ou ContextHub existante sur un site web.
  • Schéma JSON qui définit correctement la couche de données utilisée sur le site web.
  • Une propriété web de DTM active utilisée sur le site web.

Composants de l’outil AEM ContextHub

L’outil AEM ContextHub ajoute deux fonctionnalités à la DTM :

  • Définition de la couche de données
  • Type de couche de données AEM ContextHub

En outre, un nouveau type d’événement a été ajouté pour faciliter la surveillance de la couche de données appelé dataelementchanged. Ce type d’événement peut être utilisé indépendamment de l’outil AEM ContextHub.

Chaque zone fonctionnelle correspond à une étape de configuration décrite dans les deux exemples ci-dessous.

Surveillance des éléments de données

Le nouveau type d’événement dataelementchanged surveille toute modification apportée à une valeur d’élément de données spécifique au cours d’une vue de page. Il convient de noter les observations suivantes lors de l’utilisation du présent type d’événement.

  1. L’élément de données doit correspondre à une valeur JavaScript simple. Les valeurs complexes telles que les tableaux et les objets renvoyés dans un script personnalisé d’élément de données ne fonctionneront pas correctement. Les cookies, les sélecteurs CSS et les paramètres d’URL produisent également des résultats inattendus et peuvent ne pas fonctionner du tout. Les valeurs simples telles que les chaînes et les entiers fonctionnent correctement.
  2. Soyez prudent dans le nombre de types d’événement dataelementchanged sur une seule page. Bien que la surveillance soit efficace, un grand nombre d’évaluations peut avoir un impact sur les performances des pages.
  3. Le type d’événement dataelementchanged fonctionne uniquement dans la vue de page active, car il s’agit d’un système de surveillance DOM.
  4. Le moniteur des éléments de données interroge les valeurs.

Exemple de couche de données ContextHub par défaut

Exemple d’utilisation de l’outil AEM ContextHub qui référence et utilise la couche de données ContextHub par défaut dans la configuration Dynamic Tag Management.

La couche de données ContextHub est chargée sur un site web Adobe Experience Manager (AEM) de test, mais ContextHub peut être utilisé indépendamment d’AEM. Si vous souhaitez utiliser ContextHub indépendamment d’AEM, contactez votre représentant Adobe.

Tous les magasins ContextHub peuvent être référencés à partir de la console du navigateur.

La surveillance de la couche de données de la DTM s’effectue avant toute autre fonction de DTM. Par conséquent, les exemples ne déploient pas la couche de données via la DTM même si cela est possible. Ils dépendront plutôt de la couche de données générée par le serveur. Sinon, des avertissements JavaScript peuvent se produire, car certaines valeurs de couche de données peuvent ne pas être disponibles.

Définition de la couche de données

La première étape de la configuration de l’outil AEM ContextHub consiste à l’ajouter à une propriété web.

REMARQUE

Pour l’instant, un seul outil AEM ContextHub est autorisé par propriété web de DTM.

  1. Cliquez sur <Nom de la propriété web> > Overview > Add a Tool > AEM ContextHub.

  2. Saisissez un nom explicite pour l’outil.

  3. Cliquez sur Create Tool pour afficher la page AEM ContextHub Settings.

  4. Sélectionnez Use Default ContextHub Data Layer pour utiliser les magasins ContextHub standard.

    Ou

    Sélectionnez Customize ContextHub Data Layer pour modifier le schéma. Il est nécessaire d’utiliser l’option personnalisée si une couche de données ContextHub autre que par défaut est utilisée dans l’implémentation.

    La racine de la couche de données par défaut permet d’accéder à tous les magasins ContextHub. Étant donné la nature dynamique des magasins ContextHub, d’autres fonctions disponibles avec cette couche de données ne sont pas disponibles dans la référence d’objet JavaScript simple utilisée par l’approche de couche de données générique.

  5. (Conditionnel) Pour utiliser une couche de données personnalisée, cliquez sur Open Editor pour voir la définition de schéma de couche de données. Si la couche de données personnalisée est une modification du schéma ContextHub, veillez à ajouter « ContextHub » dans le champ Data Layer Root.

    Le schéma ContextHub par défaut est renseigné dans l’éditeur.

    1. Modifiez le schéma selon les besoins pour qu’il corresponde au schéma de couche de données du site.
    2. Cliquez sur Save and Close pour enregistrer le schéma et fermer l’éditeur.
  6. Cliquez sur Save Changes.

Création d’un élément de données de couche de données

  1. Dans la propriété web, cliquez sur l’onglet Rules, puis sur Data Elements dans le menu de gauche.

  2. Cliquez sur Create New Data Element.

  3. Spécifiez un nom pour l’élément de données. Dans cet exemple, nommez l’élément de données « total_price ».

  4. Dans la liste déroulante Type, sélectionnez AEM ContextHub.

    Le nom de l’outil AEM ContextHub est renseigné dans « Source », mais un seul outil AEM ContextHub peut être défini dans la version actuelle.

  5. Faites correspondre l’élément de données à la couche de données en sélectionnant un chemin dans le sélecteur d’objets.

    Dans cet exemple, sélectionnez l’objet cart.totalPriceFloat.

  6. Cliquez sur Save Data Element.

Créer une règle basée sur un événement qui utilise le type d’événement de modification de l’élément de données

  1. Dans la propriété web, cliquez sur l’onglet Rules, puis sur Event Based Rules dans le menu de gauche.

  2. Cliquez sur Create New Rule.

  3. Attribuez un nom à la règle. Dans cet exemple, nommez la règle « cart_total_update ».

  4. Développez la section Conditions.

  5. Dans la liste déroulante Event Type, sélectionnez dataelementchanged.

  6. Sélectionnez l’élément de données qui a été créé dans la section précédente (total_price).

  7. Sous Rule Conditions, sélectionnez Data Element Value dans la liste déroulante, puis cliquez sur Add Criteria.

  8. Sélectionnez l’élément de données qui a été créé dans la section précédente (total_price) et affectez une valeur qui provoque le déclenchement de la règle.

    Dans cet exemple, une expression régulière est utilisée pour évaluer tout élément supérieur ou égal à 50 : ^([5-9]\d|[1-9]\d{2,})$

    REMARQUE

    Si les valeurs d’élément de données sont ainsi utilisées comme conditions, il est important que les paramètres d’élément de données soient pris en compte dans la correspondance. Par exemple, la sélection de l’option Force Lowercase Value dans les paramètres des éléments de données convertirait la valeur en minuscules avant l’évaluation. Comme JavaScript respecte la casse, « test » n’est pas identique à « Test » et la condition ne se déclenche pas comme prévu.

  9. Développez la section Javascript / Third Party Tags.

  10. Cliquez sur Add New Script.

  11. Ajoutez un script JavaScript non séquentiel qui fournit une notification si la règle se déclenche. Nommez la règle « big_money_alert », puis ajoutez un script d’alerte similaire à l’exemple suivant :

    alert('$' + _satellite.getVar(‘total_price’) + ‘ is big money!’);

  12. Cliquez sur Save Code, puis sur Save Rule.

Valider la mise en œuvre

Sur le site web compatible DTM qui exécute la propriété web ci-dessus, validez l’implémentation.

  • Dans Developer Console, vérifiez l’existence de la couche de données (ContextHub).

  • Remplacez l’objet de couche de données surveillé par une valeur NON conforme à la condition ci-dessus : ContextHub.setItem('/store/cart/totalPriceFloat','5');

  • Remplacez l’objet de couche de données surveillé par une valeur qui CORRESPOND à la condition ci-dessus : ContextHub.setItem('/store/cart/totalPriceFloat','52');

  • Dans l’exemple d’implémentation, un message d’alerte doit s’afficher :

Si le débogage de la DTM est activé, l’évaluation qui a échoué doit s’afficher dans la console.

Exemple de couche de données personnalisée

Exemple d’utilisation de l’outil AEM ContextHub qui référence et utilise une couche de données personnalisée autre que ContextHub dans la configuration Dynamic Tag Management.

L’exemple de couche de données (_dl) sera chargé sur la page web de test en tant que définition d’objet JavaScript dans la section <head/> de la page avant que le code incorporé de la DTM ne soit référencé.

<head> 
    <script> 
        window._dl = { 
            page: { 
                name: 'homepage', 
                quantity: 1, 
                friend: 'No one' } 
        } 
    </script> 
    <script src="//assets.adobedtm.com/satelliteLib-*.js"></script> 
</head> 

Le moniteur de couche de données de la gestion dynamique des balises (voir ci-dessous) débute avant toute autre fonction DTM, de sorte que les exemples ne déploient pas la couche de données par le biais de la gestion dynamique des balises. Sinon, des avertissements JavaScript peuvent se produire, car certaines valeurs de couche de données peuvent ne pas être disponibles.

Définition de la couche de données

La première étape de la configuration de l’outil AEM ContextHub consiste à l’ajouter à une propriété web.

REMARQUE

Pour l’instant, un seul outil AEM ContextHub est autorisé par propriété web de DTM.

  1. Cliquez sur <Nom de la propriété web> > Overview > Add a Tool > AEM ContextHub.

  2. Saisissez un nom explicite pour l’outil.

  3. Cliquez sur Create Tool pour afficher la page AEM ContextHub Settings.

  4. Sélectionnez Customize ContextHub Data Layer pour modifier le schéma.

    Un nom d’objet JavaScript racine doit être ajouté au champ Data Layer Root pour les couches de données autres que ContextHub. La définition _dl est utilisée dans les exemples génériques de cette section.

  5. Cliquez sur Open Editor pour voir la définition du schéma de couche de données.

    Par défaut, le schéma ContextHub par défaut est renseigné dans l’éditeur.

  6. Supprimez le schéma par défaut et collez-le dans le schéma de couche de données du site.

    L’exemple de schéma non-ContextHub suivant est utilisé dans les exemples génériques :

    { 
      "$schema": "https://json-schema.org/draft-04/schema#", 
      "type": "object", 
      "properties": { 
        "page": { 
          "type": "object", 
          "properties": { 
            "name": { 
              "type": "string" 
            }, 
            "quantity": { 
              "type": "number" 
            }, 
            "friend": { 
              "type": "string" 
            } 
          }, 
          "required": [ 
            "name", 
            "quantity", 
            "friend" 
          ] 
        } 
       }, 
      "required": [ 
        "page" 
      ] 
    } 
    
  7. Cliquez sur Save and Close pour enregistrer le schéma et fermer l’éditeur, puis cliquez sur Save Changes.

Création d’un élément de données de couche de données

  1. Dans la propriété web, cliquez sur l’onglet Rules, puis sur Data Elements dans le menu de gauche.

  2. Cliquez sur Create New Data Element.

  3. Spécifiez un nom pour l’élément de données. Dans cet exemple, nommez l’élément de données « my_friend ».

  4. Dans la liste déroulante Type, sélectionnez AEM ContextHub.

    Le nom de l’outil AEM ContextHub est renseigné dans « Source », mais un seul outil AEM ContextHub peut être défini dans la version actuelle.

  5. Faites correspondre l’élément de données à la couche de données en sélectionnant un chemin dans le sélecteur d’objets.

    Dans cet exemple, sélectionnez l’objet page.friend.

  6. Cliquez sur Save Data Element.

Créer une règle basée sur un événement qui utilise le type d’événement de modification de l’élément de données

  1. Dans la propriété web, cliquez sur l’onglet Rules, puis sur Event Based Rules dans le menu de gauche.

  2. Cliquez sur Create New Rule.

  3. Attribuez un nom à la règle. Dans cet exemple, nommez la règle « find_a_friend ».

  4. Développez la section Conditions.

  5. Dans la liste déroulante Event Type, sélectionnez dataelementchanged.

  6. Sélectionnez l’élément de données qui a été créé dans la section précédente (my_friend).

  7. Sous Rule Conditions, sélectionnez Data Element Value dans la liste déroulante, puis cliquez sur Add Criteria.

  8. Sélectionnez l’élément de données qui a été créé dans la section précédente (my_friend) et affectez une valeur qui provoque le déclenchement de la règle.

    Dans cet exemple, utilisez « Carl » comme valeur.

    REMARQUE

    Si les valeurs d’élément de données sont ainsi utilisées comme conditions, il est important que les paramètres d’élément de données soient pris en compte dans la correspondance. Par exemple, la sélection de l’option Force Lowercase Value dans les paramètres des éléments de données convertirait la valeur en minuscules avant l’évaluation. Comme JavaScript respecte la casse, « test » n’est pas identique à « Test » et la condition ne se déclenche pas comme prévu.

  9. Développez la section Javascript / Third Party Tags.

  10. Cliquez sur Add New Script.

  11. Ajoutez un script JavaScript non séquentiel qui fournit une notification si la règle se déclenche. Nommez la règle « found_my_friend », puis ajoutez un script d’alerte similaire à l’exemple suivant :

    alert(_satellite.getVar(‘my_friend’) + ‘ is my friend.’);

  12. Cliquez sur Save Code, puis sur Save Rule.

Valider la mise en œuvre

Sur le site web compatible DTM qui exécute la propriété web ci-dessus, validez l’implémentation.

  • Dans la console de développement, vérifiez l’existence de la couche de données (_dl).

  • Remplacez l’objet de couche de données surveillé par la valeur définie dans la condition ci-dessus (_dl.page.friend = ‘Carl’).

    • Dans l’exemple d’implémentation, un message d’alerte doit s’afficher :

  • Donnez à l’objet une autre valeur (_dl.page.friend = ‘Bob’) et aucune alerte ne doit s’afficher.

    REMARQUE

    Si le débogage de la DTM est activé, l’évaluation qui a échoué doit s’afficher dans la console.

  • Donnez à l’objet une valeur minuscule de la correspondance (_dl.page.friend = ‘carl’) et aucune alerte ne doit s’afficher.

  • Remplacez l’objet par la bonne casse de la correspondance (_dl.page.friend = ‘Carl’) et l’alerte doit s’afficher à nouveau.

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free