Sizmek AdBuilder pour In-Stream

Sizmek AdBuilder

AdBuilder est le banner-maker Sizmek pour la production de bannières HTML5

  • Créez
  • Paramétrez
  • Animez

Et produisez vos bannières standards ou richmedia facilement, en quelques clics, à l’aide d’une interface visuelle, sans aucune connaissance en code nécessaire.

Spécificités et tutoriels pour la création de bannières :

    • BOUTON Pour commencer
    • BOUTON Comment animer votre bannière
  • BOUTON Tutoriels vidéo
  • Pour commencer
  1. Accédez à l’AdBuilder en allant sur la plateforme avec vos accès utilisateurs, puis dans Shortcuts / Design New HTML5 Ad :
  2. Pour démarrer votre projet, cliquez sur :
    • Blank Ad pour créer une bannière standard ou richmedia depuis zéro.
    • Ou bien un template pour utiliser une bannière déjà animée comme modèle.

Vous aurez alors accès à plusieurs types de formats :

Standard :

Format in-banner au poids limité et avec un seul

clic de renvoi possible.

Poids = 150 Ko max*

*Limite IAB, le plafond max de la plateforme Sizmek étant de 200Ko

Polite :

Format in-banner avec ou sans vidéo

Poids = 10 Mo max + plusieurs clics de renvoi et interactions utilisateur possibles + éléments richmedia (vidéo, interactivité, animations complexes)

Expandable (single, multi, pushdown + interstitiels) :

Formats avec ouverture d’animations par-dessus ou poussant le site avec ou sans vidéo

Poids = 10 Mo max + plusieurs clics de renvoi et interactions possibles + expands multiples et éléments richmedia  (vidéo, interactivité, animations complexes)

Calcul du poids total :

Il se base sur les dernières recommandations IAB et se fera donc sur le poids total des assets (fichiers) compris dans l’ensemble du dossier

HTML5 (Que ce soient les polices, image, JS, ou CSS,…) dans leur version compressée.

N.B : Seule le poids de la vidéo la plus lourde contenu dans le dossier sera retenue, et pour plus d’infos cliquez ici.

(https://support.sizmek.com/hc/en-us/articles/206239683?flash_digest=a01b475822076f5edab1acb0720c56c68a4af1e3)

Donner un nom à votre format, sélectionnez son type, définissez ses dimensions et cliquez sur Create.

  • Comment animer votre bannière ? :
  1. Ajoutez vos éléments depuis les composants* à disposition dans la fenêtre Components.

> Hotspot : Ajoute un bouton de clic de renvoi

Paramétrez dessus un évènement Tap/Click avec l’action Clickthrough afin d’assurer le bon tracking des clics Sizmek ainsi que le renvoi vers l’URL de redirection renseignée sur la fenêtre d’accueil.

> HTML : Permet d’ajouter du code manuellement

Une fois le composant présent sur la scène, ajoutez votre code (HTML, CSS, JS) en cliquant sur son bouton Open Code Editor.

  1. Accédez ensuite aux propriétés des composants à l’aide de la fenêtre Properties sur la droite.Et pour les actions et animations, depuis la fenêtre Actions & Animations.

Exemples :

Affiche les propriétés d’un objet image

Affiche un texte en fade-in au survol d’une image

*Pour en savoir plus sur les composants de l’Ad Builder, cliquez sur le lien suivant : https://support.sizmek.com/hc/en-us/articles/203465315-HOW-TO-Add-Components-to-Your-HTML5-Ad-in-HTML5-Factory

  1. Pour animer les objets entre eux, il faudra ajouter des actions et animations sur le même principe mais cette fois depuis la scène principale.

Pour cela, cliquez sur le fond de la scène pour afficher ses panneaux de réglages sur la droite de l’AdBuilder :

Choisissez un évènement* parmi ceux dans la liste pour démarrer les actions à entreprendre sur les objets. La plupart du temps ce sera l’évènement : On Load dans la mesure où il permettera d’indiquer le moment où la bannière est prête à démarrer dans la page.

Vous pourrez ensuite enchaîner les actions* en les ajustant directement sur la timeline (drag) ou bien en les définissant à la milliseconde près si besoin et ce, à l’aide du panneau des réglages de l’action en l’ouvrant par un simple clic sur l’action à régler.

*Pour en savoir plus sur les Evènements et Actions, cliquez sur le lien suivant : https://support.sizmek.com/hc/en-us/articles/203184555-HOW-TO-Assign-Actions-and-Animations-to-Events-in-HTML5-Factory

  1. Une fois que vos animations sont prêtes, cliquez alors sur le bouton Preview pour prévisualiser le rendu global. Une fois que votre animation est satisfaisante, cliquez sur Upload pour la sauvegarder sur votre compte.
  1. Vous pourrez à tout moment sauvegarder votre projet (Save Draft) voir même le sauvegarder localement (Save Local Draft) :

Le projet local sera sauvergardé avec l’extension .hfd, que vous pourrez ensuite ouvrir depuis l’AdBuilder et Open Local Draft.

*Pour en savoir plus sur les previews, cliquez sur le lien suivant : https://support.sizmek.com/hc/en-us/articles/201992025-HOW-TO-Preview-and-Upload-Your-HTML5-Ad-in-Ad-Builder-for-HTML5

  • Tutoriel vidéo :
  1. Tuto vidéo pour une bannière standard :
  2. Tuto vidéo pour une bannière vidéo :