Inside AdSense-Français

Le Blog officiel AdSense en français

Utilisation du design réactif avec AdSense

vendredi 14 décembre 2012
Share on Twitter Share on Facebook
Google
Libellés : Fonctionnalités , Optimisation , Utilisateurs avancés

7 commentaires :

Ricky Web Designer a dit…

C'est ce que je cherchais. Pendant ce temps j'ai toujours des ennuis en essayant de fixer les annonces de conception qui peuvent être disposés souple et réactive pour suivre la taille de l'écran.

merci

18 décembre 2012 à 02:59
ceatin web a dit…

Cet article très important pour les informaticiens ...merci à vous

27 décembre 2012 à 18:29
Javi a dit…

Merci pour cette solution. Cependant elle ne permet que de modifier le format d'une annonce en fonction de la résolution de l'écran.
Mais dans bien des cas pratiques de design il est très utile, voire indispensable de pouvoir afficher ou non des blocs en fonction de la résolution.
Un exemple simple: sur un écran de PC on peut facilement envisager d'afficher trois blocs sur une page. Pour le même site affiché sur un mobile, trois blocs d'annonce, même de format très réduit, me semblent être un peu encombrants.
Autre exemple: affichage d'un bloc d'annonce dans le header pour l'affichage sur PC, comment ne pas l'afficher sur un mobile ?
Merci.

6 janvier 2013 à 02:45
Anonyme a dit…

Superbe cela fait longtemps que je cherchais à le faire.

31 janvier 2013 à 14:22
javi a dit…

Bonjour,

Merci pour cette solution d'implémentation de blocs Adsense pour un site en responsive design.

Après quelques tests j'ai toutefois 2 commentaires :

1. Avec un navigateur sur PC, les annonces ne sont pas redimensionnées lorsque l'on fait varier la largeur de la fenêtre. Un bloc Adsense peut donc selon le cas recouvrir du contenu lorsque l'on fait varier la largeur de la fenêtre.
Exemple : en largeur > 800, j'ai une colonne centrale de 728px. En resolution < 400, cette colonne passe à 300px, ce qui est compatible avec le code donné en exemple dans cet article. Donc si j'ouvre un navigateur dans une largeur > 800, l'annonce affichée aura une largeur de 728px. Si je réduit la largeur du navigateur jusqu'à passer en dessous des 800, puis des 400 px, mon annonce ne sera pas redimensionnée (pas de trigger javascript), donc l'annonce gardera sa largeur de 728 px et dépassera du cadre.
Ce use case de variation de la largeur du navigateur n'est pas des plus pertinents, mais par analogie on peut avoir le même effet sur une tablette lorsque l'on change son orientation: la largeur du navigateur change, mais les blocs Adsense ne sont pas redimensionnés et peuvent donc déborder.

2. ie8 (et probablement les versions antérieures) ne comprennent pas ou n'interprètent pas window.innerWidth. C'est donc l'annonce definie dans le cas par défaut qui sera affichée. Sachant que ce même ie ne tient pas compte des medias queries, ce devrait être la largeur maximale qui devrait être prise en compte par défaut.
Pour résoudre ce problème, il faut simplement modifier le code pour que la valeur par défaut (dans le else sans condition) corresponde à la résolution la plus large.

J'avais déjà posté il y a quelques jours une remarque sur l'impossibilité de cacher des blocs (ce que je comprends) et l'effet "blocs accolés" qui peut découler du changement du layout du site en responsive design.
Je comprends que ce commentaire n'ai pas été publié, étant donné qu'il n'est pas que positif.
Pour les mêmes raisons, je ne m'attends pas à ce que celui-ci soit publié.
Simplement je voulais vous signaler ces limitations en espérant que vous puissiez y apporter une réponse, et je n'ai pas trouvé d'autre canal de communication que les commentaires de ce blog.

En vous remerciant par avance à l'attention que vous voudrez bien porter à mon message.

Cordialement,

Jacky
vincent.jacky@numericable.fr

7 février 2013 à 00:19
Nedmic a dit…

Merci c'est exactement ce qu'il manquait pour une parfaite intégration des annonces adsense.

En espérant effectivement que ce tag soit bien toléré par les équipes de modération, même si dans mon cas j'ai pris soin d'ajouter un lien vers cette page en commentaire dans mon code source.

15 mars 2013 à 21:34
Mathilde a dit…

Merci pour cet article qui me sera fort utile.

23 mars 2013 à 10:41

Enregistrer un commentaire

  

Catégories


  • +1
  • 10 ans; 10 éditeurs
  • AdSense pour les jeux
  • AdSense pour les Vidéos
  • Anniversaire AdSense
  • Autres
  • Autres Produits Google
  • Débutants
  • Divers
  • En savoir plus sur...
  • enquête
  • Evènements AdSense
  • Expériences d'autres éditeurs
  • Fonctionnalités
  • Google Display Network
  • Mobile
  • Nouvelle interface AdSense
  • Optimisation
  • Paiements
  • Politique
  • Pubtalk
  • Qualité de recherche
  • Rapports de performance
  • Règlement
  • Revenus
  • social
  • Témoignages Editeurs
  • Utilisateurs avancés
  • Vidéo


Archives


  • août ( 1 )
  • avr. ( 1 )
  • mars ( 1 )
  • juin ( 5 )
  • mars ( 3 )
  • févr. ( 3 )
  • janv. ( 1 )
  • nov. ( 1 )
  • oct. ( 2 )
  • sept. ( 2 )
  • juin ( 8 )
  • mai ( 13 )
  • févr. ( 1 )
  • déc. ( 5 )
  • nov. ( 11 )
  • oct. ( 9 )
  • sept. ( 10 )
  • août ( 6 )
  • juil. ( 4 )
  • juin ( 2 )
  • mai ( 2 )
  • avr. ( 4 )
  • mars ( 7 )
  • févr. ( 5 )
  • janv. ( 5 )
  • déc. ( 8 )
  • nov. ( 5 )
  • oct. ( 3 )
  • sept. ( 4 )
  • août ( 4 )
  • juil. ( 6 )
  • juin ( 7 )
  • mai ( 8 )
  • avr. ( 10 )
  • mars ( 12 )
  • févr. ( 7 )
  • janv. ( 8 )
  • déc. ( 5 )
  • nov. ( 4 )
  • oct. ( 5 )
  • sept. ( 1 )
  • août ( 2 )
  • juil. ( 4 )
  • juin ( 6 )
  • mai ( 5 )
  • avr. ( 11 )
  • mars ( 7 )
  • févr. ( 7 )
  • janv. ( 2 )
  • déc. ( 4 )
  • nov. ( 3 )
  • oct. ( 3 )
  • sept. ( 6 )
  • août ( 10 )
  • juil. ( 9 )
  • juin ( 6 )
  • mai ( 7 )
  • avr. ( 7 )
  • mars ( 7 )
  • févr. ( 10 )
  • janv. ( 6 )
  • déc. ( 3 )
  • nov. ( 7 )
  • oct. ( 5 )
  • sept. ( 8 )
  • août ( 8 )
  • juil. ( 7 )
  • juin ( 5 )
  • mai ( 5 )
  • avr. ( 7 )
  • mars ( 6 )
  • févr. ( 10 )
  • janv. ( 9 )
  • déc. ( 12 )
  • nov. ( 10 )
  • oct. ( 9 )
  • sept. ( 7 )
  • août ( 7 )
  • juil. ( 13 )
  • juin ( 7 )

Feed

Liens utiles

Get started with AdSense
Sign in to your account
AdSense Help Center
AdSense Help Forum
Envoyez vos commentaires dans le Centre d'aide Google.

L'entreprise

  • Official Google Blog
  • Public Policy Blog
  • Student Blog

Les produits

  • Official Android Blog
  • Chrome Blog
  • Inside AdMob

Développeurs

  • Ads Developer Blog
  • Android Developers Blog
  • Developers Blog
  • Google
  • Privacy
  • Terms