DocumentationExperience PlatformMigration de Target d’at.js 2.x vers Web SDK

Rendu des activités du Compositeur d’expérience visuelle (VEC) d’Adobe Target

Dernière mise à jour : 23 mai 2026

Créé pour :

  • Intermediate
  • Experienced
  • Developer

Les activités Target sont configurées à l’aide du compositeur d’expérience visuelle (VEC) ou du compositeur basé sur les formulaires. Platform Web SDK peut récupérer et appliquer des activités basées sur le VEC à la page tout comme at.js. Pour cette partie de la migration, vous allez :

  • Installation de l’extension de navigateur Visual Editing Helper
  • Exécutez un appel sendEvent avec Platform Web SDK pour demander des activités.
  • Mettez à jour toutes les références de votre implémentation at.js qui utilisent getOffers() pour exécuter une requête Target pageLoad.

Extension de navigateur Visual Editing Helper

L’extension de navigateur Visual Editing Helper de Adobe Experience Cloud pour Google Chrome vous permet de charger des sites web de manière fiable dans le Compositeur d’expérience visuelle (VEC) d’Adobe Target afin de créer rapidement des expériences web et une assurance qualité.

L’extension de navigateur Visual Editing Helper fonctionne avec les sites web qui utilisent at.js ou Platform Web SDK.

Procurez-vous et installez le Visual Editing Helper .

  1. Accédez à l’extension de navigateur Visual Editing Helper de Adobe Experience Cloud dans la boutique en ligne Chrome.
  2. Cliquez sur Ajouter à ​​> Ajouter une extension.
  3. Ouvrez le compositeur d’expérience visuelle dans Target.
  4. Pour utiliser l’extension, cliquez sur l’icône de l’extension de navigateur Visual Editing Helper icône Extension d’édition visuelle{modal="regular"} dans la barre d’outils de votre navigateur Chrome lorsque vous êtes en mode VEC ou en mode QA.

Le Visual Editing Helper est automatiquement activé lorsqu’un site Web est ouvert dans le VEC de Target pour alimenter la création. L’extension ne comporte aucun paramètre conditionnel. L’extension gère automatiquement tous les paramètres, y compris les paramètres des cookies SameSite.

Reportez-vous à la documentation dédiée pour plus d’informations sur l’extension Visual Editing Helper et la résolution des problèmes du compositeur d’expérience visuelle.

IMPORTANT
La nouvelle extension Visual Editing Helper remplace l’ancienne extension de navigateur Assistant du compositeur d’expérience visuelle de Target. Si l’ancienne extension d’assistance du VEC est installée, elle doit être supprimée ou désactivée avant d’utiliser l’extension Visual Editing Helper .

Demander et appliquer automatiquement du contenu

Une fois Platform Web SDK configuré sur la page, vous pouvez demander du contenu à Target. Contrairement à at.js qui peut être configuré pour demander automatiquement du contenu lors du chargement de la bibliothèque, le SDK Web Platform nécessite que vous exécutiez explicitement une commande .

Si le paramètre pageLoadEnabled de votre implémentation at.js est défini sur true, ce qui active le rendu automatique des activités basées sur le compositeur d’expérience visuelle, vous devez exécuter la commande sendEvent suivante avec le SDK Web Platform :

JavaScript
code language-javascript 
alloy("sendEvent", {
  "renderDecisions": true
});
Balises

Dans les balises, utilisez le type d’action Envoyer l’événement avec l’option ​ Rendre les décisions de personnalisation visuelle sélectionnée :

Envoyer un événement avec Rendre les décisions de personnalisation visuelle sélectionnées dans les balises{modal="regular"}

Demander et appliquer du contenu à la demande

Certaines implémentations de Target nécessitent un traitement personnalisé des offres du compositeur d’expérience visuelle avant de les appliquer à la page. Ils peuvent également demander plusieurs emplacements dans un seul appel. Dans une implémentation d’at.js, cela peut être effectué en définissant pageLoadEnabled sur false et en utilisant la fonction getOffers() pour exécuter une requête pageLoad.

Exemple d’at.js utilisant getOffers() et applyOffers() pour effectuer manuellement le rendu des activités basées sur le compositeur d’expérience visuelle
code language-javascript 
adobe.target.getOffers({
  request: {
    execute: {
      pageLoad: {}
    }
  }
}).
then(response => adobe.target.applyOffers({ response: response }));

Platform Web SDK ne comporte pas d’événement pageLoad spécifique. Toutes les requêtes de contenu Target sont contrôlées à l’aide de l’option decisionScopes avec la commande sendEvent . Le champ d’application __view__ remplit l’objectif de la demande de pageLoad.

Approche sendEvent Platform Web SDK équivalente :
  1. Exécutez une commande sendEvent qui inclut la portée de décision __view__
  2. Appliquez le contenu renvoyé à la page avec la commande applyPropositions
  3. Exécutez une commande sendEvent avec le type d’événement decisioning.propositionDisplay et les détails de la proposition pour incrémenter une impression
code language-javascript 
alloy("sendEvent", {
  // Request the special "__view__" scope for target-global-mbox / pageLoad
  decisionScopes: ["__view__"]
}).then(function(result) {
  // Check if content (propositions) were returned
  if (result.propositions) {
    var retrievedPropositions = result.propositions;
    // Apply propositions to the page
    return alloy("applyPropositions", {
      propositions: retrievedPropositions
    }).then(function(applyPropositionsResult) {
      var renderedPropositions = applyPropositionsResult.propositions;
      // Send a display notification with the sendEvent command
      alloy("sendEvent", {
        "xdm": {
          "eventType": "decisioning.propositionDisplay",
          "_experience": {
            "decisioning": {
              "propositions": renderedPropositions
            }
          }
        }
      });
    });
  }
});
NOTE
Il est possible d’effectuer manuellement le rendu des modifications effectuées dans le compositeur d’expérience visuelle. Le rendu manuel des modifications basées sur le compositeur d’expérience visuelle n’est pas courant. Vérifiez si votre implémentation at.js utilise la fonction getOffers() pour exécuter manuellement une requête Target pageLoad sans utiliser applyOffers() pour appliquer le contenu à la page.

Le SDK web de Platform offre aux développeurs une grande flexibilité pour demander et générer du contenu. Reportez-vous à la documentation dédiée sur le rendu de contenu personnalisé pour plus d’options et de détails.

Exemple d’implémentation

L’implémentation de base de Platform Web SDK est maintenant terminée.

JavaScript

Exemple JavaScript avec rendu automatique du contenu Target :

code language-html 
<!doctype html>
<html>
<head>
  <title>Example page</title>
  <!--Data Layer to enable rich data collection and targeting-->
  <script>
    var digitalData = {
      // Data layer information goes here
    };
  </script>

  <!--Third party libraries that may be used by Target offers and modifications-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
  <script>
    !function(e,a,n,t){var i=e.head;if(i){
    if (a) return;
    var o=e.createElement("style");
    o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
    (document, document.location.href.indexOf("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
  </script>

  <!--Platform Web SDK base code-->
  <script>
    !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
    []).push(o),n[o]=function(){var u=arguments;return new Promise(
    function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
    (window,["alloy"]);
  </script>

  <!--Platform Web SDK loaded asynchonously. Change the src to use the latest supported version.-->
  <script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js" async></script>

  <!--Configure Platform Web SDK then send event-->
  <script>
    alloy("configure", {
      "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
      "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
    });

    // Send an event to the Adobe edge network and render Target content automatically
    alloy("sendEvent", {
      "renderDecisions": true
    });
  </script>
</head>
<body>
  <h1 id="title">Home Page</h1><br><br>
  <p id="bodyText">Navigation</p><br><br>
  <a id="home" class="navigationLink" href="#">Home</a><br>
  <a id="pageA" class="navigationLink" href="#">Page A</a><br>
  <a id="pageB" class="navigationLink" href="#">Page B</a><br>
  <a id="pageC" class="navigationLink" href="#">Page C</a><br>
  <div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>
Balises

Exemple de page de balises avec rendu automatique du contenu de Target :

code language-html 
<!doctype html>
<html>
<head>
  <title>Example page</title>
  <!--Data Layer to enable rich data collection and targeting-->
  <script>
    var digitalData = {
      // Data layer information goes here
    };
  </script>

  <!--Third party libraries that may be used by Target offers and modifications-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
  <script>
    !function(e,a,n,t){var i=e.head;if(i){
    if (a) return;
    var o=e.createElement("style");
    o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
    (document, document.location.href.indexOf("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
  </script>

    <!--Tags Header Embed Code: REPLACE WITH THE INSTALL CODE FROM YOUR OWN ENVIRONMENT-->
    <script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
</head>
<body>
  <h1 id="title">Home Page</h1><br><br>
  <p id="bodyText">Navigation</p><br><br>
  <a id="home" class="navigationLink" href="#">Home</a><br>
  <a id="pageA" class="navigationLink" href="#">Page A</a><br>
  <a id="pageB" class="navigationLink" href="#">Page B</a><br>
  <a id="pageC" class="navigationLink" href="#">Page C</a><br>
  <div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>

Dans les balises, ajoutez l’extension Adobe Experience Platform Web SDK :

Ajouter l’extension Adobe Experience Platform Web SDK{modal="regular"}

Ajoutez les configurations souhaitées :
configuration des options de migration de l’extension de balise Web SDK{modal="regular"}

Créez une règle avec une action Envoyer l’événement et Rendre les décisions de personnalisation visuelle sélectionnée :
Envoyer un événement avec des personnalisations de rendu sélectionnées dans les balises{modal="regular"}

Découvrez ensuite comment demander et générer des activités Target basées sur des formulaires.

NOTE
Nous nous engageons à vous aider à réussir la migration de Target d’at.js vers Web SDK. Si vous rencontrez des obstacles avec votre migration ou si vous pensez qu'il manque des informations essentielles dans ce guide, veuillez nous le faire savoir en postant dans cette discussion communautaire.
recommendation-more-help
platform-learn-help-tutorial-migrate-target-websdk