Google AdSense : Adapter la publicité au responsive design

Il est depuis plus d’un mois maintenant autorisé de modifier son code d’annonce AdSense. De quoi notamment permettre aux éditeurs de sites internet de proposer des encarts publicitaires adaptés aux pages responsive qu’ils exposent aux internautes afin de répondre à la problématique de la consommation de ressources web depuis les différents terminaux que sont l’ordinateur, la tablette tactile et le smartphone. Voyons donc ensemble comment automatiquement adapter la taille des publicités sur son site web en fonction de la largeur du device utilisé pour surfer.

Chargement synchrone du code d’annonce Google AdSense

Par défaut, le snippet de code d’annonce synchrone est le suivant :

<script type="text/javascript">
<!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

L’idée est de dynamiquement intervenir au niveau de la taille de l’encart publicitaire (soit les variables google_ad_width et google_ad_height) en se basant sur la largeur de la page web – plus exactement la largeur du contenu visible de la fenêtre de navigation en incluant l’ascenseur vertical s’il est présent – dans laquelle il est inséré pour définir différents cas de figure à l’aide de conditions en JavaScript. En prenant de manière très simple deux états (et donc deux dimensions de publicité), on a :

<script type="text/javascript">
<!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxx";
browserWidth = window.innerWidth;
if(browserWidth >= 960){
google_ad_slot = "xxxxxxxxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
} else if(browserWidth >= 500){
google_ad_slot = "xxxxxxxxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
}
//-->
</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Respectivement le résultat sera le suivant :

• Affichage d’une publicité de 728×90 pixels dans le cas où la largeur de l’écran est supérieure à 960 pixels
• Affichage d’une publicité de 468×60 pixels dans le cas où la largeur de l’écran est supérieure à 500 pixels

Mais on peut faire mieux, en optant en plus de l’adaptation à un webdesign responsive, un chargement asynchrone du code de la publicité.

Chargement asynchrone du code d’annonce Google AdSense

Comme vous le savez peut-être certainement, Google a dévoilé il y a quelques jours un code d’annonce asynchrone qui permet de réduire la latente des sites internet et donc d’améliorer l’expérience utilisateur grâce à un chargement des publicités en parallèle des éléments de la page web que l’internaute visite.

Dans ce cas, le snippet de code d’annonce asynchrone par défaut est le suivant :

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxxxxx"></ins>
<script type="text/javascript">
<!--
(adsbygoogle = window.adsbygoogle || &#91;&#93;).push({});
//-->
</script>

La grande différence est qu’il conviendra ici d’agir à l’aide de CSS3 et plus exactement de media queries pour intervenir sur la taille de la balise ins via un ID personnalisé – customadsbygoogle – qu’on ajoutera.

Code à placer dans l’en-tête de la page :

<style type="text/css">
@media screen and (min-width: 960px) {
#customadsbygoogle {
display: inline-block;
width: 728px;
height: 90px;
}
}

@media screen and (max-width: 960px) and (min-width: 500px) {
#customadsbygoogle {
display: inline-block;
width: 468px;
height: 60px;
}
}
</style>

Code à placer dans le corps de la page :

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
id="customadsbygoogle"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxxxxx"></ins>
<script type="text/javascript">
<!--
(adsbygoogle = window.adsbygoogle || &#91;&#93;).push({});
//-->
</script>

Ce n’est cependant pas suffisant puisque pour définir une valeur correcte à l’attribut data-ad-slot de la balise ins en fonction des cas de figure, il va falloir faire appel à un peu de JavaScript (dans mon cas du jQuery pour simplifier les choses) en plus de retarder l’appel de la publicité jusqu’à ce que le DOM soit prêt. On obtient finalement le résultat suivant :

Code à placer dans l’en-tête de la page :

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<style type="text/css">
@media screen and (min-width: 960px) {
#customadsbygoogle {
display: inline-block;
width: 728px;
height: 90px;
}
}

@media screen and (max-width: 960px) and (min-width: 500px) {
#customadsbygoogle {
display: inline-block;
width: 468px;
height: 60px;
}
}
</style>
<script type="text/javascript">
<!--
browserWidth = window.innerWidth;
if(browserWidth >= 960){
custom_ad_slot = "xxxxxxxxxxxxxxxx";
} else if(browserWidth >= 500){
custom_ad_slot = "xxxxxxxxxxxxxxxx";
}

$(document).ready(function(){
$('#customadsbygoogle').attr('data-ad-slot', custom_ad_slot);
(adsbygoogle = window.adsbygoogle || &#91;&#93;).push({});
});
//-->
</script>

Code à placer dans le corps de la page :

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
id="customadsbygoogle"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot=""></ins>

Et nous voilà a priori bien armés pour un webdesign responsive profitant d’encarts de publicités adaptés, chargés de manière synchrone ou non !