Guide de conception d'encarts HTML5

Configurer un composant Polite Load au format HTML5 (facultatif)

Qu'est-ce que le composant Polite Load ?

Le composant Polite Load permet de retarder le chargement des éléments d'une création (tels que les images) jusqu'à la fin du chargement de la page parente.

3-part polite load image: a) website partly loaded b) website fully loaded c) full ad appears including video
blue letter A Page chargée à hauteur de 20 % : le contenu initial s'affiche.
green letter b Page chargée à hauteur de 50 % : le contenu initial reste affiché. Aucune autre action ne se produit
red letter c Page chargée à hauteur de 100 % : le contenu supplémentaire s'affiche et les autres actions se déclenchent.

Dans Studio, vous n'êtes pas obligé d'ajouter le composant Polite Load dans vos fichiers. Il est cependant possible que les spécifications des éditeurs le requièrent.

Lorsque vous utilisez cette fonctionnalité, vous pouvez concevoir votre création avec une image de préchargement initiale, attendre que le chargement de la page se termine, puis charger d'autres éléments (tels que des images, des animations ou des vidéos).

Configurer le composant Polite Load dans Google Web Designer

Lorsque vous concevez des créations dans Google Web Designer, vous ne devez pas ajouter de code. Lorsque vous publiez votre fichier (soit en local, soit directement dans Studio), cochez la case "Composant Polite Load" dans la section "Paramètres" de la boîte de dialogue "Publier" qui est présentée ci-dessous.

Publish dialog in Google Web Designer with Polite Loading checked

Utiliser une image de préchargement

Pour afficher une image initiale en attendant que la page se charge, utilisez le gestionnaire handleAdInitializedEn savoir plus

Configurer le composant Polite Load avec JavaScript

Ajoutez le code ci-dessous à votre fichier JavaScript après le code d'initialisation du composant Enabler. Ce code vérifie si la page est chargée à l'aide de la méthode isPageLoaded du composant Enabler. Cette dernière renvoie alors la valeur "true" ou "false". Si vous obtenez "true", appelez une fonction personnalisée qui charge votre création. Dans cet exemple, la fonction personnalisée est appelée politeInit. Si vous obtenez "false", écoutez l'événement PAGE_LOADED du composant Enabler avant d'appeler politeInit.

Téléchargez un exemple de création utilisant le composant Polite Load, puis ouvrez le fichier DCRM_HTML5_inPage_Polite_300x600.html afin d'afficher le code requis pour le composant Enabler.

Extrait de code utilisant le composant Polite Load 

if (Enabler.isInitialized()) {
  init();
} else {
  Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}

// S'exécute une fois le composant Enabler prêt.
function init() {
  if (Enabler.isPageLoaded()) {
    politeInit();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
  }
};

// S'exécute une fois la page complètement chargée.
function politeInit(){
  // Ajoutez votre code pour masquer une animation ou une image de chargement,
  // et pour charger les éléments de la création ou lancer son animation.
};

Utiliser une image de préchargement

Si vous souhaitez afficher une image initiale en attendant que la page se charge, vous pouvez charger l'image de préchargement, puis la masquer une fois l'événement PAGE_LOADED reçu. Dans les exemples de fichiers, l'image de chargement est appelée "loading.gif". Son ID d'élément div correspond à "loading_image_dc".

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?

Vous avez encore besoin d'aide ?

Connectez-vous pour accéder à des options d'assistance supplémentaires afin de résoudre rapidement votre problème.

Recherche
Effacer la recherche
Fermer la recherche
Applications Google
Menu principal
Rechercher dans le centre d'aide
true
74220
false