Godefroy de Compreignac

Web development

Google Adsense & Ajax

par Skreo, le 21 Janvier 2007 à 13:52

J'ai décidé d'utiliser la régie Google Adsense pour les publicités affichées sur EklaBlog.com (qui sortira dans 1 ou 2 mois). 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>
[code=javascript]
<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>[/code]

Et dans la page, pour afficher la pub :

<div id="content_pub_google" style="width: 468px;"></div>
<script type="text/javascript">
showAdGoogle();
</script>
[code=html4strict]
<div id="content_pub_google" style="width: 468px;"></div>
<script type="text/javascript">
showAdGoogle();
</script>
[/code]

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);
[code=javascript]
for(var i=0;i<reponse.getElementsByTagName("js").length;i++)
    setTimeout(reponse.getElementsByTagName("js")[i].firstChild.nodeValue, 0);
[/code]

Voilà, j'espère que ce petit tuto pourra aider quelqu'un ;-)

Partager cet article :
Tags : google, ajax pub
Suivre le flux RSS des commentaires de cet article
Revenir à la liste des articles
Haut de page
Commentaires

1

divarvel

21 Janvier 2007 à 17:52

Bien joué :p
Mais tu oublies de mentionner que il ne faut pas avoir à utiliser document.write par la suite.

En effet, on ne peut pas redéfinir la fonction à sa valeur native de manière efficace sur tous les browsers en même temps.

Comme d'hab ca marche sous firefox et opera, et c'est IE qui soule... Merci microsoft d'avoir su mettre à jour ie sans pourtant sacrifier sa nullité.
C'est neuf c'est beau (hum !) mais c'est toujours aussi foireux.

www.getfirefox.com

2

Skreo

21 Janvier 2007 à 18:00

Chut fallait pas le dire !!
Enfin on peut toujours redéfinir document.write pour afficher du texte à l'endroit qu'on veut ^^

3

bricedenice2929

21 Janvier 2007 à 21:26

en plus IE supporte toujours par la transparence mais je sais pas pour IE 7

4

Skreo

26 Janvier 2007 à 18:54

Tu parles des png transparents sans doute ?
Oui IE6 ne les supporte pas, mais IE7 les affiche bien. Enfin comme beaucoup de gens sont (malheureusement) encore sous IE6, j'utilise un pnghack.htc quand j'ai besoin d'afficher des png transparents

5

bricedenice2929

27 Janvier 2007 à 11:46

Oui c'était la transparence des png comme je fais du graphisme je demandais ^^"

Je vais essayez de trouver ton logiciel là

Mais avec firefox ça marche impec' :-)

6

bricedenice2929

6 Février 2007 à 22:39

De la daube je dis IE 7 lol Opéra vais l'essayer mais je reste sous firefox

7

bricedenice2929

11 Février 2007 à 15:37

encore moi
il y a une grosse faille dans google
c pas du php mais je sais pas si tu connais
je sais pas comment et où sont les mots de passe de murties mais avec google on peut les trouvés avec un index of nom du site passwd donc si tu connaisais pas je le dis car il vaut mieu tt protégé
mais je sais pas si ton systeme de mot de passe marche comme ça donc voilà je dis meme si ça te sert a rien
dsl pour les fautes mais suis ac la psp donc la flemme de bien écrire ^^

8

Skreo

11 Février 2007 à 17:51

Sur quel site pourri tu as trouvé cette astuce ? Faut vraiment être con pour placer un htpasswd dans un dossier dont on peut voir l'arborescence.
Rassure toi, les mots de passe de Murties sont stockés dans une BDD Mysql, donc aucun risque

9

bricedenice2929

11 Février 2007 à 18:46

J'ai aps chercher j'ai trouvé ça
Je connaisais le "Artiste" last modified mp3 "index of" -html -htm -php -asp
Et donc j'ai voulus testé un truc et hop ça a donner les mdp d'un site O_o
Donc je voulais demander quand même mais bon je préviens les potes webmasters que je connais comme y en a certain qui sont un peu "con" ben je leur ai dit aussi ^^"

10

bricedenice2929

19 Mars 2007 à 19:32

Mais bon ça sert a rien mais en poussant les recherches on peut trouver des choses ...

Ajouter un commentaire
Nom / Pseudo :

E-mail (facultatif) :

Site Web (facultatif) :

Commentaire :

Recopiez le code inscrit sur l'image :

Ce code est un code de sécurité pour empêcher le spam en vérifiant que la personne qui poste est bien un humain et non un robot.

Haut de page

Blog de Skreo :: Webdev && High-Tech

Web development

Google Adsense & Ajax

Commentaires