Déployer l'extrait anti-clignotement

Si vous voyez une page clignoter, vous pouvez essayer de résoudre le problème en ajoutant cet extrait.

Présentation

Si vous suivez les instructions de nos articles consacrés à l'installation des extraits et nos bonnes pratiques concernant l'emplacement des extraits (ci-dessous), votre page Web devrait charger Optimize avant toute autre ressource requise pour l'afficher. Votre page ne devrait alors plus clignoter et vous ne devriez pas avoir à déployer l'extrait anti-clignotement.

Une page Web clignote lorsqu'elle s'affiche brièvement avec les styles par défaut du navigateur, et que le chargement d'une feuille de style CSS externe la force à s'afficher de nouveau, entraînant un "saut" momentané des éléments restylés sur la page.

La méthode la plus efficace pour atténuer le clignotement de page lors du chargement d'Optimize consiste à masquer temporairement la page pendant que le conteneur Optimize charge. Pour ce faire, vous devez ajouter l'extrait anti-clignotement en tant que premier script de la page.

Si vous voyez une page clignoter, vérifiez que vous avez bien suivi toutes les étapes présentées dans les articles consacrés à l'insertion des extraits (ainsi que les bonnes pratiques) avant de passer à d'autres étapes de dépannage.

En particulier, assurez-vous d'avoir inséré l'extrait Optimize aussi haut que possible dans la section <HEAD> de votre page HTML. Le fait de placer l'extrait au début de la section <HEAD> permet de corriger la plupart des problèmes de clignotement.

Audience

Cet article s'adresse aux clients qui ont constaté un clignotement de leurs pages utilisant Optimize.

N'installez pas l'extrait anti-clignotement :

  • si votre extrait Optimize ne se trouve pas au début de la section <HEAD> ;
  • si vous n'avez pas observé de clignotement de la page ;
  • si vous utilisez des événements d'activation qui ne déclenchent pas de modifications lors du premier chargement ;
  • avec un système de gestion de balises (TMS) tel que Google Tag Manager (GTM).

Extrait anti-clignotement avec un TMS ?

N'installez pas l'extrait anti-clignotement à l'aide d'un système de gestion de balises (TMS) tel que Google Tag Manager (GTM).
Vous devez insérer l'extrait anti-clignotement directement sur la page, et non par le biais d'un système de gestion de balises ou d'un autre script asynchrone. Si vous ne parvenez pas à insérer l'extrait anti-clignotement directement sur la page, vous devez l'ignorer complètement.

Remédier au clignotement de page

Si, après avoir suivi les étapes ci-dessus, vous voyez toujours la page clignoter, vous pouvez y remédier en la cachant temporairement lors du chargement des conteneurs Optimize. Pour ce faire, vous devez ajouter l'extrait anti-clignotement en tant que premier script de la page.

Explications

Optimize présente des variantes de votre site Web aux visiteurs en modifiant le DOM (Document Object Model). Dans certains cas, il modifie des éléments déjà visibles par l'utilisateur final. Ces modifications visibles sont désignées par le terme "clignotement de page".

Un clignotement de page se produit lorsqu'une page Web s'affiche brièvement avec les styles par défaut du navigateur, et que le chargement d'une feuille de style CSS externe la force à s'afficher de nouveau, entraînant un "saut" momentané des éléments restylés sur la page.

Déployer l'extrait anti-clignotement

Pour insérer l'extrait anti-clignotement, procédez comme suit :

  1. Copiez le code complet ci-dessous et ajoutez-le à chaque page avec Optimize, dès que possible dans la section <HEAD>, mais après la déclaration dataLayer si elle est utilisée.
  2. Assurez-vous que votre extrait Optimize ou le conteneur Tag Manager se trouve juste après l'extrait anti-clignotement.

Exemple : Extrait anti-clignotement

<HTML>
<HEAD>
<!-- anti-flicker snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'CONTAINER_ID':true});</script>

Remarque : Remplacez CONTAINER_ID par l'ID de votre conteneur Optimize. Si vous utilisez Google Tag Manager pour déployer Optimize, remplacez CONTAINER_ID par l'ID de votre conteneur Tag Manager.

La déclaration dataLayer doit être initialisée au-dessus de l'extrait anti-clignotement pour que les performances de votre site ne soient pas affectées. Ne remplacez pas les valeurs de la couche de données plus loin sur la page.

Bonnes pratiques concernant l'emplacement des extraits

Pour optimiser les performances, insérez l'extrait Optimize en haut de la balise <HEAD> sur chaque page Web que vous souhaitez optimiser.

Seuls les éléments suivants peuvent figurer au-dessus de l'extrait Optimize :

  1. Les codes d'initialisation dataLayer. Remarque : la variable dataLayer ne doit jamais être réattribuée après l'extrait anti-clignotement (lorsque celui-ci est utilisé).
  2. Les scripts déclarant les variables et fonctions JavaScript, ou définissant les cookies que vous utilisez dans Optimize, tels que les bibliothèques jQuery ou JavaScript utilisées pour l'implémentation ou le ciblage Remarque : Optimize n'installe pas jQuery par défaut.
  3. L'extrait anti-clignotement qui peut être utilisé de manière facultative pour remédier au clignotement de page

Personnaliser l'extrait anti-clignotement

L'extrait anti-clignotement inclut une fonctionnalité de temporisation modifiable qui cesse d'appliquer les modifications du test après un certain laps de temps. Une fois le délai arrivé à expiration, la page s'affiche et l'utilisateur ne voit pas la version testée. C'est le contenu par défaut qui lui est présenté.

En savoir plus sur la personnalisation de l'extrait anti-clignotement

Utilisateurs de Tag Manager

Remarque : Si vous utilisez Google Tag Manager pour déployer Optimize, insérez l'extrait anti-clignotement avec votre ID de conteneur Tag Manager, plutôt qu'avec votre ID de conteneur Optimize.

L'ajout de la balise Optimize à votre conteneur Tag Manager empêchera le clignotement de page jusqu'au chargement d'Optimize, et il n'y aura aucune incidence sur la page si vous désactivez ultérieurement la balise.

En savoir plus sur l'intégration d'Optimize via Google Tag Manager

Appellation

Le clignotement de page s'appelle également clignotement JavaScript, clignotement DOM, FOUC (Flash of Unstyled Content) et FOUT (Flash of Unstyled Text). L'extrait d'occultation de page était auparavant appelé extrait anti-clignotement.

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?
Recherche
Effacer la recherche
Fermer le champ de recherche
Applications Google
Menu principal
Rechercher dans le centre d'aide
true
101337
false