Show Menu
SUJETS×

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 de la gestion dynamique des balises utilisent souvent des éléments de données pour mapper sur 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 gestion dynamique des balises 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 rapports ou de Cible 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 les actions de déclenchement par la gestion dynamique des balises.
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 gestion dynamique des balises 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 gestion dynamique des balises 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 AEM éléments de données 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 le événement dataelementchanged , dans les cas où 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. Attribuez un nom explicite à l’outil.
    Ce nom s’affiche dans l’ Overview onglet sous Installed Tools.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. Renseignez les champs suivants :
    Élément
    Description
    Utiliser la couche de données ContextHub par défaut
    Utilisez le format AEM ContextHub. Avec cette option sélectionnée, la gestion dynamique des balises référence le schéma ContextHub par défaut pour cette intégration. Si vous avez apporté des modifications à votre schéma ContextHub ou si vous souhaitez utiliser une autre couche de données, utilisez l’option personnalisée.
    Personnalisation de 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 d’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 mise en oeuvre.
  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 principale propriété Web de gestion dynamique des balises est utilisée sur le site Web.

aem composants de l’outil ContextHub

L’outil AEM ContextHub ajoute deux fonctionnalités à la gestion dynamique des balises :
  • Définition de la couche de données
  • Type de couche de données ContextHub AEM
En outre, un nouveau type d'événement a été ajouté pour faciliter la surveillance de la couche de données appelée 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 dataelementchanged type d'événement 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 dataelementchanged types d'événement référencés 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 dataelementchanged type d'événement 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 Dynamic Tag Management configuration.
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 gestion dynamique des balises s’effectue avant toute autre fonction de gestion dynamique des balises. Par conséquent, les exemples ne déploient pas la couche de données via la gestion dynamique des balises 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.
Pour l’instant, un seul outil AEM ContextHub est autorisé par propriété web de gestion dynamique des balises.
  1. Cliquez sur <Nom de la propriété Web> > Overview > Add a Tool > AEM ContextHub .
  2. Attribuez un nom explicite à l’outil.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. Sélectionnez cette option Use Default ContextHub Data Layer pour exploiter les magasins ContextHub standard.
    Or
    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 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 vue 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 Data Layer Root champ.
    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’ Rules onglet, puis sur Data Elements 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 Type déroulante, 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’ cart.totalPriceFloat objet.
  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’ Rules onglet, puis sur Event Based Rules 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 Event Type déroulante, 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,})$
    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’ Force Lowercase Value option 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 que la condition ne se déclenche pas comme prévu.
  9. Expand the Javascript / Third Party Tags section.
  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 de

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 ( 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 DOES correspond à la condition ci-dessus : ContextHub.setItem('/store/cart/totalPriceFloat','52');
  • Dans l’exemple d’implémentation, une boîte d’alerte doit s’afficher :
Si le débogage de la gestion dynamique des balises 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 Dynamic Tag Management configuration.
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 <head/> section de la page avant que le code incorporé de la gestion dynamique des balises 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) s’début avant toute autre fonction de gestion dynamique des balises, 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.
Pour l’instant, un seul outil AEM ContextHub est autorisé par propriété web de gestion dynamique des balises.
  1. Cliquez sur <Nom de la propriété Web> > Overview > Add a Tool > AEM ContextHub .
  2. Attribuez un nom explicite à l’outil.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. Sélectionnez Customize ContextHub Data Layer pour modifier le schéma.
    Un nom d’objet JavaScript racine doit être ajouté au Data Layer Root champ pour les couches de données autres que ContextHub. La _dl définition est utilisée dans les exemples génériques de cette section.
  5. Cliquez sur Open Editor pour vue 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’ Rules onglet, puis sur Data Elements 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 Type déroulante, 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’ page.friend objet.
  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’ Rules onglet, puis sur Event Based Rules 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 Event Type déroulante, 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.
    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’ Force Lowercase Value option 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 que la condition ne se déclenche pas comme prévu.
  9. Expand the Javascript / Third Party Tags section.
  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 de

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 de mise en oeuvre, une boîte d'alerte doit s'afficher :
  • Donnez à l’objet une autre valeur ( _dl.page.friend = ‘Bob’ ) et aucune alerte ne doit s’afficher.
    Si le débogage de la gestion dynamique des balises 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.