Se connecter / S'enregistrer
Votre question

Adsense responsive javascript

Tags :
  • Google
  • Javascript
  • Sites Internet
  • Script
  • Programmation
Dernière réponse : dans Programmation
29 Octobre 2012 14:22:44

Bonjour,

je suis en train de finaliser un site internet responsive. J'ai un seul ennui je cherche à éditer un script qui me permettent de changer la taille d'une publicité adsense en fonction de la résolution de l'écran. Pour l'instant j'ai ceci :

  1. <script type="text/javascript">
  2. google_ad_client = "ca-publisher-id";
  3. if (window.innerWidth >= 800) {
  4. google_ad_slot = "ad-unit-1";
  5. google_ad_width = 728;
  6. google_ad_height = 60;
  7. } else if (window.innerWidth < 400) {
  8. google_ad_slot = "ad-unit-2";
  9. google_ad_width = 300;
  10. google_ad_height = 250;
  11. } else {
  12. google_ad_slot = "ad-unit-3";
  13. google_ad_width = 468;
  14. google_ad_height = 60;
  15. }
  16. </script>
  17. <script type="text/javascript"
  18. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  19. </script>


J'ai un problème, cela fonctionne avec une résolution fixe mais quand je redimensionne la page les pubs restent comme elles étaient au premier chargement (donc elles viennent empiéter sur mon contenu principal) ! Il y a t'il un meilleur choix que window.innerWidth car je ne sais pas si tous les navigateurs le supporte et il y a t'il une possibilité de recharger le script à chaque redimensionnement de page pour que les publicités soient adaptés ?

Et dernière question est il possible d'entourer deux dimensions (exemple: if window.innerWidth entre 400 et 600 px) comment écrire cela ?

Merci par avance de me lire...

Yoann

Autres pages sur : adsense responsive javascript

a c 232 L Programmation
29 Octobre 2012 19:54:08

Salut,

Vu que tu exécutes le code directement dans le <script>, ça s'exécute au chargement de la page.
Tu as un évènement JavaScript qui t'indique quand la page est redimensionnée: window.onresize, il faudra mettre tout ton code dans une fonction, et l'exécuter sur le onresize.

Pour entourer 2 dimensions :
  1. if (window.innerWidth >= 400 & window.innerWidth <600) {
  2. // code
  3. }
29 Octobre 2012 21:07:16

Merci beaucoup omar je vais tenter de le coder comme tu dis. Mais est ce que c'est une bonne méthode pour tout les navigateurs ? j'ai l'impression qu'internet explorer est capricieux avec window.innerWidth Bon je vais vérifier cela.

Merci de ton aide.
a c 232 L Programmation
30 Octobre 2012 09:35:03

En effet, avec IE, ça serait plutôt avec
  1. document.documentElement.clientWidth


Donc tu mets ta largeur dans une variable :
  1. var width = window.innerWidth || document.documentElement.clientWidth;


Et tu compares avec ta variable width
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS