Vous êtes ici : Dossiers référencement > Google AdSense

Membre WebRankInfo ?

S'inscrire Aide

Google AdSense annonce la sortie d'un code compatible responsive design

Par , Jeudi 1 août 2013

On l'attendait depuis très longtemps, c'est officiel mais encore en version bêta : un code compatible responsive design pour les annonces AdSense. Le code est asynchrone pour optimiser la vitesse de chargement.

On discutait souvent de responsive design pour AdSense dans le forum... Vous allez donc pouvoir adapter correctement les publicités selon l'appareil ou la résolution de l'écran de l'internaute, tout en optimisant la vitesse de chargement de vos pages. En voilà une bonne nouvelle, non ?

Par contre il va falloir bosser votre Javascript et vos CSS media queries...

Depuis mars 2013, Google avait autorisé la modification du code, ce qui ouvrait la possibilité d'une adaptation des formats de pub à la résolution de l'écran de l'internaute.

Depuis le 2 juillet 2013, Google propose un code asynchrone pour AdSense.

Depuis ce 31 juillet 2013, Google propose donc en version beta un code asynchrone compatible responsive design.

En gros, vous devez d'abord un ad unit "responsive" (on parle aussi de design réactif) :

Ad unit adsense responsive design

Ensuite, vous devez modifier les media queries CSS du code :

Code JS CSS adsense responsive design

Qu'en pensez-vous ? Si vous l'intégrez sur votre site, donnez-nous les adresses de sites !

On en discute dans le forum : le code AdSense officiel pour des annonces responsive design.

A propos de l'auteur : Olivier Duffez Olivier Duffez sur Google+ Olivier Duffez sur Twitter Olivier Duffez sur Facebook Olivier Duffez sur Pinterest Olivier Duffez sur LinkedIn

Consultant en référencement, Olivier Duffez a travaillé pour les plus grands sites (Doctissimo, FNAC, RueDuCommerce...). Il édite le site WebRankInfo qu'il a créé en 2002, devenu la + grande communauté francophone sur le référencement (250.000 membres, 1,4 million de posts). Il a également créé la société Ranking Metrics, leader des formations emarketing en France (SEO, AdWords, Analytics, réseaux sociaux).

Vous avez aimé cet article ? Partagez-le !

Vous aimez WebRankInfo ? Suivez-nous !

Si vous souhaitez publier un extrait de cet article sur votre site, assurez-vous de respecter les conditions générales d'utilisation de WebRankInfo.

Vous devriez lire aussi :

9 commentaires

  1. Goudie a dit le

    C'était déjà possible grâce à la seule et unique modification de code autorisée (avant que cela devienne finalement permis) mais là c'est enfin une vraie solution qui va simplifier les choses à priori !

    Je vais y passer très bientôt.

  2. Jimmy a dit le

    Ca fait un moment déjà que c'est disponible, t'es à la bourre Olivier ;-)
    En vacances peut être ? :-)

    Au faite on peut plus mettre d'url associé à notre nom ??

  3. Alvyn a dit le

    Ça c'est qqchose que j'attendais depuis un moment ! Merci à WRI pour l'info :) Je viens de tester et ça marche plutôt bien et c'est assez facile à mettre en œuvre.

    Pour voir ce que ça donne, RDV sur http://www.alvyn-kaplan-photographe.fr , le site est en ligne depuis peu donc cette actu tombe très bien.

    Les 2 Adsense sont à droite (puis centrés sur tablette et smartphone) et avec le même code (1 seul include / 1 seul code Adsense donc) le format passe successivement (d'un écran full HD à un smartphone) par :
    - 250x250
    - 125x125
    - 468x60 (car réorganisation des rubriques vu que le site est responsive)
    - retour 250x250

    Dernière remarque : pour tester, quand vous redimensionnez la fenêtre, le bloc Adsense ne change pas de taille (c'est normal), il faut rafraîchir la page dès qu'on passe sur un nouveau format (= simuler le chargement naturel de la page via le soft/hard équivalent à la résolution de votre fenêtre de test).

  4. Olivier Duffez a dit le

    Non Jimmy, je ne suis ni à la bourre ni en vacances (je l'étais en juillet par contre tu as raison), mais relis les dates données dans mon article, elles sont bonnes a priori.

  5. Alvyn a dit le

    Par contre (cf. message précédent) toujours pas de méthode "validée/acceptée par Google" pour faire un display:none sur un bloc suivant la taille de l'écran ?

  6. Alvyn a dit le

    Epilogue (Cf. mes 2 messages précédents). J'ai fait de nombreux tests sur plein de navigateurs et supports (PC, mac, smartphones, tablettes...) mes conclusions :
    - Le nouveau code "responsive" est mal géré sur certaines tablettes (iPad mini entre autre) qui n'affichent pas le bon bloc Adsense (malgré des règles CSS de redimensionnement suivant la résolution d'écran/fenêtre plus que simplistes à interpréter par le navigateur... mystère)
    - Si on pivote l'affichage, le bloc Adsense n'est pas dynamique et reste à la taille de la fenêtre précédente (portrait ou paysage). Ce PB est bien annoncé par Google, mais en pratique c'est vraiment pas top question "expérience utilisateur".
    - Concernant le code Asynchrone ("responsive" ou standard) il bloque l'affichage de la page (ça mouline non-stop) sur certains navigateurs (Opera entre autre) et certaines tablettes (Galaxy Note 8 entre autre).

    Conclusion : retour au vieux code Adsense non responsive et non asynchrone. Vive le progrès !!!

  7. Bernard a dit le

    J'attends aussi surtout le display:none de manière légale.

    Les modifications précédentes étaient déjà plus ou moins disponibles depuis qu'on pouvait bidouiller le javascript. Par contre, le display none est encore un gros problème avec l'Asynchrone. Avec le synchrone, quelques hacks sont possibles (légaux mais cela reste des hacks). Il faudrait une solution 100% Google. A moins que quelqu'un ait une nouvelle solution ?

  8. Jérôme a dit le

    Désolé, je reviens des vacances donc je passe un peu tard par rapport à la mise en ligne de ton article Olivier.

    J'avais aussi rédigé un article avec les différentes méthodes dont nous disposons actuellement pour faire de l'adsense Responsive. Je pense que c'est un bon complément d'information pour ton article :
    http://www.lije-creative.com/adsense-responsive-methodes/

  9. Olivier Duffez a dit le

    Merci Jérôme

Postez un commentaire !

Les champs marqués du signe * sont obligatoires. L'adresse email ne sera pas affichée.

En postant un commentaire, vous acceptez les CGU du site WebRankInfo.

Cherchez dans tous les dossiers

Cherchez par mots-clés dans ~2000 articles :

Formation référencement et webmarketing

Venez chez Ranking Metrics vous former au référencement, à Google Analytics et aux réseaux sociaux ! Plus de 4000 entreprises sont déjà venues (financement possible par OPCA, DIF...).

Préparés et animés par Olivier Duffez (WebRankInfo) et Fabien Faceries (AgentWebRanking), 2 professionnels reconnus dans le domaine, nos modules sur le référencement naturel sont très complets tout en laissant une grande place à l'interactivité pour répondre à toutes les questions des participants.

Pour connaître le plan détaillé de chaque module, le prix, les dates et les lieux, consultez le site de Ranking Metrics (organisme de formation).

Hébergement web

Hébergement web mutualisé et dédié

Pour un bon référencement, il faut un bon hébergeur. Testez Sivit by Nerim, l'hébergeur choisi par Olivier Duffez pour son site WebRankInfo.

A partir de 3€ HT/mois.