Comment utiliser les annonces Google AdSense sur les sites Web Responsive

Le web design adaptatif ou Responsive web design en anglais est une technique simple mais puissante permettant de modifier le design de votre site pour qu’il puisse s’adapter à n’importe qu’elle taille d’écran; que ce soit les téléphones mobiles, tablettes, ordinateurs de bureau ou même la télévision.

Nous allons faire en sorte que nos annonces publicitaires soit adaptatives ou responsive avec JavaScript. L’annonce sera automatiquement servie en fonction de la largeur du navigateur du visiteur.

Google recommande également le design adaptatif car cette approche améliore l’indexation. D’après Google : ‘Le contenu optimisé pour ordinateur et le contenu optimisé pour mobile utilise une seule et même URL.’

Si vous utilisé des annonces Google AdSense sur votre site web responsive, vous avez sans doute remarqué que, contrairement à votre contenu, les annonces Google ont une largeur fixe et elles ne diminuent ni n’augmentent en fonction de la taille de l’appareil.

Par exemple, si vous utilisez une annonce publicitaire de dimensions 728×90(largeur x hauteur) sur votre site Web, l’annonce peut s’étendre bien au-delà de l’écran de l’appareil si quelqu’un visite votre site Web sur un smartphone (320 pixels de large) ou une tablette de résolution inférieure.

Les annonces Google AdSense ne sont pas encore responsive par défaut, mais vous pouvez utiliser un morceau de code JavaScript pour les adapter à la taille de l’écran. Vous pouvez créer plusieurs ensembles d’annonces (par exemple 768×90, 468×60 et 300×250) et en fonction de la taille (largeur) de l’appareil de l’utilisateur, le format le plus approprié sera affiché.

Voici le code JavaScript correspondant :

<script type=”text/javascript”>
google_ad_client = “ca-publisher-id”;
if (window.innerWidth >= 800) {
google_ad_slot = “ad-unit-1”;
google_ad_width = 728;
google_ad_height = 60;
} else if (window.innerWidth < 400) {
google_ad_slot = “ad-unit-2”;
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = “ad-unit-3″;
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

N’oubliez pas de remplacer les identifiants google_ad_client et google_ad_slot avec vos propres valeurs (vous pouvez les trouver facilement dans votre code JavaScript AdSense).

Le plus important est le paramètre window.innerWidth. Ce paramètre contient la largeur (en pixels) de la fenêtre du navigateur de l’utilisateur et une fois que vous savez cette valeur, vous pouvez donc afficher des annonces AdSense plus grandes ou plus petites .

Bien qu’il est recommandé de vérifier ces modifications de code avec google, cela ne devrait pas, à mon avis, violer les conditions d’utilisations de Google AdSense, car nous ne redimensionnons pas les annonces et nous ne modifions pas le code JavaScript. Nous sommes juste entrain de servir un bloc d’annonces différent basé sur la taille du navigateur du visiteur.