CREATIVE LAB

ENABLER GOOGLE WEB DESIGNER

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER

INTRODUCTION

ADventori-GWD-Logo

Dans ce tutoriel, nous allons vous montrer comment intégrer la librairie ADventori sous Google Web Designer 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-ci 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 GOOGLE WEB DESIGNER -> INSTALLATION DE L’ENABLER INSTALLATION DE L’ENABLER ADVENTORICréez un nouveau projet Google Web Designer (Fichier –> Nouveau–>Bannière ), dans la section Environnement, cliquez sur Annonce autre que Google et validez.Ensuite, renseignez l’URL de la librairie ADventori https://cf-cdn.adventori.com/lp/enabler/ADventori-2.0.0.js et https://cf-cdn.adventori.com/lp/enabler/ADventori-2.0.0.css dans la partie code source du projet : … Continued

Gérer le Clic

Gérer le Clic

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> 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.Vous devez d’abord installer une Zone cliquable disponible dans le panneau « Composants ». Initialisez cette zone cliquable à 100% de … Continued

Les Paramètres Dynamiques

Les Paramètres Dynamiques

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> Les Paramètres Dynamiques Les Paramètres Dynamiques Insérez les paramètres dynamiques après le code HTML de la bannière ( c’est à dire après la balise  gwd-genericad) 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 … 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 GOOGLE WEB DESIGNER -> 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, … Continued

Adapter la taille du texte

Adapter la taille du texte

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> 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éthode … Continued

Aligner verticalement du texte

Aligner verticalement du texte

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> 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 … Continued

Dynamisation des Images

Dynamiser et adapter la taille d’une image

Dynamiser et adapter la taille d’une image

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> 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, … Continued

Composants

Carousel ADventori

Carousel ADventori

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> Carousel ADventori CRÉER VOTRE CAROUSELVous pouvez créer votre propre Carousel grâce à notre enabler et ce de manière très simple : Première étape : Initialisez un projet Non Google Ad et installez notre enabler (plus de détails ici). Deuxième étape :Créez votre bannière, prévoyez y un container qui … 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 implementer cette solution , nous devons gérer l’événement de visibilité dans la bannière et exécuter l’animation lorsque l’evenement est capturé.Cas où la bannière n’est pas visible :Avant toute chose , vous devez modifier votre bannière pour … Continued

AJOUTER UNE VIDEO

AJOUTER UNE VIDEO

Documentation DCO Enabler -> ENABLER GOOGLE WEB DESIGNER -> 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, … Continued