Utilisation du design réactif avec AdSense

vendredi 14 décembre 2012 | 12:45

Labels: , ,

Dans notre dernier message de blog à propos du design réactif, nous vous avons parlé de l'importance de jouer la carte mobile et de comprendre comment vous pouviez intégrer le design réactif dans le cadre d'une stratégie axée sur les mobiles. Aujourd'hui, nous allons passer à l'étape suivante et vous expliquer comment utiliser efficacement les annonces AdSense au sein de votre site réactif. Mais d'abord, rappelons brièvement ce qu'est le design réactif.

Il s'agit d'une technique de conception qui permet de créer un seul site Web qui s'adapte à l'appareil sur lequel il s'affiche (ordinateur portable, smartphone ou tablette). Un site intégrant le design réactif se redimensionne automatiquement en fonction des différents appareils, mais c'est à vous de hiérarchiser le contenu qui intéresse le plus les mobinautes.



Comme pour le contenu, il est possible d'ajuster les annonces AdSense en fonction des différentes tailles d'écran. Il suffit pour cela d'utiliser un simple extrait de code JavaScript. Afin de tirer parti du design réactif, commencez par créer des blocs d'annonces de différentes tailles. Par exemple 728 x 90, 468 x 60 et 300 x 250. Ensuite, mettez en œuvre un extrait de code de type "if-else" afin de diffuser le format d'annonce approprié pour la taille de l'appareil de l'utilisateur. Voici un exemple d'extrait de code JavaScript pertinent :


<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if  (window. innerWidth  >= 800) {

google_ad_slot = "1234567890";
google_ad_width = 728;
google_ad_height = 90;
} else if  (window.innerWidth < 400) {
google_ad_slot = "2345678901";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "3456789012";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>



Merci de bien vouloir noter qu'il est contraire au règlement du programme AdSense d'apporter des modifications au tag AdSense. Il s'agit ici de la seule modification de tags Adsense autorisée pour les sites au design réactif. Toute autre modification en dehors du code JavaScript recommandée ci-dessus sera considérée comme une violation du règlement AdSense.

Pour en savoir plus sur le design réactif, lisez ce message de blog de l'équipe des webmasters Google (en anglais uniquement).  Pour découvrir l'intérêt que représente la technologie mobile, tester votre site et rechercher des développeurs susceptibles de vous aider à concevoir un site adapté aux mobiles, consultez le site www.mobilisezvous.fr.

Publié par Dairine Kennedy, au nom de l'équipe Google Mobile

7 comments :

Ricky Web Designer a dit…

C'est ce que je cherchais. Pendant ce temps j'ai toujours des ennuis en essayant de fixer les annonces de conception qui peuvent être disposés souple et réactive pour suivre la taille de l'écran.

merci

ceatin web a dit…

Cet article très important pour les informaticiens ...merci à vous

Javi a dit…

Merci pour cette solution. Cependant elle ne permet que de modifier le format d'une annonce en fonction de la résolution de l'écran.
Mais dans bien des cas pratiques de design il est très utile, voire indispensable de pouvoir afficher ou non des blocs en fonction de la résolution.
Un exemple simple: sur un écran de PC on peut facilement envisager d'afficher trois blocs sur une page. Pour le même site affiché sur un mobile, trois blocs d'annonce, même de format très réduit, me semblent être un peu encombrants.
Autre exemple: affichage d'un bloc d'annonce dans le header pour l'affichage sur PC, comment ne pas l'afficher sur un mobile ?
Merci.

Anonyme a dit…

Superbe cela fait longtemps que je cherchais à le faire.

javi a dit…

Bonjour,

Merci pour cette solution d'implémentation de blocs Adsense pour un site en responsive design.

Après quelques tests j'ai toutefois 2 commentaires :

1. Avec un navigateur sur PC, les annonces ne sont pas redimensionnées lorsque l'on fait varier la largeur de la fenêtre. Un bloc Adsense peut donc selon le cas recouvrir du contenu lorsque l'on fait varier la largeur de la fenêtre.
Exemple : en largeur > 800, j'ai une colonne centrale de 728px. En resolution < 400, cette colonne passe à 300px, ce qui est compatible avec le code donné en exemple dans cet article. Donc si j'ouvre un navigateur dans une largeur > 800, l'annonce affichée aura une largeur de 728px. Si je réduit la largeur du navigateur jusqu'à passer en dessous des 800, puis des 400 px, mon annonce ne sera pas redimensionnée (pas de trigger javascript), donc l'annonce gardera sa largeur de 728 px et dépassera du cadre.
Ce use case de variation de la largeur du navigateur n'est pas des plus pertinents, mais par analogie on peut avoir le même effet sur une tablette lorsque l'on change son orientation: la largeur du navigateur change, mais les blocs Adsense ne sont pas redimensionnés et peuvent donc déborder.

2. ie8 (et probablement les versions antérieures) ne comprennent pas ou n'interprètent pas window.innerWidth. C'est donc l'annonce definie dans le cas par défaut qui sera affichée. Sachant que ce même ie ne tient pas compte des medias queries, ce devrait être la largeur maximale qui devrait être prise en compte par défaut.
Pour résoudre ce problème, il faut simplement modifier le code pour que la valeur par défaut (dans le else sans condition) corresponde à la résolution la plus large.

J'avais déjà posté il y a quelques jours une remarque sur l'impossibilité de cacher des blocs (ce que je comprends) et l'effet "blocs accolés" qui peut découler du changement du layout du site en responsive design.
Je comprends que ce commentaire n'ai pas été publié, étant donné qu'il n'est pas que positif.
Pour les mêmes raisons, je ne m'attends pas à ce que celui-ci soit publié.
Simplement je voulais vous signaler ces limitations en espérant que vous puissiez y apporter une réponse, et je n'ai pas trouvé d'autre canal de communication que les commentaires de ce blog.

En vous remerciant par avance à l'attention que vous voudrez bien porter à mon message.

Cordialement,

Jacky
vincent.jacky@numericable.fr

Nedmic a dit…

Merci c'est exactement ce qu'il manquait pour une parfaite intégration des annonces adsense.

En espérant effectivement que ce tag soit bien toléré par les équipes de modération, même si dans mon cas j'ai pris soin d'ajouter un lien vers cette page en commentaire dans mon code source.

Mathilde a dit…

Merci pour cet article qui me sera fort utile.