Utiliser les bannières Google AdSense en Responsive Design

Pour rappel, le responsive design permet d’adapter automatiquement un site web au format du terminal (écran PC, portable, tablette, smartphone, etc.).

Google AdSense propose un format de bannière en responsive design. Cependant, vous avez peut être envie d’avoir la main sur les formats de bannières à afficher en fonction de la taille d’un écran, et dans ce cas, le code fourni ne le permet pas.

De plus, ce format de bannière prend en compte la largueur totale de l’écran, ce qui ne convient pas toujours. Exemple : si vous avez une bannière 300X250 sur une colonne latérale (sidebar), la largueur à prendre en compte correspond à celle de la colonne, et non pas de l’écran…

Ce format est donc pratique pour afficher une bannière horizontale prenant tout la zone, comme un 728X90, qui s’adaptera selon la taille de l’écran.

Dans un premier temps, je vous explique comment créer une bannière “responsive design” avec Google AdSense, et ensuite, comment créer une véritable bannière Google AdSense en responsive design.

Créer une bannière Responsive Design avec l’interface Google AdSense

La procédure est la suivante :

  • Se connecter sur Google AdSense
  • Se rendre sur “Mes annonces” et cliquer sur “Nouveau bloc d’annonces”
  • Choisir dans taille de l’annonce “Bloc d’annonces réactif”
  • Récupérer le code associé et l’ajouter sur votre site !

adsense

Maintenant, bien plus utile, la véritable bannière responsive design.

Créer une vraie bannière Google AdSense en Responsive Design (asynchrone)

Rendez-vous sur Google AdSense pour créer une nouvelle bannière ou sinon, utiliser une bannière déjà existante pour votre site. Il faut surtout noter le code (pas le code source) de la bannière concernée qui est visible dans “Mes annonces” (colonne spécifique “Code” avec un numéro).

Voici le code permettant d’afficher la bannière :

Copier le code ci-dessus sur votre page web puis adapter les formats souhaités en fonction des dimensions. Pensez à indiquer votre code client AdSense et le numéro de la bannière à utiliser.

Si vous affichez plusieurs bannières sur une même page, il faut changer “google-ads-1″ dans le div au début du code par “google-ads-2″, etc… (pour éviter d’afficher plusieurs fois un id similaire sur la page).

A savoir que nous utilisons cette solution sur WebEntrepreneur, pour la bannière en haut de page par exemple !

Partager sur vos réseaux sociaux :
Recevez la newsletter hebdomadaire :
  • netsil

    Bonjour,

    Merci pour ce post vraiment très intéressant. Je suis très intéressé par la solution que vous proposez car je rencontre actuellement quelques problèmes avec le nouveau format d’annonce responsive proposé par adsense. J’ai juste 2 questions :

    1) avez vous la certitude que ce code est autorisé par adsense ?

    2) j’ai vu aussi cette solution proposé sur le blog d’adsense : http://adsense-fr.blogspot.fr/2012/12/utilisation-du-design-reactif-avec.html ; quelle est la solution la plus efficace ?

    Merci d’avance pour vos éclaircissements…


  • netsil

    Bonjour,

    Merci pour ce post vraiment très intéressant. Je suis très intéressé par la solution que vous proposez car je rencontre actuellement quelques problèmes avec le nouveau format d’annonce responsive proposé par adsense. J’ai juste 2 questions :

    1) avez vous la certitude que ce code est autorisé par adsense ?

    2) j’ai vu aussi cette solution proposé sur le blog d’adsense : http://adsense-fr.blogspot.fr/2012/12/utilisation-du-design-reactif-avec.html ; quelle est la solution la plus efficace ?

    Merci d’avance pour vos éclaircissements…