Configuration de la prise en charge de la messagerie web in-app dans le SDK web

Les messages in-app sont des notifications que vous pouvez envoyer aux utilisateurs dans votre application web, en les guidant vers des points ciblés spécifiques.

Vous pouvez utiliser ces notifications à différentes fins, par exemple pour promouvoir de nouvelles fonctionnalités, présenter des offres spéciales ou faciliter l’intégration des utilisateurs.

En utilisant les messages in-app, vous pouvez interagir efficacement avec votre audience et l’orienter vers des aspects importants de votre application.

IMPORTANT
La messagerie web in-app est une Adobe Journey Optimizer qui utilise le SDK Web pour diffuser le contenu personnalisé.
Pour obtenir des instructions détaillées sur la configuration de votre campagne de messagerie web in-app, voir Documentation Adobe Journey Optimizer.

Conditions préalables prerequisites

Version de l’extension de balise SDK Web extension-version

La fonctionnalité de messagerie in-app web requiert la dernière version de l’extension de balise SDK web.

Configuration d’une CSP pour la messagerie web in-app csp

Lorsque vous configurez Messagerie in-app web, vous devez inclure la directive suivante dans votre CSP :

default-src  blob:;

Pour plus d’informations sur la configuration d’une CSP, voir la section documentation dédiée.

Configuration de la messagerie web in-app à l’aide de l’extension de balise SDK web tag-extension

Voir Page de configuration de l’extension de balise SDK Web pour savoir où trouver les paramètres décrits ci-dessous.

Après avoir installé Pour configurer l’extension pour la messagerie in-app web, procédez comme suit.

Dans le Personnalisation , vérifiez les Activer le stockage de personnalisation . Cette option permet au SDK Web de suivre les expériences qui ont été vues par l’utilisateur lors du chargement d’une page.

Image montrant l’option de stockage de personnalisation dans la page de configuration de l’extension de balise.

La messagerie web in-app prend en charge deux types de déclencheurs :

Reportez-vous aux sections suivantes pour configurer l’extension de balise du SDK Web en fonction des déclencheurs que vous souhaitez utiliser.

Étapes de configuration de la variable Envoi de données à Platform trigger send-data-platform

Sélectionnez la propriété de balise qui contient votre extension SDK Web, et créer une règle avec les paramètres suivants :

  1. Extension  : Core

  2. Type d’événement: Bibliothèque chargée (Haut de page)

    Image montrant l’écran de configuration de l’événement.

  3. Sélectionner Conserver les modifications pour enregistrer la configuration de l’événement.

Vous devez ensuite ajouter une action à la règle que vous avez créée.

  1. Dans le Actions , sélectionnez Ajouter.
    Image affichant l’écran de modification des règles.

  2. Utilisez ce qui suit : Action settings :

    • Extension: SDK Web Adobe Experience Platform

    • Type d’action: Envoyer un événement

      Image affichant l’écran de configuration de l’action.

  3. Dans la partie droite de l’écran, dans la Personnalisation , activez la fonction Rendu des décisions de personnalisation visuelle .
    Image montrant lécran de configuration de la personnalisation.

  4. Dans la partie droite de l’écran, dans la Contexte de décision , définissez les Clé/Valeur des paires que vous avez utilisées dans la configuration de votre campagne pour remplir les critères du message in-app.
    Image montrant lécran de configuration de la personnalisation.

  5. Sélectionner Conserver les modifications pour enregistrer votre configuration.

Vous devez ensuite ajouter la règle nouvellement créée à la bibliothèque de propriétés de balise. Pour ce faire, accédez à Flux de publication et sélectionnez la règle que vous avez créée précédemment.

Image affichant l’écran de la bibliothèque.

Après avoir ajouté la règle à la bibliothèque, sélectionnez Enregistrement et création pour le développement.

Image montrant lécran de configuration de la personnalisation.

Le processus de configuration est maintenant terminé et votre message est prêt à être présenté à vos utilisateurs.

Étapes de configuration pour l’utilisation de déclencheurs manuels manual-trigger

Sélectionnez la propriété de balise qui contient votre extension SDK Web, et créer une règle avec les paramètres suivants :

  1. Extension  : Core

  2. Type d’événement: Cliquez sur

  3. Définissez le déclencheur d’un élément spécifique sur la page, l’identifiant par un sélecteur CSS de votre choix.

    Image montrant l’écran de configuration de l’événement.

Vous devez ensuite ajouter une action à la règle que vous avez créée.

  1. Dans le Actions , sélectionnez Ajouter.
    Image affichant l’écran de modification des règles.

  2. Utilisez ce qui suit : Action settings :

    • Extension: SDK Web Adobe Experience Platform

    • Type d’action: Évaluation des jeux de règles

      Image affichant l’écran de configuration de l’action.

  3. Sur le côté droit de l’écran, activez l’option Rendu des décisions de personnalisation visuelle .
    Image montrant lécran de configuration de la personnalisation.

  4. Dans la partie droite de l’écran, dans la Contexte de décision , définissez les Clé/Valeur des paires que vous avez utilisées dans la configuration de votre campagne pour remplir les critères du message in-app.
    Image montrant lécran de configuration de la personnalisation.

  5. Sélectionner Conserver les modifications pour enregistrer votre configuration.

Vous devez ensuite ajouter la règle nouvellement créée à la bibliothèque de propriétés de balise. Pour ce faire, accédez à Flux de publication et sélectionnez la règle que vous avez créée précédemment.

Image affichant l’écran de la bibliothèque.

Après avoir ajouté la règle à la bibliothèque, sélectionnez Enregistrement et création pour le développement.

Image montrant lécran de configuration de la personnalisation.

Le processus de configuration est maintenant terminé et votre message est prêt à être présenté à vos utilisateurs.

Configuration de la messagerie web in-app à l’aide de la bibliothèque JavaScript SDK web js-library

Au lieu d’utiliser l’extension de balise du SDK Web, vous pouvez également configurer la messagerie web in-app directement à partir de la bibliothèque JavaScript du SDK Web.

Vous pouvez afficher les messages web in-app à partir de Adobe Journey Optimizer de deux manières.

Méthode 1 : récupération automatique du contenu de personnalisation automatic

Pour que le SDK Web récupère automatiquement le contenu de personnalisation au chargement de la page, utilisez la méthode sendEvent , comme illustré dans l’exemple ci-dessous.

  alloy("sendEvent", {
      renderDecisions: true,
      personalization: {
          surfaces: ['#welcome']
      }
  });

Méthode 2 : récupération manuelle du contenu de personnalisation selon l’action de l’utilisateur manual

Pour afficher le contenu de personnalisation uniquement après l’exécution d’une action spécifique par l’utilisateur, utilisez la variable evaluateRulesets comme illustré dans l’exemple ci-dessous.

Dans cet exemple, le contenu de la personnalisation s'affiche lorsqu'un utilisateur clique sur le bouton Acheter maintenant sur votre site web.

 alloy("evaluateRulesets", {
     renderDecisions: true,
     personalization: {
         decisionContext: {
             "userAction": "buy_now"
         }
     }
 });

Configuration du stockage de personnalisation personalization-storage

Vous pouvez choisir d’afficher les messages in-app aux utilisateurs pour un nombre défini de fois, ou chaque fois qu’ils visitent une page, au moyen de la variable personalizationStorageEnabled l’option de configuration.

Dans le Configuration du SDK Web définissez la variable personalizationStorageEnabled selon vos besoins :

  • personalizationStorageEnabled: true déclenche le message in-app avec la fréquence que vous avez définie dans la variable Campagne Adobe Journey Optimizer.
  • personalizationStorageEnabled: false déclenche le message in-app à chaque chargement de page.
recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636