Google AdSense : Adapter la publicité au responsive design

5
1 étoile2 étoiles3 étoiles4 étoiles5 étoiles (5,00/5 - 6 vote(s))
Google AdSense & Responsive webdesign

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 !

5 Commentaires

  1. Bonjour, un bien bel article :)

    Le deuxième exemple qui utilise jQuery et les media queries a-t-il une incidence sur les statistiques AdSense que ce soit sur le taux de clic ou affichage ?
    Google n’aime pas trop les modifications sur script donc je me pose la question.

    Bien à vous
    Aurélien

    • Bonjour Aurélien,

      Ravi que cet article te plaise, merci ;)

      Peu de temps après la publication de ce tutoriel Google a diffusé un document similaire pour Créer un bloc d’annonces réactif donc pas de souci de ce côté là.
      Pour ce qui est du CTR ou l’affichage, je ne vois pas trop ce qui t’inquiète.

      Bon amusement avec tes publicités !

  2. Bonsoir,

    Super article, je l’ai mis en place sur l’index de mon site et je vois déjà une grande différence sur un iphone. En revanche j’ai une petite question, est-ce normal les xxxxxxxx du custom_ad_slot ? Je pige pas trop à quoi ils servent et si je met un numéro, ça marche moins bien..

    • Bonjour,

      Désolé pour la réponse quelque peu tardive.

      L’idée est de charger tel ou tel format de publicité, et donc définir la valeur de la variable custom_ad_slot dans chacun des cas de figure. Il s’agit du code d’annonce AdSense ;)

      Bonne journée.

LAISSER UN COMMENTAIRE

Message du commentaire manquant
Auteur du commentaire manquant