Le composant Enabler constitue la bibliothèque de code centrale de 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. En ajoutant le composant Enabler, vous avez automatiquement l'assurance que votre création :
- intègre les fonctionnalités de suivi de métriques de base (durée d'affichage, nombre d'impressions et durée d'interaction, par exemple), ainsi que d'autres métriques 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.
Définir la taille de la création
Contrairement aux images et aux vidéos, les documents HTML n'ont pas de dimensions propres. Pour afficher votre annonce à la bonne taille, ajoutez une balise Meta de taille d'annonce dans la section "head" de votre fichier HTML.
Copiez l'exemple de balise Meta ci-dessous, et modifiez la largeur et la hauteur pour qu'elles correspondent à la taille de votre création.
Exemple de balise Meta de taille d'annonce pour une création de 300 x 250
<meta name="ad.size" content="width=300,height=250">
Facultatif : Définir des indicateurs expand
Voici quelques méthodes facultatives pouvant être utilisées pour déterminer le comportement des annonces expand. Si vous voulez utiliser l'une de ces méthodes, placez-les avant le code d'initialisation du composant Enabler ci-dessous. Ces méthodes sont les suivantes :
Enabler.setExpandingPixelOffsets(left:number, top:number, opt_expandedWidth:number, opt_expandedHeight:number)
Définit les décalages de l'espace de création pour les annonces expand.-
Enabler.setIsMultiDirectional(value:Boolean)
Permet à l'annonce de se déplier dans plus d'une direction. -
Enabler.setStartExpanded(startExpanded:Boolean)
Lorsque l'annonce est chargée, elle l'est avec l'expansion déjà ouverte, plutôt que d'attendre que quelqu'un le fasse.
En savoir plus sur ces méthodes dans le SDK HTML5 de Studio
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 s'il a été initialisé. La méthode renvoie alors la valeur "true" ou "false". Si vous obtenez la valeur "true", effectuez un appel pour démarrer la fonction enablerInitHandler(). Si vous obtenez "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 le composant polite loading ou initialiser l'animation,
// charger les assets image, appeler les méthodes Enabler,
// et/ou inclure d'autres modules Studio.
}
Une fois le composant Enabler initialisé, lancez l'animation, chargez vos assets image, 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.