DCO ENABLER GOOGLE WEB DESIGNER

INTRODUCTION

Ensuite, renseignez l’URL de la librairie ADventori http://adventori.com/lp/enabler/ADventori-2.0.0.js et http://adventori.com/lp/enabler/ADventori-2.0.0.css dans la partie code source du projet :

  <script src="http://adventori.com/lp/enabler/ADventori-2.0.0.js" type="text/javascript"></script>
  <link href="http://adventori.com/lp/enabler/ADventori-2.0.0.css"  type="text/css" />

GWD : PARAMÉTRAGE DE LA PUBLICATION

GÉRER LE CLIC

Bannière avec une redirection

Les 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 la taille de la créa.

Sélectionnez la zone cliquable.

Dans l’onglet événement, cliquez sur le bouton « + »

Ajoutez le code ADventori.click(); à l’événement click (voir ci dessous ):

Résultat :

Téléchargez l’exemple

Bannière avec plusieurs redirections

Une zone cliquable par produit

Dans le cas où vous avez plusieurs produits, qui ont chacun une URL de redirection :

Ajoutez le code ci-dessous et insérez le juste après l’appel de la librairie ADventori.

ADventori.initData({ items: [{"id":1,"data":{"url":"http://www.urlitem1.com"}},{"id":2,"data":{"url":"http://www.urlitem2.com"}},{"id":3,"data":{"url":"http://www.urlitem3.com"}},{"id":4,"data":{"url":"http://www.urlitem4.com"}}]});

Ce code initialise les éléments dynamiques une fois que la bannière est bien chargée.

Ensuite sur chaque zone d’items, ajoutez un événement click pour gérer la redirection et ajoutez le code suivant :ADventori.click(event,ADventori.data.items[0]); , 0 correspond au premier , 1 au deuxième…

Inspectez l’onglet code, vous devriez avoir le résultat suivant :

Résultat : 

Téléchargez l’exemple

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, date/heure, cookies, retargeting… )

Insérez le code suivant après le code html de la page (après la balise gwd-genericad) :

ADventori.initData( {"wording": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l\'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte."});
ADventori.Format.setText(document.getElementById('wording_settext'), ADventori.data.wording);

Résultat :

Téléchargez l’exemple

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 adaptText permet de réduire la taille de la police sur un élément donné, “10“ étant la taille minimum acceptée.

Le facteur de réduction permet d’optimiser l’affichage du texte et d’adapter la taille de la police en fonction de l’espace réservé au champ texte.

Dans le cas où l’ensemble du texte ne tient pas dans l’emplacement qui lui est réservé et que sa taille de police est de 15px, alors la méthode réduira cette dernière jusqu’à 10px.

Exemple :

ADventori.initData ( {"wording": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l\'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte."});
ADventori.Format.setText(document.getElementById('wording'), ADventori.data.wording);
ADventori.Display.adaptText(document.getElementById('wording'), 10);

Resultat :

Téléchargez l’exemple

Vous voulez dynamiser et adapter votre texte directement ? La méthode setAndAdaptText est faite pour vous :

ADventori.initData ( {"wording": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l\'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte."});
ADventori.Display.setAndAdaptText(document.getElementById('wording'), ADventori.data.wording);

Résultat

Téléchargez l’exemple

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 automatiquement dans sa div.

ADventori.initData ( {"wording": "Le Lorem Ipsum est simplement du faux texte employé dans la composition."});
ADventori.Format.setText(document.getElementById('votrediv'), ADventori.data.wording);
ADventori.Display.verticalAlign(document.getElementById('votrediv'));

Téléchargez l’exemple

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 définissez la valeur de l’ image (addAndAdaptImage) par défaut.

Une fois la créa dynamisée par notre AdServer, les images changeront en fonction des paramètres établis ( Géolocalisation, météo, date/heure, cookies, retargeting… ).

Pour cela, vous devez donner un width et un height à la div contenant votre image pour que celle-ci s’adapte aux dimensions voulues.

    ADventori.initData({
      "photoV": 'http://img.over-blog-kiwi.com/0/40/01/35/201301/ob_1264f6_location-voiture-guadeloupe-dacia.jpg',
      "photoH": 'http://www.alldigi.com/wp-content/uploads/2010/06/DSC_1332-1333-Panorama.jpg'
    });
    ADventori.Display.addAndAdaptImage(document.getElementById('photo-verticale'), ADventori.data.photoV, "http://img.over-blog-kiwi.com/0/40/01/35/201301/ob_1264f6_location-voiture-guadeloupe-dacia.jpg");
ADventori.Display.addAndAdaptImage(document.getElementById('photo-horizontale'), ADventori.data.photoH, "http://img.over-blog-kiwi.com/0/40/01/35/201301/ob_1264f6_location-voiture-guadeloupe-dacia.jpg");

Téléchargez l’exemple

Autres méthodes de personnalisation disponibles :

• setImageUrl(element,url,urldefault) : Cette méthode vous permet de changer l’url d’une balise image.

  Important : Si vous dynamisé une balise image , ne pas mettre l’attribut src , sinon votre navigateur fera un double chargement

• adaptImage(element,url,urldefault) : Cette méthode vous permet d’ajuster la taille de l’image par rapport à son conteneur.
• addImage(element,url,urldefault) : Cette méthode vous permet d’ajouter une image dans le conteneur spécifié.

Optimiser l’affichage des images :

Si vous souhaitez avoir un rendu plus graphique , comme par exemple couvrir toute la div avec l’image , vous pouvez utiliser les options ci-dessous :

• {fit:’cover’} : Cette méthode vous permet de couvrir toute la div par l’image (si l’image est trop grande, elle sera centrée sans prendre en compte les débordements).
• {fit:’contain’} : Cette méthode vous permet d’afficher l’image entière dans la div, c’est l’option par défaut.

Exemple :

Téléchargez l’exemple

ADventori.initData({mc_text:"CECI EST LE PREMIER TEXTE",mc_text2:'CECI EST LE DEUXIÈME TEXTE',mc_text3:'CECI EST LE TROISIÈME TEXTE'});

Vous pouvez changer vos wordings par défaut, afin de simuler vos scénarios.

Cliquez sur Display creative , les paramètres dynamiques seront transmis à la bannière.

CONTACT

Nous sommes à votre disposition pour vous aider à utiliser la librairie ADventori , contactez nous à l’adresse op@adventori.com