Portrait Olivier Duffez

Olivier Duffez

Créateur de WebRankInfo,
consultant en référencement

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

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.

Cet article vous a-t-il plu ?

Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

9 commentaires

Goudie

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.

Répondre
Jimmy

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 ??

Répondre
Olivier Duffez

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.

Répondre
Alvyn

Ç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 :
– 250×250
– 125×125
– 468×60 (car réorganisation des rubriques vu que le site est responsive)
– retour 250×250

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).

Répondre
Alvyn

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 ?

Répondre
Alvyn

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 !!!

Répondre
Bernard

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 ?

Répondre
Jérôme

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/

Répondre
Olivier Duffez

Merci Jérôme

Répondre