Astuces webmasters

Une intégration d’adsense réussie

Le 4 novembre 2007 à 20:24 par chris

Adsense, c’est une publicité peux visible mais ayant besoin de beaucoup de visibilité.

En effet, a force de voir d’adsense partout, on ne la voit plus du tout!

C’est pourquoi réussir l’intégration des ads sur son site est très important pour augmenter son taux de clic. L’intégration d’une pub doit être une mise en avant
Voici quelques modèles d’intégrations originales, en espérant vous donner de l’inspiration.

adsenses

Comment réaliser un Ads customisé? C’est très facile

On crée une image qui peut contenir l’adsense un fond uni , un contour original

adse

ensuite, on génère son code adsense. Choisissez la même couleur pour le contour et le fond , précisez: “annonces textuelles uniquement”

créer un div et sa class CSS

  1.  
  2. .adscustom {
  3. width: 220px;
  4. background-image: url(bg-adsense.jpg);
  5. background-repeat: no-repeat;
  6. text-align: center;
  7. padding-top: 20px;
  8. height: 180px;
  9. }
  10.  

jouez sur le padding-top pour bien placer l’adsense en hauteur dans le div

<div class="adscustom">

<script type="text/javascript"><!--
google_ad_client = "pub-8687211045450536";
google_ad_width = 180;
google_ad_height = 150;
google_ad_format = "180x150_as";
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "003366";
google_color_bg = "003366";
google_color_link = "FFFFFF";
google_color_text = "AECCEB";
google_color_url = "AECCEB";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

et voici le résultat final:


20 commentaires »

Gravatar

Commentaire de Flavien

le 4 novembre 2007 à 21:16

Et pour le mettre en place, on l’entoure d’un “div” et ensuite on utilise la feuille de style CSS habituelle ?

Gravatar

Commentaire de billyboylindien

le 4 novembre 2007 à 21:25

Des urls que l’on puisse chiper du code ? :p

Gravatar

Commentaire de chris

le 4 novembre 2007 à 21:25

@ Flavien; Tout à fait, un adsense, c’est juste une iframe et attention: sans toucher au code de google.

@ Billyboylindien, mieux je préparerai un tuto

Gravatar

Commentaire de chris

le 4 novembre 2007 à 22:10

voilà, Billyboylindien c’est mis à jour

Gravatar

Commentaire de Fran6

le 4 novembre 2007 à 23:44

T’es sûr que c’est autorisé par Google ??? J’ai déjà vu ce genre de custo plusieurs fois mais à chaque fois, ce n’était pas autorisé par les règles d’utilisation d’Adsense…

PS: au fait, il m’est impossible de laisser un commentaires sous Safari… snif… ;-)

Gravatar

Commentaire de chris

le 5 novembre 2007 à 9:57

@Fran6 “il m’est impossible de laisser un commentaires sous Safari” quoi sur ce blog? c’est pourtant le formulaire classique de wordpress, pas d’ajax ni rien de spécial. sur l’ancien thème par contre j’utilisais ajax pour charger une partie du formulaire afin de contrecarrer les bots

c’est totalement autorisé vu que l’on ne touche pas du tout au code adsense , et la customisation CSS se fait sur la page et non sur l’adsense. mais je vois ce que tu veux dire, il est possible d’inclure le script d’adsense via php ou ajax et dans ce cas, tu peux toucher au style de celui-ci

Gravatar

Trackback de Bizet's Blog | Blogging, Web2.0, Dotclear et Dotclear2

le 5 novembre 2007 à 13:02

Stylez vos annonces Adsense avec les CSS…

Les annonces fournies par Google Adsense n’ont pas un design très agréable. On pourrait même plutôt dire qu’elle ne sont pas belles et cassent parfois des design de blogs ou de sites qui eux sont jolis. Or il est tout à fait possible de les styk…

Gravatar

Trackback de Bizet's Blog | Blogging, Web2.0, Dotclear et Dotclear2

le 5 novembre 2007 à 13:07

Google autorise officielement la stylisation des annonces adsense via CSS…

Suite à mon billet d’il y a quelques jours sur la personnalisation des annonces adsense et à 2 commentaires de (Ze)Franck et de lebazzar , j’avais envoyé un mail à Google Adsense pour connaitre leur avis sur la question. En voici le contenu…

Gravatar

Commentaire de chris

le 5 novembre 2007 à 14:29

@ Bizet’s Blog : c’est pas mal ça, on a publié quasiment le même article en s’inspirant de ma même source

Gravatar

Commentaire de Guillaume

le 5 novembre 2007 à 16:15

Comme quoi ;)

Gravatar

Commentaire de skippy

le 5 novembre 2007 à 16:59

Et que pensez-vous de celle-ci : http://shakelist.com ?
Si vous avez des suggestions n’hésitez pas ;)

Gravatar

Commentaire de Fran6

le 5 novembre 2007 à 23:31

Chris > Pour ce qui est de Safari, en fait, je ne peux pas laisser de commentaire. Je peux saisir mon nom et le reste mais je ne peux pas laisser de commentaire… D’ailleurs, la case est toute petite…

Gravatar

Pingback de Pascal Van Hecke - Daily Links » 2007 » November » 05

le 6 novembre 2007 à 2:49

[…] Une intégration d’adsense réussie [French] nice examples on customized Adsense layouts, rather to make them stand out and avoid “Adsense blindness” than to blend in. I doubt that it’s compliant with the Adsense policies though… (via Denis Balencourt) (tags: adsense customization customisation webdesign advertising css) […]

Gravatar

Commentaire de chris

le 6 novembre 2007 à 9:56

à ben voilà, je vais m’occuper de ça, alors.

Gravatar

Commentaire de Arkan

le 6 novembre 2007 à 14:58

Il me semblait aussi avoir lu que Google n’aimait pas ce genre de customisation car à terme ils comptent les proposer eux-mêmes. Mais je ne retrouve pas ou et ça a peut-être changé depuis ;)

Gravatar

Commentaire de chris

le 7 novembre 2007 à 9:56

Je recommence: Ici on ne touche nullement a adsense mais au css de la page html.

Gravatar

Pingback de Webjamy’s blog » Archive du blog » Quelques liens

le 7 novembre 2007 à 13:51

[…] exemples d’intégrations […]

Gravatar

Commentaire de Laddy

le 7 novembre 2007 à 15:04

Merci pour votre astuce j’ai pu customiser ma publicité adsence.

Gravatar

Pingback de Denis au fil du web » links for 2007-11-06

le 7 novembre 2007 à 16:52

[…] Smashing Coding » Une intégration d’adsense réussie Adsense, c’est une publicité peux visible mais ayant besoin de beaucoup de visibilité. A force de voir d’adsense partout, on ne la voit plus du tout! Quelques trucs et astuces pour y remédier (tags: adsense howto pub) […]

Gravatar

Pingback de (parenthese.be) » Blog Archive » HTTParty #18

le 12 novembre 2007 à 20:40

[…] voir, on ne le voit plus. Via Smashing Coding, Chris propose une astuce bien sympatique pour remettre AdSense en évidence […]

Laisser un commentaire

Votre Nom

Votre E-mail (obligatoire mais ne sera pas publié)

Votre Site ou blog

Votre commentaire

Valid XHTML 1.0 Transitional