Afin de ne pas faire subir mes publicités adsense à mes visiteurs réguliers, j’ai mis en place un système d’affichage des bannières en fonction de leur refferer. Typo me générant des pages HTML statiques, j’ai été obligé de faire tout cela en Javascript.

La solution propre aurait été d’utiliser la fonction suivante :

display_adsense = function(client, slot, width, height, div) {
  if (document.referrer == "") {
    return(0);    
  }

  var referrers = ["/search", "search.live.com", "ask.com", "images.google", "soso.com", "baidu"];

  for (var i = 0; i < referrers.length; i++) {
    if (document.referrer.toLowerCase().indexOf(referrers[i]+'') != -1) {
      google_ad_client = client;
      google_ad_slot = slot;
      google_ad_width = width;
      google_ad_height = height;

      var e = document.createElement("script");
      e.type = "text/javascript";
      e.src = "http://pagead2.googlesyndication.com/pagead/show_ads.js";
      document.getElementById(div).appendChild(e);
      return(0);
    }
  }  
}

L’appel se faisant dans le window.onload :

window.onload = function() {
   display_adsense("client", "slot", width, height, div);
}

Il est ainsi possible de placer plusieurs encarts publicitaires sur une même page.

Malheureusement, ça ne marche pas, et les comportements sont très différents en fonction des navigateurs (et pas toujours très rationnels).

Si j’utilise le window.onload :

  • Firefox 3 : affiche une page blanche et tourne en boucle sans rien charger.
  • Safari : affiche la bannière adsense au bon endroit, ou à la fin du document, selon les fois, de manière totalement aléatoire.
  • Internet Explorer 7 : rien ne s’affiche, sauf quand je rajoute un alert(“toto”) dans le code, histoire de valider que ma fonction est bien interprétée.

Si j’appelle simplement ma fonction en bas du document :

  • Firefox 3 : affiche la bannière n’importe où dans le document. Firebug me montre bien une div vide, et la publicité dans une div aléatoire (souvent la sidebar, mais pas toujours).
  • Safari : affiche au bon endroit, ou à la fin du document, selon les fois, de manière totalement aléatoire.
  • Internet Explorer 7 : affiche le bloc adsense à la fin du document systématiquement, sauf quand je rajoute un alert(“toto”) dans le code, histoire de valider que ma fonction est bien interprétée.

Selon Anthony Ricaud, cela pourrait venir du fait que Google utilise document.write pour afficher ses encarts publicitaires. Tenter de modifier le DOM après le chargement complet du document avec un script tentant un document.write serait à l’origine de tous mes problèmes, lesquels m’ont pris, au passage, une bonne partie de la journée.

La solution retenue est particulièrement sale, mais a le mérite de fonctionner : appeler ma fonction depuis les div de destination et utiliser moi aussi du document.write.

Ma fonction finale donne alors :

display_adsense = function(client, slot, width, height, div) {
  if (document.referrer == "") {
    return(0);    
  }

  var referrers = ["/search", "search.live.com", "ask.com", "images.google", "soso.com", "baidu"];

  for (var i = 0; i < referrers.length; i++) {
    if (document.referrer.toLowerCase().indexOf(referrers[i]+'') != -1) {
      google_ad_client = client;
      google_ad_slot = slot;
      google_ad_width = width;
      google_ad_height = height;
            document.write('<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>');
      return(0);
    }
  }  
}

L’appel de la fonction se fait alors comme ceci :

<div id="adsense">
    <script type="text/javascript">
        display_adsense(client, slot, width, height);
    </script>
</div>

[Edit]

Je rajoute également la méthode proposée par Sunny Rippert :

function display_adsense(client, slot, width, height, element_id) {
  var referrers = /\(/search|search\.live\.com|ask\.com|images\.google|soso\.com|baidu)/i;
  if (!document.referrer.match(referrers))
    return;

  google_ad_client = client;
  google_ad_slot = slot;
  google_ad_width = width;
  google_ad_height = height;

   document.write('<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>');
}

J’ai également utilisé la méthode utilisant DOMContentLoaded (et ses adaptations sur les navigateurs ne la supportant pas), et le résultat est encore pire, notamment sous Firefox. Si vous connaissez une méthode qui fonctionne pour faire ça proprement, n’hésitez pas à vous signaler, je suis preneur.

Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: