ENABLER HTML5

Documentation DCO Enabler -> ENABLER HTML5

INTRODUCTION

ADventori-HTML-Logo

La technologie ADventori permet de dynamiser les publicités HTML5. Le point de départ est une créa respectant les standards IAB :

  • Elle doit être sous la forme d’un fichier zip comprenant un seul fichier HTML et tous les éléments nécessaires (img, js, css).

  • Les URLs dans le fichier HTML doivent toutes être relatives.

  • Pour accélérer l’adserving, JavaScript et CSS peuvent être présents directement dans le fichier HTML principal, et les images plus petites être encodées en base64 dans le HTML.

  • ADventori n’est pas limité sur le poids de la création, mais pour optimiser la livraison, nous recommandons de garder un poids sous les 200kbytes.

Vous trouverez un excellent tutoriel HTML5 dans ce href= »http://media.admob.com/mobile_ad_guide/ »>guide rédigé par AdMob.

Attention

  • N’oubliez pas le GIF de backup pour chaque format.
  • Les bannières ne doivent pas intégrer de ClickTag ni de ClickCommand venant d’un autre AdServer. Ils seront intégrés via la bibliothèque ADventori dans une étape suivante.
  • Il est important de respecter la même convention de nommage pour les différents assets entre les différents formats.
  • Si nous devons récupérer les images sur un serveur externe, il faut que celui si fonctionne en secure, dans le cas contraire, il y a un rejet lors de l’audit.
Nous sommes à votre disposition pour vous aider dans l’utilisation de la librairie ADventori, contactez nous sur op@adventori.com pour toute question.

 

Bases

INSTALLATION DE L’ENABLER

INSTALLATION DE L’ENABLER

Documentation DCO Enabler -> ENABLER HTML5 -> INSTALLATION DE L’ENABLER INSTALLATION DE L’ENABLER ADVENTORIL’Enabler ADventori est une bibliothèque JS simple : vous devez insérer la bibliothèque dans votre création pour qu’elle puisse interagir avec notre AdServer. La bibliothèque crée un namespace ADventori et fournit un CSS Reset léger. Voici le code à insérer :<head> <script … Continued

Gérer le Clic

Gérer le Clic

Documentation DCO Enabler -> ENABLER HTML5 -> Gérer le Clic GÉRER LE CLIC Bannière avec une redirectionLes clics sur la publicité doivent être envoyés à l’AdServer, pour les comptabiliser et renvoyer l’internaute vers la bonne page.Une balise <a> devra englober le contenu de votre création, placée en display:block;avec width:100%; et height:100%. Voici un exemple :See the … Continued

Les paramètres Dynamiques

Les paramètres Dynamiques

Documentation DCO Enabler -> ENABLER HTML5 -> Les paramètres Dynamiques LES PARAMÈTRES DYNAMIQUES Les valeurs dynamiques sont disponibles dans une map data.Pour tester votre publicité, vous pouvez mettre des valeurs par défaut après avoir inséré le script. Ces valeurs seront automatiquement remplacées par des valeurs dynamiques au moment de l’AdServing.<script src= »https://adventori.com/lp/enabler/ADventori-2.0.0.js » type= »text/javascript »></script> <script type= »text/javascript »> ADventori.initData( {‘wording’:’Lorem … Continued

Page de test

Page de test

tester et valider la dynamisation de vôtre bannière

Dynamisation du Texte

Dynamiser une zone de Texte

Dynamiser une zone de Texte

Documentation DCO Enabler -> ENABLER HTML5 -> Dynamiser une zone de Texte DYNAMISER UNE ZONE DE TEXTE Pour créer un tag HTML dynamique, ajoutez un attribut id unique ou attribut de class, et définissez la valeur du texte (setText).Une fois la créa dynamisée par notre AdServer, les textes changeront en fonction des paramètres établis ( Géolocalisation, … Continued

Adapter la taille du Texte

Adapter la taille du Texte

Documentation DCO Enabler -> ENABLER HTML5 -> Adapter la taille du Texte ADAPTER LA TAILLE DU TEXTE Si vous voulez insérer du texte dynamique dans votre publicité, mais que ce texte risque de prendre, dans certains cas, plus de place que l’espace qui lui est réservé dans sa div, vous pouvez utiliser la méthode adaptText.La méthode … Continued

Aligner verticalement du texte

Aligner verticalement du texte

Documentation DCO Enabler -> ENABLER HTML5 -> Aligner verticalement du texte ALIGNER VERTICALEMENT VOTRE TEXTE Vous avez une bannière publicitaire avec des textes différents à afficher en fonction de vos scénarios de campagne et vous voulez que ceux-ci se centrent automatiquement dans leur div.La méthode verticalAlign permet d’adapter verticalement un bloc de texte et le centre … Continued

Dynamisation des Images

Dynamiser et adapter la taille d’une image

Dynamiser et adapter la taille d’une image

Documentation DCO Enabler -> ENABLER HTML5 -> Dynamiser et adapter la taille d’une image DYNAMISER ET ADAPTER LA TAILLE D’UNE IMAGE Il est possible de dynamiser les images de votre publicité sans que celles-ci soient déformées et en gardant leur entière visibilité.Pour créer une zone d’images dynamiques et redimensionnables , ajoutez un attribut id unique, et … Continued

Composants

Carousel ADventori

Carousel ADventori

Documentation DCO Enabler -> ENABLER HTML5 -> Carousel ADventori CRÉER VOTRE CAROUSEL Vous pouvez créer votre propre Carousel grâce à notre enabler et ce de manière très simple : See the Pen adaptImg V2 by ADventori (@adventori) on CodePen. Déclarons tous d’abord nos éléments html:myAd : div qui contiendra notre Publicité .myBrand : div qui contiendra … Continued

SlidingBanner ADventori

SlidingBanner ADventori

SlidingBanner ADventori Le slidingBanner d’ADventori vous permet d’avoir une bannière avec deux calques superposés. Pour que le deuxième calque soit visible, une interaction utilisateur doit avoir lieu : soit lors du survol de la bannière avec la souris, soit au balayement du doigt sur un appareil tactile. Ce format est plus adapté aux grands formats … Continued

Dynamiser une carte GoogleMaps

Dynamiser une carte GoogleMaps

Dynamiser les StaticMap() ou DynamicMap() de l’API GoogleMapsL’enabler ADventori vous permet d’ajouter facilement une carte google maps (statique ou dynamique).Clé d’autorisation Google : Avant d’utiliser le service google maps vous devez générer une clé de sécurité google maps à cette adresse, et activer le service approprié (static map ou javascript google API).Condition d’utilisation du service … Continued

visibilité

visibilité

GERER LA VISIBILITELa gestion de la visibilité vous permet de jouer l’animation d’une créa uniquement lorsque celle-ci est visible.Pour implémenter cette solution, nous devons gérer l’événement de visibilité dans la bannière et exécuter l’animation lorsque l’événement est capturé.Cas où la bannière n’est pas visible :Avant toute chose , vous devez modifier votre bannière pour l’affichage … Continued

AJOUTER UNE VIDEO

AJOUTER UNE VIDEO

Documentation DCO Enabler -> ENABLER HTML5 -> AJOUTER UNE VIDEO DYNAMISER ET ADAPTER LA TAILLE D’UNE VIDEO Il est possible de dynamiser la vidéo de votre publicité sans que celle-ci soit déformée, et en gardant son entière visibilité.Une fois la bannière dynamisée par notre AdServer, la vidéo changera en fonction des paramètres établis (Géolocalisation, météo, date/heure, cookies, … Continued