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

Remplacer la bibliothèque at.js par Platform Web SDK

Dernière mise à jour : 23 mai 2026

Créé pour :

  • Intermediate
  • Experienced
  • Developer

Découvrez comment remplacer votre implémentation Adobe Target sur la page pour migrer d’at.js vers Platform Web SDK. Un remplacement de base comprend les étapes suivantes :

  • Vérifiez vos paramètres d’administration Target et notez votre ID d’organisation IMS
  • Remplacez la bibliothèque at.js par le SDK Web de Platform
  • Mettez à jour le fragment de code de masquage préalable pour les implémentations synchrones de bibliothèque
  • Configuration de Platform Web SDK
NOTE
Les exemples fournis le sont à titre d’illustration et votre implémentation de Target peut varier. Si votre implémentation Target existante utilise le gestionnaire de balises de la collecte de données d’Adobe, vous pouvez également vous reporter au tutoriel Implémentation de Platform Web SDK Target pour plus d’informations.

Vérification des paramètres d’administration de Target

La première étape pour migrer Target vers Platform Web SDK consiste à passer en revue vos paramètres dans la section Administration de l’interface Target.

Mise en œuvre

Détails du compte

  • Identifiant de l’organisation IMS - Prenez note de cette valeur, car elle est nécessaire pour configurer le SDK web de Platform.
  • Prise de décision sur l’appareil - Cette fonctionnalité n’est pas prise en charge par la SDK web de Platform. Ce paramètre peut être désactivé après la migration et si vous n’utilisez plus at.js sur aucun de vos sites web ou si vous disposez de cas d’utilisation côté serveur pour la prise de décision sur l’appareil.

Méthodes de mise en œuvre

Tous les paramètres modifiables de la section Méthodes d’implémentation s’appliquent uniquement à at.js. Ces paramètres sont utilisés pour générer une bibliothèque at.js personnalisée pour votre implémentation. Consultez ces paramètres pour vérifier si vous disposez d’un code personnalisé ou définissez des cookies propriétaires et tiers pour les cas d’utilisation interdomaines.

Le paramètre Durée de vie du profil ne peut être modifié que par l’assistance clientèle d’Adobe. La durée de vie du profil du visiteur Target n’est pas affectée par votre approche d’implémentation. at.js et Platform Web SDK utilisent la même durée de vie de profil du visiteur.

Confidentialité

  • Obscurcir les adresses IP des visiteurs - Ce paramètre a un impact sur les fonctionnalités de géociblage. at.js et Platform Web SDK utilisent les mêmes paramètres d’obscurcissement des adresses IP d’arrière-plan à des fins de géociblage.

Environnements

Platform Web SDK utilise une configuration de train de données qui vous permet de définir explicitement un identifiant d’environnement pour des trains de données de développement, d’évaluation et de production distincts. Le principal cas d’utilisation de cette configuration concerne les implémentations d’applications mobiles pour lesquelles il n’existe pas d’URL afin de distinguer facilement les environnements. Le paramètre est facultatif, mais peut être utilisé pour vous assurer que toutes les requêtes sont correctement associées à l’environnement spécifié. Elle diffère d’une implémentation at.js dans laquelle vous devez attribuer des environnements Target en fonction des domaines et des règles de groupe d’hôtes.

NOTE
Si aucun identifiant d’environnement n’est spécifié dans la configuration du flux de données, Target utilise le mappage domaine-environnement comme indiqué dans la section Hôtes.

Pour plus d’informations, consultez le guide configuration des trains de données et la documentation de Target Hôtes.

Déploiement de Platform Web SDK

La fonctionnalité Target est fournie par at.js et Platform Web SDK. Si les deux bibliothèques sont utilisées en même temps, vous pouvez rencontrer des problèmes de rendu et de suivi. Pour réussir la migration vers Platform Web SDK, la première étape consiste à supprimer at.js et à le remplacer par Platform Web SDK (alloy.js).

Supposons une implémentation simple de Target avec at.js :

  • Une couche de données située en haut de la page fournit des informations pour Target et d’autres applications
  • Une ou plusieurs bibliothèques d’assistance tierces dont les fonctionnalités peuvent être utilisées dans les activités Target (par exemple, jQuery)
  • Extrait de code de masquage préalable pour atténuer le scintillement
  • La bibliothèque at.js de Target se charge de manière asynchrone avec les paramètres par défaut pour demander et générer automatiquement des activités :
Exemple d’implémentation d’at.js sur une page HTML
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 deployment-->
  <script>
    ;(function(win, doc, style, timeout) {
      var STYLE_ID = 'at-body-style';

      function getParent() {
        return doc.getElementsByTagName('head')[0];
      }

      function addStyle(parent, id, def) {
        if (!parent) {
          return;
        }
        var style = doc.createElement('style');
        style.id = id;
        style.innerHTML = def;
        parent.appendChild(style);
      }

      function removeStyle(parent, id) {
        if (!parent) {
          return;
        }
        var style = doc.getElementById(id);
        if (!style) {
          return;
        }
        parent.removeChild(style);
      }
      addStyle(getParent(), STYLE_ID, style);
      setTimeout(function() {
        removeStyle(getParent(), STYLE_ID);
      }, timeout);
    }(window, document, "body {opacity: 0 !important}", 3000));
  </script>
  <!--Target at.js library loaded asynchonously-->
  <script src="/libraries/at.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>Homepage Hero Banner Content</div>
</body>
</html>

Pour mettre à niveau Target afin d’utiliser Platform Web SDK, supprimez d’abord at.js :

<!--Target at.js library loaded asynchonously-->
<script src="/libraries/at.js" async></script>

Et remplacez par la bibliothèque JavaScript d’alliage ou par votre code incorporé de balises et l’extension Adobe Experience Platform Web SDK :

JavaScript
code language-html 
<!--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.13.1/alloy.min.js" async></script>
Balises
code language-html 
<!--Tags Header Embed Code: REPLACE WITH THE INSTALL CODE FROM YOUR OWN ENVIRONMENT-->
<script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>

Dans la propriété de balise, ajoutez l’extension Adobe Experience Platform Web SDK :

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

La version autonome prédéfinie nécessite l’ajout direct d’un « code de base » à la page, ce qui crée une fonction globale nommée « alloy ». Utilisez cette fonction pour interagir avec le SDK. Si vous souhaitez attribuer un autre nom à la fonction globale, modifiez le nom du alloy.

Reportez-vous à la documentation Installation de Platform Web SDK pour plus d’informations et d’options de déploiement.

Mettre à jour l’approche de masquage préalable du contenu

L’implémentation de Platform Web SDK peut nécessiter un fragment de code de masquage préalable, selon que la bibliothèque est chargée de manière asynchrone ou synchrone.

Implémentation asynchrone

Tout comme avec at.js, si la bibliothèque SDK Web Platform se charge de manière asynchrone, le rendu de la page peut se terminer avant que Target n’ait effectué un échange de contenu. Ce comportement peut entraîner un « scintillement », c’est-à-dire que le contenu par défaut s’affiche brièvement avant d’être remplacé par le contenu personnalisé spécifié par Target. Pour éviter ce scintillement, Adobe recommande d’ajouter un fragment de code spécial de masquage préalable juste avant la référence asynchrone du script Web SDK Platform ou le code intégré de balises.

Si votre implémentation est asynchrone, comme dans les exemples ci-dessus, remplacez le fragment de code de masquage préalable at.js par la version ci-dessous compatible avec le SDK Web Platform :

<!--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>

Le fragment de code de masquage préalable crée une balise de style dans l’en-tête de la page avec la définition CSS de votre choix. Cette balise de style est supprimée lorsqu’une réponse de Target est reçue ou que le délai d’expiration est atteint.

Le comportement de prémasquage est contrôlé par deux configurations à l’extrémité du fragment de code.

  • body { opacity: 0 !important } spécifie la définition CSS à utiliser pour le masquage préalable jusqu’au chargement de Target. Par défaut, la page entière est masquée. Vous pouvez mettre à jour cette définition pour les sélecteurs que vous souhaitez prémasquer, ainsi que la manière dont vous souhaitez les masquer. Vous pouvez inclure plusieurs définitions, car cette valeur correspond simplement à ce qui est inséré dans la balise de style de masquage préalable. Si vous disposez d’un élément de conteneur facilement identifiable qui enveloppe le contenu sous votre navigation, vous pouvez utiliser ce paramètre pour limiter le masquage préalable à cet élément de conteneur.

  • 3000 indique le délai d’expiration du masquage préalable, en millisecondes. Si aucune réponse de Target n’est reçue avant la temporisation, la balise de style de masquage préalable est supprimée. Atteindre ce délai d’expiration devrait être rare.

IMPORTANT
Veillez à utiliser le fragment de code correct pour Platform Web SDK, car il utilise un identifiant de style différent de alloy-prehiding. Si le fragment de code de masquage préalable pour at.js est utilisé, il se peut qu’il ne fonctionne pas correctement.

Implémentation synchrone

Adobe recommande d’implémenter Platform Web SDK de manière asynchrone pour de meilleures performances globales des pages. Cependant, si le code incorporé de la bibliothèque alloy.js ou des balises est chargé de manière synchrone, le fragment de code de masquage préalable n’est pas requis. Au lieu de cela, le style de masquage préalable est spécifié dans la configuration de Platform Web SDK.

Le style de prémasquage des implémentations synchrones peut être configuré à l’aide de l’option prehidingStyle. La configuration de Platform Web SDK est traitée dans la section suivante.

Pour en savoir plus sur la manière dont Platform Web SDK peut gérer le scintillement, vous pouvez vous reporter à la section du guide : ​ Gestion du scintillement pour les expériences personnalisées ​

Configuration de Platform Web SDK

Platform Web SDK doit être configuré à chaque chargement de page. L’exemple suivant suppose que l’ensemble du site est mis à niveau vers Platform Web SDK dans un seul déploiement :

JavaScript

La commande configure doit toujours être la première commande SDK appelée. L’edgeConfigId est l’identifiant Datastream

code language-javascript 
alloy("configure", {
  "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
  "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
});
Balises

Dans les implémentations de balises, de nombreux champs sont automatiquement renseignés ou peuvent être sélectionnés dans les menus déroulants. Notez que différents sandbox et flux de données de Platform peuvent être sélectionnés pour chaque environnement. Le flux de données change en fonction du statut de la bibliothèque de balises dans le processus de publication.

configuration de l’extension de balise Web SDK{modal="regular"}

Si vous prévoyez de migrer d’at.js vers Platform Web SDK page par page, les options de configuration suivantes sont requises :

JavaScript
code language-javascript 
alloy("configure", {
  "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
  "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg",
  "targetMigrationEnabled":true,
  "idMigrationEnabled":true
});
Balises
configuration des options de migration de l’extension de balise Web SDK{modal="regular"}

Les options de configuration intéressantes liées à Target sont décrites ci-dessous :

Option
Description
Exemple de valeur
edgeConfigId
Identifiant du flux de données
ebebf826-a01f-4458-8cec-ef61de241c93
orgId
ID d’organisation Adobe Experience Cloud
ADB3LETTERSANDNUMBERS@AdobeOrg
targetMigrationEnabled
Utilisez cette option pour permettre à Web SDK de lire et d’écrire les cookies mbox et mboxEdgeCluster hérités utilisés par at.js. Cela vous permet de conserver le profil du visiteur lors du passage d’une page qui utilise Web SDK à une page qui utilise la bibliothèque at.js et inversement.
true
idMigrationEnabled
Si la valeur est true, le SDK lit et définit les anciens cookies AMCV. Cette option permet de passer à l’utilisation de Platform Web SDK alors que certaines parties du site peuvent toujours utiliser Visitor.js.
true
thirdPartyCookiesEnabled
Active le paramètre des cookies tiers Adobe. Le SDK peut conserver l’identifiant visiteur dans un contexte tiers afin de permettre l’utilisation du même identifiant visiteur sur plusieurs sites. Utilisez cette option si vous disposez de plusieurs sites. Cependant, cette option n’est parfois pas souhaitée pour des raisons de confidentialité.
true
prehidingStyle
Permet de créer une définition de style CSS qui masque les zones de contenu de votre page web pendant le chargement du contenu personnalisé à partir du serveur. Cette fonction n’est utilisée qu’avec les déploiements synchrones du SDK.
body { opacity: 0 !important }

Pour obtenir la liste complète des options, reportez-vous au guide configuration de Platform Web SDK.

Exemple d’implémentation

Une fois que Platform Web SDK est correctement en place, la page d’exemple ressemble à ceci.

JavaScript
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.13.1/alloy.min.js" async></script>

  <!--Configure Platform Web SDK-->
  <script>
    alloy("configure", {
      "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
      "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
    });
  </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

Code de page :

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"}

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

Il est important de noter que le simple fait d’inclure et de configurer la bibliothèque SDK Web Platform comme illustré ci-dessus n’exécute aucun appel réseau à Adobe Edge Network.

Découvrez ensuite comment demander et appliquer des activités basées sur le compositeur d’expérience visuelle à la page.

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