Adsense et le responsive Design

Tu mets la publicité que tu veux il me semble. A partir du moment où c'est clair comme tu l'indique pas de soucis.

Par contre, une pub en display:none, je dis non, là c'est moins joli, surtout si c'est du cpm.

 

Interdiction avec Adsense! Certaines pub (elles sont rares et rapportent peu) de adsense sont en cpm!

 

Bonjours à tous !
J'étais venu ici pour poser la même question. Donc si tu me permets, je vais aussi profiter du topic.

Voila pour moi les solutions:

1-Comme tu as dit le display:none; et block en fonction dès cas
Cependant en faisait ceci le JS s'éxécute quand même d'ou le problème avec les CMP donc cette solution ça sera un ban .

2-Le faire en JS avec un windows.width
La encore ça va poser problème car imaginons j'ai 12ans je prend la largeur du site et joue avec son width il va afficher une fois la pub x une fois la pub y et ainsi de suite donc sans que l'utilisateur recharge la page il aura une pub différente donc pour moi c'est aussi a proscrire

3-User agent
La seul solution pour moi serait avec l'user agent de comprendre a quoi on a affaire, mais c'est la façon la plus dure car il faut couvrir tous les cas et c'est quasi impossible .
Liste non-exhaustive: http://sebastienguillon.com/test/statistiques/agents-utilisateur.php

+304 000 user agent donc je vous laiss imagine le script PHP que vous devrez vous taper :lol:


Donc oui je rentre dnas le débat sans y apporter grand chose

EDIT: j'ai trouvé ceci qui a l'air d'être puissant mais je n'ai pas de tablet pour tester

http://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect

 

Pas envie de me répéter... mais si le bloc est accessible au robot Google Adsense, alors c'est faisable. Sinon, c'est dehors.

Les sites qui gèrent un affichage en largeur et fonction de la résolution n'existe (quasiment) plus, et ce n'est pas pour rien : hormis les sites strictement mobiles, mais dans ce cas, on utilise Ads Mob et plus AdSense.

De toute façon, je ne vois pas l'intérêt d'intégrer un bloc de pub si c'est pour ne l'afficher qu'1 fois sur 5, 10... Ca ne rapportera rien de toute façon. :wink:

 

Gné ?

 

@anemone-clown: Tu portes bien ton nom toi. Les sites qui gèrent l'affichage en fonction de la largeur de la fenêtre sont en constante augmentation.

 

Ah? Il y a effectivement des clowns qui s'ignorent : existerait-il un exemple de site avec de telles fonctionnalités relative à la largeur qui monte régulièrement dans le top 5 de requêtes à 10-50 M de résultats? On est sur un forum de référencement sur WRI, pas sur un forum de "je fais mumuse pendant l'été".

@patapon87 : il existe une version de Adsense spécialisée pour les mobiles dans la mesure où tu crées un site véritablement dédié au mobile (dont le principe est de pouvoir appuyer sur un lien avec le pouce sans grossissement).

 

Mouais, tu passes par Adsense et tu choisis ton format quoi.

Mais mon "Gné" amical s'appliquait aussi àta déclaration du fait qu'on ne fait plus de sites qui ont la largeur qui s'adapte... ou alors on ne parle pas de la même chose. Par exemple pour moi WRI a la largeur de ses colonnes extérieures qui s'adaptent à l'écran...

 

J'ai eu le même souci avec un site fait avec le bootstrap twitter.
La solution que j'ai choisie :
- Détecter le user agent mobile côté serveur => ne pas afficher la pub ou afficher un autre format.
- Mettre la pub dans un div.hidden-phone (cfr.)

Ainsi le display: none pour mobile ne se présente que lors du redimensionnement d'une fenêtre PC (@media (max-width: 480px)).

J'imagine que c'est encore un peu borderline mais ce n'est pas pire que uniquement le display: none ou comme bcp de sites fluides qui n'ont pas mis de min-width et les pubs qui s'entassent n'importe comment.

 

Voilà la réponse officielle de google sur le sujet : http://adsense-fr.blogspot.fr/2012/12/utilisation-du-design-reactif-avec.html

 

@senos: merci

 

Le truc marche bien.... et relativement simple à mettre en place. Ca se complique un peu lorsque l'on a beaucoup d'emplacements et que l'on veut les différencier.

Par contre, le format ne se met à jour qu'au chargement de la page - il n'est pas dynamique si l'on change de format en route

Si quelqu'un a une astuce, je suis preneur... remarque est ce vraiment utile ?????

 

Pas tant que ça !
Le changement graphique on le voit bien quand on fait les tests mais concretement donc pas y avoir grand monde qui s'amuse à bouger la taille de son navigtateur

 

C'est ce que je me disais aussi... le problème se pose peut etre quand on passe du vertical à l'horizontale sur un smartphone

 

Bonjour,

Pour l'instant je suis sous blogger, et j'utilise leur gestion adsense intégrée. Pas de problème pour la version mobile (j'ai viré les annonces mobiles, ça ne rapportait pas grand chose)

Par contre je vais passer sous wordpress et j'utilise un theme responsive.
J'ai bien lu la page que vous conseillez, mais je ne sais pas si j'ai bien tout compris.

Mon thème a 4 affichages possibles : le normal avec résolution supérieure à 960px, de 720px à 959px, de 480px à 719px, et < à 480px

Donc là ce que je devrais faire, pour un seul emplacement d'annonce, c'est créer 4 annonces qui fonctionneraient pour chacun des 4 affichages ? (ou moins si je peux utiliser 1 même type d'annonce pour 2 affichages différents)
Je vais dans mon interface adsense, je crée mes 4 blocs et je récupère leurs identifiants et tailles. Puis je crée un widget texte sur wordpress, avec ça :

<script type="text/javascript">
google_ad_client = "ca-pub****************"; (mon identifiant)
if (window. innerWidth >= 960) {
google_ad_slot = "*********"; (le n° de mon bloc pour l'affichage >960px)
google_ad_width = ***;
google_ad_height = **;
} else if (window.innerWidth > 720) and (window.innerWidth < 960) { (ça se fait ça?)
google_ad_slot = "********"; (le n° de mon bloc pour l'affichage 2)
google_ad_width = ***;
google_ad_height = **;
} else if etc.
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Ensuite, comme normalement je comptais mettre 3 annonces "skyscraper" AdSense, je devrai faire 3 fois ça, mais bon, 3 annonces horizontales, même petites sur le mobile ça va pas le faire :/ je vais me restreindre à 2 je pense, même si 2 c'est déjà moyen..

Enfin voilà, est-ce que j'ai bien compris? Je n'aime pas vraiment faire plein d'essais avec AdSense, j'ai toujours peur de faire quelque chose qui ne vas pas leur plaire...

 

Euh le skyscraper c'est du vertical pas de l'horizontal. Enfin je dis ça je dis rien. :mrgreen:

 

Oui,je voulais mettre 3 annonces skycraper sur le site normal (ce que j'ai actuellement) , qui seraient censées se transformer en 3 petites annonces verticales pour la version mobile (ce qui ferait trop donc)

 

alors? personne n'a de site en responsive design sur lequel il place des annonces adsense?

tiens d'ailleurs même si c'est un peu HS, ça me fait penser que même en affichage normal, j'avais bourrinement mis des règles CSS sur mes zones "texte" où sont insérées mes pubs AdSense :

#text-3,
{
padding-left:5px;
margin-top: -15px;
}

C'est risqué? Y'aurait-il quelque part un tutoriel expliquant le bon usage pour aligner, déplacer, etc. des bannières adsense?

 

J'utilise un theme responsive mais je n'ai pas de script pour afficher les pubs en fonction de la taille de l'écran. J'utilise des formats standards (728*90, 336*280, 300*250). Je suppose qu'il y a moyen de faire bien mieux.

 

Darksider8, j'ai regardé ton site, quand je réduis en petit, je n'ai plus du tout les pubs adsense, c'est normal ? (enfin c'est bien, mais c'est contraire à ce que tu dis)


(par contre la pub adsense "carrée" sur le côté gauche déborde sur le texte lorsque l'on réduit la taille)

Et sinon y'a til un mail de contact Adsense pour quils confirment que ce qu'on fait est ok ou non? (je ne pense pas, mais sait-on jamais...)

 

@pharrell

effectivement, quand on réduit le site est réduit au maximum, c'est la version mobile qui s'affiche (du coup il n'y a plus de pub car je n'ai pas installer de pub au format mobile).

 

Ah ok, mais si ton site est responsive, il n'est pas censé y avoir de "version mobile" non?

Bon sinon j'ai donc tenté ce que j'avais écris : Pour chaque endroit où je veux mettre une pub, j'en ai créé 3 dans mon interface la normale ("skyscraper"), un moyen rectangle horizontal, et un petit rectange horizontal.
Par exemple, pour mon premier emplacement, j'ai mis dans un widget texte ceci :

Code:

<script type="text/javascript">
google_ad_client = "ca-pub-*********";
if (window.innerWidth >= 720) {
google_ad_slot = "********"; 
google_ad_width = 120;
google_ad_height = 600;
} else if ( (window.innerWidth < 720) && (window.innerWidth >= 480) ) 
 {		google_ad_slot = "*********";
		google_ad_width = 468;
		google_ad_height = 15;
	} 
else if (window.innerWidth < 480) {
	google_ad_slot = "*********";
	google_ad_width = 320;
	google_ad_height = 50;
	} 
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Bon pour l'instant ça me fait des trucs un peu bizarre (par exemple pour les réso entre 480 et 720, ça me fait parfois un grand vide (la place du skyscraper en fait), mais si je rafraichis, ça a l'air d'être bon.

Il faut dire que pour l'instant, les pubs n'apparaissent pas, il faut un peu de temps je crois pour qu'elles soient actives.

Mais au niveau du code c'est bon? (à la fois au niveau code, et pour être clean avec google)
(déjà je ne suis pas sûr du "&&" dans le code)

 

oui j'ai mal expliqué : mon design s'adapte aux smartphones, tablettes etc ... lorsqu'on navigue par un smartphone, il n'y a pas de pubs car l'affichage se focalise sur les derniers articles (comme les autres responsive design).

Sinon oui, si tu as créé tes emplacements sur google, il faut un peu de temps avant qu'ils s'affichent.

 

Pour info Adsense m'a répondu que le code était conforme.

Enfin il est ok pour eux au niveau des règles Adsense, mais il doit y avoir un problème car les "petites pubs" ne s'affichent toujours pas

 

darksider86>
Je n'ai pas inspecté le code mais j'ai l'impression que tes pubs sont en display:none sur smartphone non ?

 

@Doubrovski

effectivement, et apparemment, Adsense n'aime pas ça. J'ai fait une petite image pour montrer comment mon site s'affiche suivant les supports, je pense que c'est plus simple pour expliquer :

 

Oui en effet Adsens n'aime pas les display:none

https://support.google.com/adsense/answer/1354736?hl=fr

 

Super, alors là ça tombe à pic pour le design que je suis en train de développer. Mes Meta Queries sont déjà prêtes ^^
C'est exactement ce que je cherchais, pour passer entre autre d'une bannière 728px à 320px selon les écrans.

 

je vais essayé le code de Pharrell, en ajoutant donc des blocks pour les autres tailles. Mais sur smartphone, la barre latérale droite n'apparait pas, mais la pub chargerait tout de même ? Car en testant sur mon iPhone, je ne vois que la pub dans les articles.

 

Il faut que tu regardes dans ta feuille CSS, souvent à la fin avec les Meta Queries. Dans la partie "Phone", il y a surement une div en display:none (la div utilisée par les pubs).
Sinon pourquoi ne pas tester le code fraîchement autorisé par google ?

 

Ah, bien ce nouveau code responsive, mais bon, je crois que j'y étais enfin arrivé avec mon code (reste plus qu'à centrer les bannières avec le CSS)

Mais je comprend pas trop comment fonctionne ce nouveau format, comment fait-on pour définir les tailles des blocs pour chaque affichage?

darksider8 > attention je suis un noob hein mon code comporte peut-être des fautes

 

Avec ce nouveau "Bloc d'annonces réactif", on px imaginer d'avoir 1 seul bloc adsense et de le customiser en CSS. Sans pour autant que ce soit responsive. Si j'ai bien compris, il ne doit pas il y avoir de souci à la seule condition de respecter leurs tailles d'annonces: https://support.google.com/adsense/answer/2953032
Vous en pensez quoi ?

 

D'après ce que j'ai compris, il suffit de créer un bloc d'annonce réactif (sur le site adsense, mais je n'ai pas encore testé).
Puis prévoir le code css. Un exemple est donné par google :

Code:

<style type="text/css">
.adslot_1 {
  width: 320px; height: 50px;
}
@media (min-width:500px) { .adslot_1 {
  width: 468px; height: 60px;
}}
@media (min-width:800px) { .adslot_1 {
  width: 728px; height: 90px;
}}
</style>

En fonction des écrans on modifie la largeur et la hauteur du style css grâce à "@media", ce qui suffit en principe à changer la pub.
C'est la grosse différence avec l'ancien code qui ne fonctionnait pas avec du css.

 

Petite question :

Si on affiche 2 ou 3 pub adsense sur une même page peut-on utiliser 3 blocs d'annonces responsives ? Suffirait donc de créer 3 blocs avec des noms différents exacts?

 

J'aurais tendance à dire 1 bloc adsense et 3 classes css .adslot1 .adslot2 .adslot3 (à vérifier)
Pourras-tu témoigner quand tu auras testé ? Pour voir si la rentabilité de ces blocs a évolué depuis les premiers tests

 

pas compris ta solution :/

Il faut bien que les 3 blocs d'annonce sur la même page aient un identifiant différent non? Pas certain de voir le rapport avec le CSS :mrgreen: