Accueil
Présentation généraleConception de votre annonceAide des gadget ads |
Comment concevoir des gadget ads GoogleCe document s'adresse à ceux qui souhaitent concevoir des gadget ads Google. Vous y trouverez des conseils de mise en route et des explications sur les différences existant entre les gadget ads Google et les gadgets Google classiques. Au cours de la conception de votre annonce, vous devrez tenir compte de fonctions d'implémentation spécifiques, détaillées dans le présent document. Ces informations constituent la référence documentaire principale à laquelle vous devrez vous reporter fréquemment. Sommaire
IntroductionLes gadget ads Google sont élaborées de la même façon que les gadgets Google pour iGoogle. D'un point de vue technique, les gadgets sont de simples fichiers XML hébergés sur un serveur public externe. Ils sont constitués de code HTML, JavaScript et CSS standard. Ils s'apparentent à des pages Web miniatures. La plupart des opérations qu'il est possible d'effectuer au sein d'une page Web sont reproductibles dans un gadget. Pour créer des gadget ads Google, il est indispensable de maîtriser les notions essentielles qui président à la création de gadgets Google. Avant d'aller plus loin, reportez-vous au document intitulé API Google Gadgets - Guide du développeur et lisez attentivement les sections Mise en route et Programmation de votre propre gadget. Au minimum, suivez les instructions de programmation consistant à créer l'exemple de gadget "Hello, World!". Savoir ce qu'est un gadget et connaître son mode de fonctionnement et ses différentes options est un atout supplémentaire pour créer des gadget ads de qualité, susceptibles de toucher des millions d'internautes. Une fois que vous avez assimilé les notions fondamentales relatives aux gadgets et au langage XML, il vous faut bien comprendre en quoi les gadget ads Google diffèrent des gadgets Google de iGoogle. Conformité aux réglementations de l'IAB et de Google en matière de supports publicitaires formatésLe format des gadget ads Google étant propre à Google, il est impératif qu'il soit conforme aux normes publicitaires actuelles ainsi qu'à la réglementation de Google relative aux supports publicitaires formatés et dynamiques. Il est donc important que vous respectiez les normes édictées par l'IAB (Internet Advertising Board) et par Google et qui régissent les formes que peut prendre la publicité sur Internet. Au-delà de pratiques évidentes qui consistent à ne pas publier d'annonces trompeuses, il existe d'autres éléments moins intuitifs à prendre en compte. Par exemple, une même page pouvant contenir plusieurs annonces, vous ne pouvez pas utiliser d'annonces audio à lecture automatique au chargement de la page, sous peine de créer des conflits entre les annonces. Dans le but de réglementer ces pratiques, Google a élaboré un ensemble de consignes de rédaction à respecter. Elles peuvent être consultées à l'adresse suivante : http://adwords.google.com/support/bin/answer.py?answer=66136&hl=fr Performances et bande passanteDans de nombreuses zones du globe, les particuliers et les entreprises doivent payer des sommes d'argent importantes pour pouvoir disposer d'une bande passante suffisante. Il convient donc de respecter les contraintes de ces utilisateurs en minimisant la taille des annonces. De plus, si les annonces rendaient le chargement des pages Web trop lent, l'intégralité du Web en souffrirait. Google a très souvent constaté qu'un temps de chargement trop long avait des répercussions directes et flagrantes sur les performances des annonces. L'IAB impose des limites de taille pour les supports publicitaires formatés en fonction des dimensions de l'annonce et aucune annonce ne peut dépasser 40 Ko au chargement. Google recommande aux annonceurs de se conformer systématiquement à ces normes. Pour consulter les réglementations sur les supports publicitaires formatés de l'IAB, reportez-vous au document suivant : http://www.iab.net/standards/richmedia/pdf/RichMediaGuidelines3.pdf Les gadget ads constituant un nouveau format d'annonces, Google a établi une limite de 50 Ko au chargement pour une annonce au cours de la période d'essai. La notion de "taille au chargement" est difficile à définir. Néanmoins, on peut considérer qu'il s'agit de la taille de l'annonce au moment du chargement de la page où elle doit être diffusée, avant toute interaction de la part d'un internaute. Une fois qu'un internaute a "interagi" avec le gadget, la limite de 50 Ko peut être dépassée. Compte tenu de cette limite de 50 Ko et de la règle consistant à interdire les annonces audio à lecture automatique au chargement de la page (mentionnée plus haut), il n'est pas non plus possible de diffuser des annonces vidéo à lecture automatique au chargement de la page. Toutefois, la diffusion de petites séquences d'animation est envisageable. Clics incorrects et clics sur des liens de redirection trompeursIl est évidemment interdit de simuler un clic sur une annonce gadget, d'autant plus qu'une telle action n'est pas dans votre intérêt. En effet, en générant des clics frauduleux sur vos gadget ads, non seulement vous vous exposez à des sanctions, mais vous n'augmentez pas vos chances de conversion, puisque les annonces fonctionnant par clic rapportent de l'argent uniquement lorsque des internautes cliquent délibérément sur l'annonce pour en savoir davantage sur le produit ou le service proposé. Des clics frauduleux sur des gadget ads augmentent certes le taux de clics, mais au détriment des conversions. De même, inciter l'internaute à cliquer sur des liens de redirection incorrects ne peut que nuire à votre annonce. Le problème des taux de clics faibles est plus délicat. Par exemple, si les URL de redirection ne sont pas correctement placées, le gadget "fonctionne", mais la prise en compte des clics échoue dans le cas d'une annonce au coût par clic. Vous pouvez également concevoir votre interface utilisateur de sorte que les annonceurs comprennent bien la différence entre annonces au CPM (coût pour mille impressions), annonces au CPC (coût par clic) et annonces au CPA (coût par action). Les liens de redirection vers un autre site Web doivent être clairement identifiés comme tels pour ne pas être confondus avec des interactions internes au gadget. Pour ce faire, Google suggère d'afficher systématiquement ces liens en bleu et de les souligner. Annonces animéesL'animation doit se limiter à 15 secondes au maximum (à une vitesse de 15 à 20 images par seconde). Les boucles sans fin ne sont pas autorisées. Une annonce animée peut être diffusée autant de fois que possible, dans la limite des 15 secondes autorisées. Confidentialité et cookiesL'affichage des gadget ads Google doit être complètement anonyme. Ces annonces ne doivent pas créer ou lire des cookies, ni utiliser d'autres mécanismes similaires tels que les applications Flash nécessitant le stockage d'informations sur le disque dur. Pour Google, il s'agit d'un aspect fondamental de la protection des informations personnelles des internautes. Ne dérogez pas à cette règle : respectez-la à la lettre. Annonces contenant des téléchargements et des programmes malveillantsLes gadget ads ne doivent pas entraîner le téléchargement d'un logiciel sur l'ordinateur de l'internaute, pas plus qu'ils ne doivent essayer de le faire. Actuellement, les réglementations IAB et Google n'autorisent pas l'intégration de liens de téléchargement au sein des gadgets, bien que nous nous efforcions de modifier cette règle de façon à permettre cette intégration. Pour le moment, les annonceurs doivent placer leurs liens de téléchargement dans la page de destination de l'annonce (page vers laquelle est dirigé l'internaute s'il clique sur l'annonce). Fenêtres pop-upN'utilisez en aucun cas des fenêtres d'alerte, de confirmation ou tout autre type de boîte de dialogue modale. De plus, Google interdit l'utilisation de liens vers des pages de destination qui génèrent des fenêtres pop-up lorsqu'un internaute ouvre ou quitte ces pages. Est considérée comme "pop-up" toute fenêtre (quel qu'en soit le contenu) qui s'ouvre en plus de la fenêtre initiale. Gadget ads Google et gadgets Google sur iGoogleL'utilisation de gadgets sur iGoogle n'implique aucune restriction ni obligation quant à l'implémentation des gadgets. Ces derniers sont élaborés à partir de code HTML standard autorisant l'intégration de tout type de contenu similaire à celui d'une page Web conventionnelle : images, objets Flash, vidéos, etc. De plus, ils donnent accès aux différentes fonctionnalités de l'API de Google, sans aucune contrainte sur la manière dont ils sont utilisés. Contrairement aux gadgets iGoogle, les gadget ads doivent respecter un certain nombre de règles pour pouvoir être diffusées. Des éléments sont requis à deux niveaux :
Ces éléments obligatoires sont la différence fondamentale entre gadgets Google sur iGoogle et gadget ads Google. Éléments XML requisLes gadgets classiques sur iGoogle peuvent être constitués d'un code XML réduit à sa plus simple expression. Exemple : <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My Gadget"/>
<Content type="html"><![CDATA[
Hello world!
]]></Content>
</Module>
En revanche, pour créer des gadget ads Google, vous devez définir un certain nombre d'éléments et d'attributs supplémentaires dans votre code XML. Dans l'extrait de code XML suivant, les éléments et attributs requis pour l'annonce gadget ont été mis en gras : <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value=""/>
<UserPref name="aiturl" datatype="hidden" default_value=""/>
<Content type="html"><![CDATA[
Hello content network!
]]></Content>
</Module>
Les formats d'annonces gadget possibles sont les mêmes que ceux des annonces illustrées. Les attributs
Conditions d'implémentation requisesLes éléments requis en matière d'implémentation d'annonces gadget sont fonction du type de gadget que vous souhaitez créer et sont décrits dans les différentes instructions d'implémentation du présent document. Voici une liste de ces éléments obligatoires, accompagnés des liens menant aux instructions correspondantes :
Les différentes rubriques de ce document traitent de façon détaillée des conditions d'implémentation requises et de la manière de vous y conformer. Mise en routePuisque vous savez désormais en quoi consistent les éléments requis pour créer une annonce gadget, vous pouvez passer à la création proprement dite. Pour vous aider dans vos premiers pas, nous avons inclus des exemples d'annonces gadget dont vous pouvez vous inspirer pour commencer. Ces exemples sont incomplets, mais contiennent tous les éléments et attributs XML requis. Chaque fichier peut contenir un ensemble d'extraits de code qui répondent à différentes exigences d'implémentation. Selon le fichier choisi, l'ensemble d'extraits de code sera différent. Vous pouvez partir de ces morceaux de code pour les développer ou simplement reprendre quelques éléments de ces extraits afin de compléter votre propre gadget. En vous servant des exemples ci-après comme point de départ, vous gagnez du temps. En effet, ces extraits de code, préprogrammés et déjà approuvés, devraient vous permettre d'accélérer le processus d'approbation qui suit l'envoi de votre annonce gadget à Google pour vérification. Pour commencer rapidement, choisissez l'exemple d'annonce gadget approprié au type de gadget que vous souhaitez concevoir. Ensuite, téléchargez le code XML correspondant et apportez-lui les modifications nécessaires.
Utilisation de l'Éditeur d'annonces gadgetL'une des méthodes les plus rapides et les plus simples pour créer une annonce gadget est d'utiliser l'Éditeur d'annonces gadget de Google (GGAE). Cet éditeur est un outil de développement permettant de concevoir, tester et valider votre annonce gadget avant de l'envoyer pour vérification. Il se présente sous la forme d'un éditeur de texte dans lequel programmer vos gadgets et offre la possibilité d'enregistrer votre gadget et de l'héberger. En outre, vous pouvez télécharger des fichiers de l'éditeur vers les serveurs Google. En faisant héberger votre gadget par l'Éditeur d'annonces gadget, vous n'avez plus à vous soucier des problèmes de bande passante. Néanmoins, tous les éléments doivent être mis en cache, même les fichiers hébergés par l'Éditeur d'annonces gadget. Avant d'envoyez votre annonce gadget pour vérification, vous devez la valider par l'intermédiaire de l'Éditeur d'annonces gadget. La fonctionnalité de validation intégrée recherche automatiquement les conditions requises pour vos gadget ads, telles que certains éléments XML requis mentionnés plus haut ou des conditions d'implémentation requises. Pour que Google puisse approuver très rapidement votre annonce, assurez-vous que la fonctionnalité de validation a bien été appliquée à votre gadget et que toutes les vérifications ont été faites. Servez-vous de l'Éditeur d'annonces gadget pour créer vos gadget ads. Suivi des clicsToutes les gadget ads doivent proposer au moins un lien de redirection sur lequel les internautes peuvent cliquer pour être redirigés vers un autre site, généralement une page de destination. Pour déterminer le taux de clics de votre annonce gadget, vous devez effectuer le suivi de tous les clics générés par les liens de redirection spécifiés. Cela implique une légère modification d'implémentation au niveau de la définition des liens.
Normalement, en langage HTML, un lien de redirection se définit par la création d'une balise d'ancrage et la spécification de l'URL de destination dans l'attribut <a target="_top" href="http://mytargetdomain.com">Target Link</a> Pour permettre le suivi des clics sur ce lien, il faut exécuter la redirection à l'aide de la fonction JavaScript suivante :
Voici un lien similaire à celui présenté ci-dessus, mais pour lequel le suivi des clics est maintenant activé : <a href="javascript:_ADS_ClickDestinationUrl('http://targetdestination.com');">Target Link</a>
Vous pouvez appeler cette fonction de n'importe quel emplacement afin de simuler un clic. Voici un exemple dans lequel le lien de redirection est un bouton : <input onclick="javascript:_ADS_ClickDestinationUrl('http://targetdestination.com');" type="button" value="Target Link"/>
Clics en Flash
Pour créer des liens de redirection en Flash, il vous suffit d'appeler la fonction JavaScript à l'aide d'une programmation ActionScript. Pour cela, utilisez le code getURL(javascript:_ADS_ClickDestinationUrl('http://targetdestination.com');)
Activation du mode de débogage
Pour vous assurer que vos clics sont correctement configurés et qu'ils fonctionnent comme prévu, vous pouvez activer le mode de débogage en définissant sur "DEBUG" l'élément <UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
En mode de débogage, la fonction
Remarque : Le mode de débogage est automatiquement désactivé une fois le gadget mis en ligne sur le réseau de contenu. Il est donc inutile de supprimer la valeur "DEBUG" avant de soumettre l'annonce gadget à Google pour vérification. Suivi des interactionsLe suivi des interactions utilisateur est un élément très important dans les gadget ads. Contrairement aux annonces conventionnelles, il est fortement conseillé d'y utiliser un contenu riche en éléments interactifs et hautement incitatifs. Une annonce gadget performante est celle qui incite activement l'internaute à interagir avec le contenu de l'annonce. Lorsqu'un suivi de ces interactions est effectué, vous pouvez analyser les données obtenues et évaluer l'impact de l'annonce. Pour pouvoir disposer de ces données extrêmement utiles, vous devez instaurer un suivi sur le plus grand nombre d'interactions utilisateur possibles. Pour comptabiliser les interactions dans votre annonce gadget, définissez des gestionnaires d'événements JavaScript qui se déclenchent pour chaque interaction dont vous souhaitez effectuer le suivi. Chaque gestionnaire d'événement doit exécuter une fonction de rappel sur l'une des fonctions JavaScript suivantes. Un appel envoie la détection d'un clic au serveur de suivi de Google et comptabilise l'interaction dans un rapport :
Remarque : Si le paramètre Dans l'exemple d'annonce gadget ci-après, des interactions sont transmises aux rapports d'interactions lorsque l'internaute place le pointeur de sa souris au-dessus d'un des quatre liens proposés et lorsqu'il clique sur l'un de ces liens. (Prévisualisation en contexte) <?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="My Items" width="300" height="250" thumbnail="">
<Require feature="ads"/>
</ModulePrefs>
<UserPref datatype="hidden" name="clickurl" default_value=""/>
<UserPref datatype="hidden" name="aiturl" default_value=""/>
<Content type="html"><![CDATA[
<a href="javascript:_ADS_ReportInteraction('item_1');" >Item 1</a>
<br>
<a href="javascript:_ADS_ReportInteraction('item_2');" >Item 2</a>
<br>
<a href="javascript:_ADS_ReportInteraction('item_3');" >Item 3</a>
<br>
<a href="javascript:_ADS_ReportInteraction('item_4');" >Item 4</a>
<script>
var mouseover_detected = false;
document.body.onmouseover = function() {
if (!mouseover_detected) {
_ADS_ReportInteraction('mouse_over');
mouseover_detected = true;
}
};
</script>
]]></Content>
</Module>
Interactions en Flash
Pour effectuer le suivi des interactions dans vos applications Flash, appelez la fonction getURL("javascript:_ADS_ReportInteraction('mouse_over', 1);");
Activation du mode de débogageLe suivi des interactions est un élément très important qu'il faut mettre en œuvre correctement. S'il n'est pas configuré de façon appropriée, vous risquez de ne pas recevoir autant de données que prévu dans vos rapports. Or, sans ces rapports, vous ne disposez d'aucun moyen de contrôle sur l'efficacité de votre annonce gadget. Pour vérifier que vos interactions sont dûment comptabilisées, activez le mode de débogage.
Pour activer le mode de débogage, définissez sur "DEBUG" l'élément <UserPref name="aiturl" datatype="string" default_value="DEBUG"/> Le mode de débogage est alors activé pour le suivi des interactions, ce qui crée une petite mémoire tampon de débogage dans l'angle supérieur gauche de votre gadget. Une barre de titre contenant le lien "DEBUG" s'affiche en même temps qu'un message rendant compte du nombre d'éléments actuellement conservés. En cliquant sur ce lien, vous développez le conteneur et pouvez donc afficher les messages qu'il comprend. Le conteneur de la mémoire tampon est conçu de façon à s'afficher au-dessus de tout contenu HTML (texte, images, objets Flash et iFrames) afin d'être toujours visible. Voici un aperçu en contexte d'un exemple d'annonce gadget pour lequel différents types d'interactions sont comptabilisés. Cliquez sur l'un des éléments interactifs du gadget pour vérifier que les interactions sont correctement transmises à la mémoire tampon.
À chaque comptabilisation d'une interaction via la fonction Remarque : Le mode de débogage est automatiquement désactivé une fois le gadget mis en ligne sur le réseau de contenu. Il est donc inutile de supprimer la valeur "DEBUG" avant de soumettre l'annonce gadget à Google pour vérification. Extraction de contenu distantL'un des points les plus intéressants des gadgets est leur capacité à récupérer du contenu distant sur des sites Web tiers et de l'afficher dans le gadget. L'API Google Gadgets propose actuellement trois fonctions pour y parvenir, selon le type de contenu extrait :
Exemple : extraction de contenu d'un flux Atom/RSSVoici un exemple où la première entrée de flux est extraite du flux Atom de Google Actualités et son contenu renvoyé sous forme d'objet JSON. La fonction de rappel utilise ce contenu pour le renvoyer sous forme de code HTML généré à partir du titre, du lien et de la description de l'entrée. <div id="out"></div>
<script>
function callback(response) {
// Retrieve first entry from the response
var firstEntry = response.Entry[0];
// Generate HTML using the entry's title, link, and summary
_gel("out").innerHTML = [
'<a href="' + firstEntry.Link + '">' + firstEntry.Title + '</a>',
firstEntry.Summary,
].join("<br>");
}
// Fetch 1 entry from Google News Atom feed and include summaries
_IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, 1, true);
</script>
Pour une documentation plus détaillée, reportez-vous au Guide du développeur. Intégration d'imagesL'une des conditions requises dans les gadget ads est la mise en cache de toutes les images intégrées dans le gadget sur les serveurs Google. Les gadget ads sont supposées recevoir quotidiennement de grands volumes de trafic. Sans mise en cache, les fournisseurs d'hébergement des images seraient vite submergés de requêtes. Google vous propose donc deux fonctions JavaScript pour vous permettre de mettre en cache vos images de façon efficace. Pour cela, une étape d'implémentation supplémentaire est nécessaire.
Habituellement, une image est intégrée à un élément HTML à l'aide de balises <img src="http://www.google.com/intl/en_ALL/images/logo.gif"/> Pour mettre vos images en cache, vous devez utiliser l'une des fonctions ci-après et extraire l'image mise en cache ou l'URL source de cette image en JavaScript pour l'ajouter à votre gadget. C'est alors qu'intervient l'étape d'implémentation supplémentaire.
Vous pouvez utiliser les deux fonctions ci-dessus de manières différentes afin d'intégrer les images mises en cache dans votre gadget. Voici un exemple illustrant l'une des manières de mettre en cache votre image : <img id="logoImg" src=""/>
<script>
_gel("logoImg").src = _IG_GetImageUrl("http://www.google.com/intl/en_ALL/images/logo.gif");
</script>
Voici une autre manière de mettre en cache votre image à l'aide de l'autre fonction : <div id="logoContainer"></div>
<script>
_gel("logoContainer").appendChild(_IG_GetImage("http://www.google.com/intl/en_ALL/images/logo.gif"));
</script>
Images d'arrière-plan
L'utilisation de balises <div id="panel">This content has a background image</div>
<script>
_IG_RegisterOnloadHandler(function() {
_gel("panel").style.background = "transparent url(" + _IG_GetImageUrl("http://www.google.com/intl/en_ALL/images/logo.gif") + ") 0px 0px no-repeat";
});
</script>
Intégration d'objets FlashSi votre annonce gadget intègre du contenu Flash, vous devez utiliser notre bibliothèque Flash. Cette bibliothèque permet non seulement de vérifier que l'intégration se fait correctement sur plusieurs navigateurs, mais également de mettre en cache le contenu Flash. La mise en cache de contenu Flash est obligatoire : elle garantit la bonne performance de votre gadget et empêche la surcharge des serveurs d'hébergement.
Commencez par ajouter l'élément <ModulePrefs title="Gadget Ad" ... > <Require feature="ads"/> <Require feature="flash"/> </ModulePrefs>
Ainsi, vous pouvez utiliser la bibliothèque Flash qui comprend la fonction JavaScript
Voici un exemple illustrant l'utilisation de cette fonction pour intégrer un objet Flash mis en cache dans votre gadget : <div id="container"></div>
<script>
_IG_EmbedCachedFlash('http://www.mysite.com/flash.swf', 'container', {
swf_version: 6,
width: 300,
height: 250
});
</script>
Mise en cache des ressources enfants intégrées aux objets FlashLes objets Flash peuvent inclure des ressources enfants telles que des images et d'autres objets Flash. Toutes les ressources intégrées des gadget ads doivent être mises en cache afin d'empêcher la surcharge des serveurs d'hébergement. Il existe deux catégories de ressources intégrées :
Selon la catégorie de la ressource, la procédure de mise en cache est légèrement différente. Hébergement sur un même domaine
Les ressources de la première catégorie sont hébergées sur le même domaine que l'objet Flash qui y accède. Ces ressources peuvent être référencées à l'aide d'un chemin d'accès relatif. Tous les fichiers Flash extraits par la fonction Domaine tiers
Les ressources de la seconde catégorie sont hébergées sur un autre domaine. Ces ressources pouvant uniquement être référencées à l'aide d'un chemin d'accès absolu à la source, elles ne sont pas automatiquement mises en cache. Pour activer la mise en cache, vous devez appliquer la fonction escape à l'URL de la ressource et ajouter le résultat obtenu à /ig/proxy?url=<ESCAPED_RESOURCE_URL> Voici un extrait de code sur la façon dont les URL de ressource doivent être construites en Flash à l'aide d'une programmation ActionScript : "/ig/proxy?url=" + escape("http://thirdpartydomain.com/child_flash.swf")
Utilisation de la méthode FlashVars pour transmettre des variables aux objets FlashFlashVars vous permet de transmettre des variables à votre fichier Flash. Grâce à une programmation ActionScript, vous devez pouvoir accéder à toutes les variables et les utiliser dans votre application Flash.
Votre objet Flash doit être intégré à l'aide de la fonction
La chaîne var1=value1&var2=value2&var3=value3&var4=value
Remarque : Lors de la création de la chaîne Voici un exemple d'implémentation : _IG_EmbedCachedFlash('http://www.mysite.com/flash.swf', 'container', {
width: 300,
height: 250,
flashvars: 'var1=' + _esc('value1') + '&var2=' + _esc('value2') + '&var3=' + _esc('value3') + '&var4=' + _esc('value')
});
Intégration de vidéosDans le cadre des gadget ads, nous vous recommandons vivement l'hébergement de votre vidéo sur YouTube. Reportez-vous aux instructions nécessaires au téléchargement de vidéos si vous n'y êtes pas habitué. L’hébergement d’une vidéo sur YouTube vous permet de disposer de la capacité suffisante à la gestion du trafic et du volume de chargement générés par votre annonce gadget. Une fois votre vidéo hébergée, vous pouvez utiliser le lecteur de vidéos avancé de YouTube ou la lecture en continu dans un lecteur Flash personnalisé. Utilisation du lecteur YouTube pour la lecture des vidéosPour utiliser le lecteur de vidéos de YouTube dans votre annonce gadget, rien de plus simple. En effet, le lecteur YouTube est une simple application Flash que vous pouvez facilement intégrer à votre gadget, à l'emplacement de votre choix. Pour cela, procédez comme suit :
Utilisation de votre propre lecteur Flash pour la lecture des vidéos YouTubeVous pouvez bien sûr utiliser votre propre lecteur Flash pour la lecture des vidéos hébergées sur YouTube. Pour cela, il vous suffit de vous munir de l'URL pointant vers la vidéo FLV hébergée sur les serveurs YouTube. Vous pouvez ensuite utiliser cette URL pour une lecture en continu de votre vidéo par votre propre lecteur Flash. Vous vous dégagez ainsi des difficultés liées à l'hébergement d'une source vidéo sur vos propres serveurs. La diffusion continue est également le gage d'un fichier de petite taille, car il n'est pas stocké sur un disque dur. Création d'une URL FLV
Avant toute chose, vous devez créer l'URL FLV de votre vidéo. Cette opération ne peut être effectuée qu'au sein du gadget. Elle sera ensuite transmise à l'application Flash par l'intermédiaire de la propriété http://www.youtube.com/get_video?video_id=YOUTUBE_VIDEO_ID&ts=TIMESTAMP&t=YOUTUBE_SIGNATURE&gad=1
Utilisation de l'URL FLV
Maintenant que vous avez créé l'URL FLV de votre vidéo, vous devez la transmettre à votre lecteur Flash. Intégrez votre lecteur Flash en utilisant la fonction var flvUrl = "http://www.youtube.com/get_video?video_id=C5rTJkfBhbQ&ts=__ENV_time_secs_since_epoch__&t=__YOUTUBE_VIDEO_TEST(C5rTJkfBhbQ)__&gad=1";
_IG_EmbedCachedFlash("http://examplesite.com/myplayer.swf", "vid", {
swf_version: 8,
width: 300,
height: 250,
flashvars: 'flvURL=' + _esc(flvUrl)
});
Lecture d'un fichier FLV à l'aide d'une programmation ActionScript
ExempleCet exemple de gadget diffuse des vidéos hébergées sur YouTube à l'aide d'un lecteur propre au gadget. Étude de cas : annonce gadget Gmail simplifiéeL'annonce gadget Gmail est un gadget qui rencontre énormément de succès et recueille environ 1,4 millions de visites par semaine. Il est facile à ajouter à votre page d'accueil ou à intégrer à d'autres pages Web. Le meilleur moyen d'apprendre à créer des gadget ads efficaces est d'en concevoir une vous-même. Nous vous proposons donc d'élaborer une version simplifiée de notre annonce gadget Gmail. Nous ne reproduirons pas ici l'intégralité des fonctionnalités du gadget d'origine. Néanmoins, une fois cette version simplifiée créée, vous aurez appris à concevoir un gadget incluant une vidéo Gmail, le logo Gmail et un lien de redirection vers la page d'inscription à un compte Gmail. Ressources à préparerLorsque vous créez un gadget, il vous faut identifier les différentes ressources dont vous allez avoir besoin. Ces ressources peuvent être de différentes natures : images, URL, objets Flash, etc., soit tout contenu qu'il est possible d'intégrer dans un gadget classique. Normalement, c'est à vous de trouver et/ou de créer les ressources nécessaires à l'élaboration de votre gadget. Pour cet exemple, supposons que vous ayez créé les ressources répertoriées ci-dessous :
Point de départ
Commençons avec un modèle de gadget vide. L'image d'arrière-plan est de 300 x 250 pixels. Définissons donc la largeur du gadget sur 300 pixels et la hauteur sur 250 pixels en assignant respectivement ces valeurs aux attributs <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Simple Gmail Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
<UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/>
<Content type="html"><![CDATA[
]]></Content>
</Module>
Présentation du contenuL'image d'arrière-plan détermine la façon dont le contenu du gadget va être agencé. Nous voulons faire de l'annonce vidéo Gmail l'élément central de ce gadget. Nous la placerons donc dans la zone centrale du gadget, l'image d'arrière-plan le permettant. Deux icônes ont été placées en haut de l'image : "Vidéos" et "Trucs et astuces". Elles ne nous serviront pas ici, mais nous allons profiter de l'espace disponible à droite de ces icônes. Nous pourrons y placer un lien de redirection des internautes vers la page d'inscription à Gmail. En langage HTML, il est possible d'utiliser des tableaux pour organiser et présenter du contenu par-dessus certaines zones d'une image d'arrière-plan.
Le code de votre gadget doit maintenant ressembler au code suivant : <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Simple Gmail Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
<UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/>
<Content type="html"><![CDATA[
<table width="300" id="main" border=1 cellspacing=0 cellpadding=0>
<tr height="30">
<td></td>
</tr>
<tr height="220">
<td></td>
</tr>
</table>
<script>
_IG_RegisterOnloadHandler(function() {
// Cache the background image of the table
_gel("main").style.background = "transparent url(" + _IG_GetImageUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
});
</script>
]]></Content>
</Module>
Ajout de la vidéo d'annonce GmailDans la ligne correspondant à la zone centrale du gadget, intégrons l'annonce vidéo Gmail. Cette ligne mesure 300 x 220 pixels. Assurez-vous de définir les dimensions de la vidéo intégrée en fonction de ces mesures. Vous pouvez essayer différentes dimensions afin de créer une marge plus ou moins large autour.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Simple Gmail Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
<Require feature="flash"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
<UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/>
<Content type="html"><![CDATA[
<table width="300" id="main" border=0 cellspacing=0 cellpadding=0>
<tr height="30">
<td></td>
</tr>
<tr height="220">
<td valign=top>
<div id="video"></div>
</td>
</tr>
</table>
<script>
_IG_RegisterOnloadHandler(function() {
// Cache the background image of the table
_gel("main").style.background = "transparent url(" + _IG_GetImageUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
// Embed the Gmail video from YouTube
_IG_EmbedCachedFlash("http://www.youtube.com/v/_YUugB4IUl4", _gel("video"), {
width: 300,
height: 210
});
});
</script>
]]></Content>
</Module>
Insertion du lien d'inscription à Gmail
Dans l'angle supérieur droit encore libre, il est possible de créer un lien qui permettra de rediriger les internautes vers la page Web d'inscription à Gmail. En outre, nous souhaitons qu'un suivi des clics sur ce lien Gmail soit effectué. Il nous faut donc utiliser la fonction Dans cet exemple, les deux icônes "Vidéos" et "Trucs et astuces" placées en haut de l'image ne sont pas utilisées. Pour positionner le lien à droite de ces icônes, il suffit d'ajouter de l'espace à gauche, dans la cellule de tableau correspondante, et ainsi, de déplacer le lien vers la droite jusqu'à ce qu'il ait dépassé les icônes. Faites quelques essais pour déterminer l'espace nécessaire. Le tableau mesurant 300 pixels de large, vous pouvez commencer par un positionnement à 200 pixels, par exemple.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Simple Gmail Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
<Require feature="flash"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
<UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/>
<Content type="html"><![CDATA[
<table width="300" id="main" border=0 cellspacing=0 cellpadding=0>
<tr height="30">
<td style="padding-left: 190px; font-size: 12px;">
<a href="javascript:_ADS_ClickDestinationUrl('http://mail.google.com/mail/help/open.html#utm_campaign=en&utm_source=en-ha-na-us-gadget&utm_medium=ha')">Sign up for Gmail</a>
</td>
</tr>
<tr height="220">
<td align=center valign=top>
<div id="video"></div>
</td>
</tr>
</table>
<script>
// Cache the background image of the table
_gel("main").style.background = "transparent url(" + _IG_GetImageUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
// Embed the Gmail video from YouTube
_IG_EmbedCachedFlash("http://www.youtube.com/v/_YUugB4IUl4", _gel("video"), {
width: 250,
height: 210
});
});
</script>
]]></Content>
</Module>
Activation du suivi des interactions
Enfin, chaque fois qu'un internaute place le pointeur de sa souris sur l'annonce, une interaction doit être comptabilisée. Pour cela, il faut lier le gestionnaire d'événement JavaScript <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Simple Gmail Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
<Require feature="flash"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
<UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/>
<Content type="html"><![CDATA[
<table width="300" id="main" border=0 cellspacing=0 cellpadding=0>
<tr height="30">
<td style="padding-left: 190px; font-size: 12px;">
<a href="javascript:_ADS_ClickDestinationUrl('http://mail.google.com/mail/help/open.html#utm_campaign=en&utm_source=en-ha-na-us-gadget&utm_medium=ha')">Sign up for Gmail</a>
</td>
</tr>
<tr height="220">
<td align=center valign=top>
<div id="video"></div>
</td>
</tr>
</table>
<script>
// Track initial mouseover the ad
var mouseover_hit = false;
_IG_AddDOMEventHandler(document.body, 'mouseover', function() {
if (!mouseover_hit) {
_ADS_ReportInteraction('mouse_over');
mouseover_hit = true;
}
});
// Cache the background image of the table
_gel("main").style.background = "transparent url(" + _IG_GetImageUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
// Embed the Gmail video from YouTube
_IG_EmbedCachedFlash("http://www.youtube.com/v/_YUugB4IUl4", _gel("video"), {
width: 250,
height: 210
});
</script>
]]></Content>
</Module>
Étape finaleFélicitations. Vous venez de créer votre première annonce gadget. Vous trouverez ci-après une version finalisée et opérationnelle de cette annonce gadget (ajouter maintenant) : Documentation
RéférencesBibliothèque JavaScriptVous trouverez ci-après une liste descriptive des fonctions JavaScript prises en charge par l'API Google Gadgets et particulièrement utiles pour les gadget ads Google.
Liste des interactions
|
 |
Gadget ads |
