Show Menu
SUJETS×

Adobe Experience Manager ContextHub tool

Utilisez l’outil AEM ContextHub pour intégrer la gestion dynamique des balises à Adobe Experience Manager (AEM) ContextHub (version de la couche de données d’AEM). Vous pouvez également utiliser cet outil pour intégrer la gestion dynamique des balises à 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 associer les couches de données de leurs sites web. La couche de données peut par exemple inclure des informations qui indiquent que l’utilisateur consulte un produit spécifique ou a placé un article dans le panier. La gestion dynamique des balises peut utiliser ces informations de plusieurs manières différentes dans les actions et conditions de règle, notamment pour envoyer les données à Analytics à des fins de création de rapports ou à Target, afin d’afficher du contenu personnalisé pour l’utilisateur.
L’outil AEM ContextHub permet de résoudre de nombreux problèmes associés aux couches de données. Certaines couches de données ne sont pas chargées en haut de la page. D’autres couches de données sont dynamiques ou asynchrones et changent souvent lorsque la page est modifiée. Auparavant, ces deux problèmes rendaient difficiles l’envoi de données ou le déclenchement d’actions 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 a changé, s’est chargée ailleurs que dans la partie supérieure de la page ou a été modifiée lorsque la page a changé.
Supposons par exemple qu’un client place un article dans le panier et qu’il le supprime par la suite. Si la page ne s'actualise pas lorsque 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 ContextHub contient un moteur d’interrogation qui vérifie toutes les secondes la présence de modifications.
Comme la gestion dynamique des balises renseigne désormais de manière proactive les éléments de données par le biais de la couche de données, les utilisateurs peuvent également utiliser l’outil AEM ContextHub avec les conditions précédemment publiées telles que Valeur de l’élément de données. Les utilisateurs peuvent ainsi gérer les valeurs de la couche de données au chargement d’une page ou combiner la condition Valeur de l’élément de données avec l’événement dataelementchanged , si la couche de données a changé en raison des interactions utilisateur.
Lors de la configuration de cet outil, vous pouvez utiliser le paramètre par défaut pour l’intégration à AEM ContextHub. Vous pouvez également personnaliser la structure pour qu’elle fonctionne avec n’importe quel site web.
  1. Click <Web Property Name> > Overview > Add a Tool > AEM ContextHub .
  2. Attribuez un nom explicite à l’outil.
    This name displays on the Overview tab under 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. Lorsque cette option est activé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 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 vers la structure de couche de données de n’importe quel site, même s’il n’utilise pas AEM. Cette option permet de modifier le 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 à laquelle vous pouvez apporter des modifications ou que vous pouvez entièrement remplacer par la vôtre.
    Ouvrir l’éditeur
    Si vous sélectionnez l’option Personnaliser la couche de données ContextHub, vous pouvez utiliser l’éditeur pour insérer le code personnalisé.
    Ajouter une note
    Ajoutez des notes sur l’implémentation.
  5. Cliquez sur Save Changes .

Data layer management using the ContextHub tool

L’outil ContextHub AEM de la 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, les conditions préalables suivantes doivent être remplies :
  • Vous devez disposer d’une couche de données d’objet Javascript ou ContextHub sur un site web.
  • Vous devez disposer d’un schéma JSON qui définit correctement la couche de données utilisée sur le site web.
  • Une propriété web de gestion dynamique des balises active doit être utilisée sur le site web.

AEM ContextHub tool components

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 d’AEM
En outre, un nouveau type d’événement, appelé dataelementchanged , a été ajouté afin de faciliter la surveillance des couches de données. Ce type d’événement peut être utilisé indépendamment de l’outil AEM ContextHub.
Chaque zone fonctionnelle correspond à une étape décrite dans les deux exemples ci-après.

Data element monitoring

The new dataelementchanged event type monitors any changes that occur to a specific data element value during a page view. Vous devez tenir compte des points ci-après lors de l’utilisation de ce type d’événement.
  1. L’élément de données doit correspondance à une valeur JavaScript simple. Les valeurs complexes telles que les tableaux et les objets qui sont renvoyés dans un script personnalisé d’élément de données ne fonctionnent pas correctement. Les cookies, les sélecteurs CSS et les paramètres d’URL donnent aussi des résultats inattendus et risquent de ne pas fonctionner du tout. Les valeurs simples telles que les chaînes et les entiers fonctionnent très bien.
  2. Le nombre de types d’événements dataelementchanged référencés sur une seule page doit être limité. Bien que la surveillance soit efficace, un nombre volumineux d’évaluations peut avoir un impact sur les performances de la page.
  3. Le type d’événement dataelementchanged fonctionne uniquement dans la page actuellement consultée, car il s’agit d’un système de surveillance basé sur le modèle DOM.
  4. Le moniteur des éléments de données interroge les valeurs.

ContextHub data layer default example

Example using the AEM ContextHub tool that references and uses the default ContextHub data layer within the 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 dans la console du navigateur.
La surveillance de la couche de données de gestion dynamique de données commence avant toute autre fonction de gestion dynamique des balises. Les exemples ne déploient donc pas la couche de données via la gestion dynamique des balises, même si cela est possible. Les exemples dépendent à la place de la couche de données générée par le serveur. Sinon, des avertissements JavaScript peuvent s’afficher, 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 à ajouter ce dernier à une propriété web.
Actuellement, un seul outil AEM contexthub est autorisé par propriété Web de gestion dynamique des balises.
  1. Click <Web Property Name> > 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. Select Use Default ContextHub Data Layer to leverage the standard ContextHub stores.
    OU
    Select Customize ContextHub Data Layer to modify the schema. Il est nécessaire d’utiliser l’option de personnalisation lorsqu’une couche de données ContexHub qui n’est pas 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 à l’ensemble des magasins ContextHub. En raison du caractère dynamique des magasins ContextHub, d’autres fonctions sont disponibles pour cette couche de données. Ces options ne sont en revanche 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. (Conditional) To use a custom data layer, click Open Editor to view the data layer schema definition. If the custom data layer is a modification of the ContextHub schema be sure to add “ContextHub” in the Data Layer Root field.
    Le schéma ContextHub par défaut est rempli dans l’éditeur.
    1. Apportez les modifications nécessaires au schéma pour qu’il corresponde au schéma de couche de données du site.
    2. Click Save and Close to save the schema and close the editor.
  6. Cliquez sur Save Changes .

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

  1. In the web property, click the Rules tab, then click Data Elements in the left menu.
  2. Cliquez sur Create New Data Element .
  3. Attribuez un nom à l’élément de données. Dans cet exemple, appelez l’élément de données total_price.
  4. From the Type drop-down list, select AEM ContextHub .
    Le nom de l’outil AEM ContextHub est renseigné dans Source, mais seul un 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’objet.
    Dans cet exemple, sélectionnez l’objet cart.totalPriceFloat .
  6. Cliquez sur Save Data Element .

Création d'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. In the web property, click the Rules tab, then click Event Based Rules in the left menu.
  2. Cliquez sur Create New Rule .
  3. Attribuez un nom à la règle. Dans cet exemple, appelez la règle cart_total_update.
  4. Développez la section Conditions.
  5. From the Event Type drop-down list, select dataelementchanged .
  6. Sélectionnez l’élément de données qui a été créé dans la section précédente (total_price).
  7. Under Rule Conditions , select Data Element Value from the drop-down list, then click 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 entraîne le déclenchement de la règle.
    In this example, a regular expression is used to evaluate anything greater than or equal to 50: ^([5-9]\d|[1-9]\d{2,})$
    Si les valeurs d'élément de données sont utilisées de cette manière comme conditions, il est important que les paramètres de l'élément de données soient pris en compte dans la correspondance. For example, selecting the Force Lowercase Value option in the data element settings would convert the value to all lowercase before evaluation. Comme JavaScript respecte la casse, la valeur test n’est pas identique à Test. La condition ne s’exécute donc 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 affiche une notification lorsque la règle se déclenche. Appelez la règle big_money_alert, puis ajoutez un script d’alerte identique à celui-ci :
    alert('$' + _satellite.getVar(‘total_price’) + ‘ is big money!’);
  12. Click Save Code , then click Save Rule .

Validez la mise en œuvre

Sur le site web prenant en charge la gestion dynamique des balises 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 ).
  • Donnez à l’objet de couche de données qui est surveillé une valeur qui NE correspond PAS à la condition suivante : ContextHub.setItem('/store/cart/totalPriceFloat','5');
  • Donnez à l’objet de couche de données qui est surveillé une valeur qui CORRESPOND à la condition suivante : 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 ayant échoué doit s’afficher dans la console.

Custom data layer example

Example using the AEM ContextHub tool that references and uses a custom, non-ContextHub data layer within the Dynamic Tag Management configuration.
The example data layer ( _dl ) will be loaded on the test web page as a Javascript object definition in the <head/> section of the page before the DTM embed code is referenced.
<head> 
    <script> 
        window._dl = { 
            page: { 
                name: 'homepage', 
                quantity: 1, 
                friend: 'No one' } 
        } 
    </script> 
    <script src="//assets.adobedtm.com/satelliteLib-*.js"></script> 
</head> 

La surveillance de la couche de données de gestion dynamique de données (voir ci-dessous) commence avant toute autre fonction de gestion dynamique des balises. Les exemples ne déploient donc pas la couche de données via la gestion dynamique des balises. Sinon, des avertissements JavaScript peuvent s’afficher, 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 à ajouter ce dernier à une propriété web.
Actuellement, un seul outil AEM contexthub est autorisé par propriété Web de gestion dynamique des balises.
  1. Click <Web Property Name> > 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. Select Customize ContextHub Data Layer to modify the schema.
    A root Javascript object name must be added to the Data Layer Root field for non-ContextHub data layers. _dl La définition est utilisée dans les exemples génériques de cette section.
  5. Click Open Editor to view the data layer schema definition.
    Par défaut, le schéma ContextHub par défaut est rempli dans l’éditeur.
  6. Supprimez le schéma par défaut, puis collez 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. Click Save and Close to save the schema and close the editor, then click Save Changes .

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

  1. In the web property, click the Rules tab, then click Data Elements in the left menu.
  2. Cliquez sur Create New Data Element .
  3. Attribuez un nom à l’élément de données. Dans cet exemple, appelez l’élément de données my_friend.
  4. From the Type drop-down list, select AEM ContextHub .
    Le nom de l’outil AEM ContextHub est renseigné dans Source, mais seul un 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’objet.
    Dans cet exemple, sélectionnez l’objet page.friend .
  6. Cliquez sur Save Data Element .

Création d'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. In the web property, click the Rules tab, then click Event Based Rules in the left menu.
  2. Cliquez sur Create New Rule .
  3. Attribuez un nom à la règle. Dans cet exemple, appelez la règle find_a_friend.
  4. Développez la section Conditions.
  5. From the Event Type drop-down list, select dataelementchanged .
  6. Sélectionnez l’élément de données qui a été créé dans la section précédente (my_friend).
  7. Under Rule Conditions , select Data Element Value from the drop-down list, then click 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 entraîne le déclenchement de la règle.
    Dans cet exemple, utilisez Carl comme valeur.
    Si les valeurs d'élément de données sont utilisées de cette manière comme conditions, il est important que les paramètres de l'élément de données soient pris en compte dans la correspondance. For example, selecting the Force Lowercase Value option in the data element settings would convert the value to all lowercase before evaluation. Comme JavaScript respecte la casse, la valeur test n’est pas identique à Test. La condition ne s’exécute donc 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 affiche une notification lorsque la règle se déclenche. Appelez la règle found_my_friend, puis ajoutez un script d’alerte identique à celui-ci :
    alert(_satellite.getVar(‘my_friend’) + ‘ is my friend.’);
  12. Click Save Code , then click Save Rule .

Validez la mise en œuvre

Sur le site web prenant en charge la gestion dynamique des balises 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 ).
  • Donnez à l’objet de couche de données surveillé la valeur qui a été définie dans la condition ci-dessus ( _dl.page.friend = ‘Carl’ ).
    • Dans l’exemple d’implémentation, une boîte d’alerte doit s’afficher :
  • Change the object to a different value ( _dl.page.friend = ‘Bob’ ) and no alert should display.
    Si le débogage de la gestion dynamique des balises est activé, l’évaluation ayant échoué doit s’afficher dans la console.
  • Change the object to a lowercase value of the match ( _dl.page.friend = ‘carl’ ) and no alert should display.
  • Change the object to the correct case value of the match ( _dl.page.friend = ‘Carl’ ) and the alert should once again display.