Ajouter le composant Enabler

Qu'est-ce que le composant Enabler de DoubleClick ?

Le composant Enabler constitue la bibliothèque de code centrale de DoubleClick Studio. On peut le comparer au cerveau d'une création. Chaque composant Rich Media et chaque appel d'API doit passer par le composant Enabler.

Pourquoi dois-je ajouter le composant Enabler de DoubleClick ?

Le composant 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.

Comment puis-je configurer le composant Enabler ?

Dans les créations HTML5

Vous devez ajouter le composant Enabler au fichier HTML. Pour ce faire, commencez par inclure un tag de script associé au composant Enabler en l'ajoutant à l'en-tête de votre document 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, il suffit d'invoquer 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.

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.

Comment savoir si le composant Enabler a été initialisé ?

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() {
  // Lancez l'annonce, initialisez l'animation,
  // chargez les éléments d'image, appelez les méthodes Enabler,
  // et/ou incluez d'autres modules Studio.
  // Vous pouvez également démarrer le composant Polite Load.
}
Dans une création Flash (AS3)

La classe HtmlEnabler permet de diffuser des créations au sein d'un environnement HTML dans AS3.

  • Ajoutez le composant Enabler à votre fichier via ActionScript et faites glisser une instance de la bibliothèque DoubleClick Studio dans votre bibliothèque Flash.

Sélectionnez l'une des options ci-dessous pour ajouter le composant Enabler.

  • Option 1 : pour inclure le composant Enabler dans chaque fichier FLA de votre création, accédez au menu Flash Commandes > DoubleClick Studio v2, puis sélectionnez Insérer le composant HTML Enabler de Studio v2.
    1. Pour un fichier parent, cliquez sur OK lorsque le système vous demande s'il s'agit du fichier animé parent.
    2. Pour un fichier enfant, cliquez sur Annuler.
  • Au final, la classe HtmlEnabler est automatiquement importée dans la création parente. La classe ProxyEnabler, quant à elle, est directement incluse dans les créations enfants. Notez également que le composant Enabler est ajouté à votre bibliothèque Flash.
  • Option 2 : faites glisser l'icône du composant Enabler  vers la bibliothèque de vos fichiers parents et enfants, puis ajoutez le code suivant dans le fichier parent :
    import com.google.ads.studio.HtmlEnabler;HtmlEnabler;
    
    // Référencez le composant HtmlEnabler.
    var enabler:HtmlEnabler = HtmlEnabler.getInstance();
    
    // Initialisez le composant HtmlEnabler. Le mot clé "this" fait référence à l'espace de création.
    enabler.init(this);

    Ajoutez le code suivant aux éléments Flash enfants :

    import com.google.ads.studio.HtmlEnabler;ProxyEnabler;
    
    // Référencez le composant ProxyEnabler.
    var enabler:ProxyEnabler = ProxyEnabler.getInstance();
    

Quelle que soit l'option retenue pour configurer le composant Enabler, vous avez toujours la possibilité d'accéder à la classe HtmlEnabler à l'aide de la variable enabler.


La classe ProxyEnabler est obligatoire dans tous les fichiers enfants qui effectuent des appels vers l'API du composant Enabler. Cette classe sert de proxy pour tous les appels de l'API du composant Enabler parent. Contrairement au composant Enabler parent, le composant Enabler enfant ne nécessite pas d'initialisation, ce qui permet de réduire la taille du fichier de création. Il vous suffit de l'importer avant tout appel vers l'API du composant Enabler. En pratique, la classe ProxyEnabler semble envoyer les mêmes événements que le composant Enabler parent.

Android-style image of the author of this page

C'est Sarah, notre experte DoubleClick Studio, qui a rédigé cette page d'aide. Laissez un commentaire ci-dessous pour l'aider à améliorer son article.

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