Utilisation du design réactif avec AdSense

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