Recherche
Effacer la recherche
Fermer la recherche
Applications Google
Menu principal

Guide de conception d'encarts HTML5

Ajouter le composant Enabler HTML5

Le composant Enabler constitue la bibliothèque de code centrale de DoubleClick Studio. On peut le comparer au cerveau d'une création. Tous les composants et appels d'API doivent passer par le composant Enabler. La bibliothèque Enabler est obligatoire pour toutes les créations rich media. Grâce au composant Enabler, votre création :

  • intègre les fonctionnalités de suivi de statistiques de base (durée d'affichage, nombre d'impressions et durée d'interaction, par exemple), ainsi que d'autres statistiques standards ;
  • est compatible avec des fonctionnalités plus complexes, comme la vidéo et la fonction expand.

Ajouter le composant Enabler

Ajoutez un tag de script relié au composant Enabler dans la balise <head> de votre fichier HTML :

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

Ce code permet de définir un objet singleton dans l'espace de noms global Enabler. Pour appeler des méthodes sur cet objet, invoquez Enabler.isInitialized(), Enabler.exit(), etc.

Patienter jusqu'à l'initialisation du composant Enabler

Aucun élément de l'annonce ne doit s'exécuter automatiquement tant que le composant Enabler n'est pas initialisé. L'objectif est de garantir le chargement correct de l'ensemble des éléments, ainsi que l'accès aux méthodes Enabler avant toute interaction d'un internaute avec l'annonce.

Dans le code JavaScript, utilisez la méthode isInitialized du composant Enabler pour vérifier si ce dernier a été initialisé. La méthode renvoie alors la valeur "true" ou "false". Si vous obtenez "true", effectuez un appel pour démarrer la fonction (enablerInitHandler() dans l'exemple suivant). Si vous obtenez la valeur "false", effectuez un appel de remplacement pour écouter l'événement INIT du composant Enabler :

// Si la valeur est "true", démarrez la fonction. Si la valeur est "false", écoutez INIT.
window.onload = function() {
  if (Enabler.isInitialized()) {
    enablerInitHandler();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
  }
}

function enablerInitHandler() {
  // Lancer l'annonce, initialiser l'animation,
  // charger les éléments graphiques, appeler les méthodes Enabler,
  // et/ou inclure d'autres modules Studio.
  // Vous pouvez également démarrer le composant Polite Load.
}

Une fois le composant Enabler initialisé, lancez l'animation, chargez vos éléments graphiques, puis appelez les méthodes de suivi ou incluez d'autres modules Studio.

Mettre à jour le composant Enabler

Lorsqu'une nouvelle version du composant Enabler est disponible, un message vous avertit que la version du composant Enabler de votre création est obsolète dans l'interface utilisateur de Studio. Pour procéder à la mise à niveau vers la dernière version du composant Enabler, importez à nouveau le fichier HTML de base de la création.

Cet article vous a-t-il été utile ?