Google Adsense & Ajax
par
Skreo,
le 10 Mars 2007 à 22:55 (modifié le 23/03/2007 à 23:00)J'ai décidé d'utiliser la régie Google Adsense pour les publicités affichées sur EklaBlog.com. Le problème, c'est que Google n'a pas prévu l'utilisation des annonces sur des pages chargées par Ajax.
Au début, 2 solutions se présentaient à moi :
- Essayer d'inclure normalement le code de l'annonce : Au premier chargement de la page, pas de problème, mais elle ne s'affiche plus quand le contenu de la page change, car le script ne peut plus être exécuté...
- Utiliser une iframe (eurkk... pas valide...) contenant la pub, rechargée à chaque changement du contenu de la page
Il faut savoir que la page javascript de google (http://pagead2.googlesyndication.com/pagead/show_ads.js) affiche une iframe contenant les annonces avec la fonction document.write, fonction native de javascript. L'astuce consiste à modifier cette fonction, pour gérer l'affichage de la pub.
On va gérer l'affichage de la pub par une fonction qui sera appelée à chaque chargement de page par Ajax. On verra cette fonction après.
Enfin, le dernier problème, c'est que Google n'autorise pas plus de 3 affichages de publicités par page. Et bien sûr, dans un site Ajax, il n'y a pas de rechargement complet de page. Donc à priori, la pub s'affiche au chargement de la page, et aux 2 prochains changements du contenu de la page. Le truc c'est de supprimer toutes les variables créées par Google. Ainsi, Google croit toujours qu'il en est à la première pub.
Voici le code javascript de la fonction qu'on va utiliser pour afficher la pub :
<script type="text/javascript">
// Affiche la publicité Google
function showAdGoogle(){
// On supprime toutes les variables créées par Google :
for(i in window){
if(i.substring(0,7)=="google_"){
window[i] = null;
}
}
// Variables fournies à google pour l'apparence de la pub
google_ad_client = "pub-8434410332296691"; // Id de l'utilisateur
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_color_border = "0000FF";
google_color_bg = "DDDDFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
var s = document.createElement('script'); // On crée une balise script pour charger le script de Google
s.type = 'text/javascript';
s.src = "http://pagead2.googlesyndication.com/pagead/show_ads.js";
document.body.appendChild(s);
}
// Redéfinition de document.write pour l'affichage de la pub Google Adsense
document.write = function(t){
var d = document.getElementById("content_pub_google");
if(d) d.innerHTML += t;
else document.body.innerHTML += t;
}
</script>
Et dans la page, pour afficher la pub :
<div id="content_pub_google" style="width: 468px;"></div>
<script type="text/javascript">
showAdGoogle();
</script>
Lorsque la page est chargée par Ajax, il faut passer le code "showAdGoogle();" dans des balises <js> par exemple, et traiter le xml pour exécuter le js. Et bien sûr il ne faut pas oublier de remettre le div content_pub_google
Pour ça, rien de plus simple : si la variable contenant xml s'appelle reponse :
for(var i=0;i<reponse.getElementsByTagName("js").length;i++)
setTimeout(reponse.getElementsByTagName("js")[i].firstChild.nodeValue, 0);
Voilà, j'espère que ce petit tuto pourra aider quelqu'un
Laisser un commentaire
Tags : google,
pub,
page,
script,
document
Suivre le flux RSS des commentaires de cet article
Revenir à la liste des articles
Haut de page
Actions
Aller à l'accueil
Chercher un article
Connexion
Créer mon blog
Vous avez reçu un nouveau message !
