Gestion du scintillement par at.js

Dernière mise à jour : 5 mai 2025
  • Rubriques :

Créé pour :

  • Développeur

Informations sur la façon dont la bibliothèque JavaScript at.js Adobe Target empêche le scintillement lors du chargement de la page ou de l’application.

Il y a scintillement lorsque du contenu par défaut est présenté temporairement aux visiteurs avant d’être remplacé par le contenu de l’activité. Ce phénomène peut déstabiliser les visiteurs et doit donc être évité.

Utilisation d’une mbox globale créée automatiquement

Lorsque vous activez la Création automatique d’une Mbox globale lors de la configuration d’at.js, ce dernier gère le scintillement en modifiant le paramètre d’opacité au chargement de la page. Au chargement d’at.js, le paramètre d’opacité de l’élément <body> est remplacé par "0", ce qui rend la page initialement invisible pour les visiteurs. Après réception d’une réponse de Target, ou si une erreur avec la requête Target est détectée, at.js réinitialise l’opacité sur "1". Ainsi, le visiteur ne voit la page qu’une fois le contenu de vos activités appliqué.

Si vous activez le paramètre lors de la configuration de at.js, at.js définit l’opacité du style HTML BODY sur 0. Après réception d’une réponse de Target, at.js réinitialise l’opacité de l’HTML BODY sur 1.

L’opacité définie sur 0 conserve le contenu de la page masqué pour empêcher le scintillement, mais le navigateur effectue toujours le rendu de la page et charge tous les éléments nécessaires tels que CSS, les images, etc.

Si opacity: 0 ne fonctionne pas dans votre implémentation, vous pouvez également gérer le scintillement en personnalisant bodyHiddenStyle et en le définissant sur body {visibility:hidden !important}. Vous pouvez utiliser body {opacity:0 !important} ou body {visibility:hidden !important}, selon ce qui fonctionne le mieux dans votre situation spécifique.

L’illustration suivante présente les appels à Masquer/Afficher le corps dans at.js 1.x et at.js 2.x.

at.js 2.x

(Cliquez sur l’image pour agrandir l’image en largeur réelle.)

Flux cible : requête de chargement de page at.js

at.js 1.x

(Cliquez sur l’image pour agrandir l’image en largeur réelle.)

![ Flux cible : flux cible créé automatiquement : flux cible créé automatiquement : mbox globale créée automatiquement “){zoomable=“yes”}] (https://experienceleague.adobe.com/docs/target-dev/dev/implement/client-side/atjs/how-atjs-works/assets/target-flow2.png?lang=fr”

Pour plus d’informations sur le remplacement de bodyHiddenStyle, voir targetGlobalSettings().

Gestion du scintillement lors du chargement asynchrone du fichier at.js

Le chargement d’at.js de manière asynchrone est un excellent moyen d’éviter de bloquer le rendu du navigateur. Cependant, cette technique peut entraîner un scintillement de la page web.

Vous pouvez éviter le scintillement en utilisant un fragment de code de pré-masquage qui sera visible une fois les éléments d’HTML pertinents personnalisés par Target.

at.js peut être chargé de manière asynchrone, soit directement incorporé sur la page, soit via un gestionnaire de balises (Adobe Experience Platform Launch, par exemple).

Si at.js est incorporé à la page, le fragment de code doit être ajouté avant de charger at.js. Si vous chargez at.js via un gestionnaire de balises, qui est également chargé de manière asynchrone, vous devez ajouter le fragment de code avant de charger le gestionnaire de balises. Si le gestionnaire de balises est chargé de manière synchrone, le script peut être inclus dans le gestionnaire de balises avant at.js.

Le fragment de code de pré-masquage se présente comme suit :

;(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));

Par défaut, le fragment de code masque préalablement l’ensemble HTML BODY. Dans certains cas, vous souhaitez uniquement masquer préalablement certains éléments HTML et non la totalité de la page. Vous pouvez y parvenir en personnalisant le paramètre de style. Il peut être remplacé par un élément qui masque préalablement seulement des régions spécifiques de la page.

Par exemple, vous disposez de deux régions identifiées par les ID container-1 et container-2, alors le style peut être remplacé par ce qui suit :

#container-1, #container-2 {opacity: 0 !important}

Au lieu de la valeur par défaut :

body {opacity: 0 !important}