CREATIVE LAB

ENABLER ADOBE EDGE

Documentation DCO Enabler -> ENABLER ADOBE EDGE

INTRODUCTION

ADventori-EdgeAnimate-Logo

Dans ce tutoriel, nous allons vous montrer comment intégrer la librairie ADventori sous Adobe Edge Animate CC pour 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. 
  • 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.
  • 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.

 

Attention 

  • N’oubliez pas le GIF de backup pour chaque format.
  • Il est important de respecter la même convention de nommage pour les différents assets entre les différents formats.
  • Les bannières ne doivent pas intégrer de ClickTag ni de ClickCommand. Ils seront intégrés via la bibliothèque ADventori dans une étape suivante.
  • 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, pour toute question, contactez nous sur op@adventori.com

Bases

INSTALLATION DE L’ENABLER

INSTALLATION DE L’ENABLER

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> INSTALLATION DE L’ENABLER INSTALLATION DE L’ENABLER ADVENTORICréez un nouveau projet Edge (Fichier –> Nouveau ), dans la section Bibliothèque, cliquez sur Scripts et Ajouter un fichier JS depuis une URL…Ensuite, renseignez l’Url de la librairie ADventori https://adventori.com/lp/enabler/ADventori-2.0.0.js et https://adventori.com/lp/enabler/ADventori-2.0.0.css Les liens vers la librairie doivent apparaître comme ceci :EDGE : … Continued

Gérer le Clic

Gérer le Clic

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> 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.Sélectionnez le Stage de la publicité, cliquez sur {} et choisissez l’événement clickAjoutez le code ADventori.click();à votre fonction.Résultat: Télécharger l’exempleBannière … Continued

Les paramètres Dynamiques

Les paramètres Dynamiques

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> 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 dans l’évenement compositionReady. Ces valeurs seront automatiquement remplacées par des valeurs dynamiques au moment de l’AdServing.ADventori.initData( {‘wording’:’Lorem Ipsum’, … 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 ADOBE EDGE -> Dynamiser une zone de Texte DYNAMISER UNE ZONE DE TEXTE Pour créer un tag HTML dynamique, ajoutez un attribut id unique (champ propriétés), 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, météo, … Continued

Adapter la taille du Texte

Adapter la taille du Texte

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> Adapter la taille du Texte ADAPTER LA TAILLE DU TEXTESi 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éthodeadaptText.La méthode … Continued

ALIGNER VERTICALEMENT VOTRE TEXTE

ALIGNER VERTICALEMENT VOTRE TEXTE

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> ALIGNER VERTICALEMENT VOTRE 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 … Continued

Dynamisation des images

Dynamiser et adapter la taille d’une image

Dynamiser et adapter la taille d’une image

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> 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

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

AJOUTER UNE VIDEO

AJOUTER UNE VIDEO

Documentation DCO Enabler -> ENABLER ADOBE EDGE -> 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, … Continued