web-dev-qa-db-fra.com

Unités de lien réactives dans AdSense

À l'heure actuelle, il semble que le seul moyen d'implémenter des blocs d'annonces Google AdSense pour un site Web reposant sur un concept réactif consiste à utiliser les blocs d'annonces adaptatifs de Google. Cependant, il semble qu’aucune option de réponse ne soit disponible pour les unités de liaison.

Existe-t-il un moyen d'implémenter les unités de lien Google AdSense sur une conception réactive sans perturber la conception et sans que le contenu ne soit en dehors de la fenêtre d'affichage?

J'ai posé la même question sur les forums de produits Google et ils ne pouvaient pas aider non plus.

google-adsense
5
Rana Prathap

Je sais que c'est un sujet ancien, mais sa pertinence est de plus en plus grande de nos jours (2015-06-17). Comme Google le mentionne dans ce document , vous êtes autorisé à masquer toutes les annonces (pas uniquement les unités liées aux annonces) "sur des appareils mobiles plus petits" . Par exemple, si vous souhaitez spécifiquement que le segment d'annonce n'apparaisse pas dans les écrans d'une largeur inférieure à 400 px, vous pouvez le faire (exemple de Google):

<style>
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>

Citant Google:

vous pouvez définir un paramètre avec les requêtes de média CSS de sorte que aucune demande d'annonce ne soit faite et qu'aucune annonce ne soit affichée

C'est ce qui se passe avec la requête multimédia utilisant display: none: aucune annonce ne sera demandée, vous ne risquez donc pas d'enfreindre les règles Adsense.

Dans le HTML et le Javascript, il vous suffit d'utiliser la classe adslot_1, le reste de leur code ne nécessite aucune modification .

<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).Push({});</script>

Ce faisant, vous réalisez que la hauteur et la largeur de votre emplacement publicitaire pour d'autres largeurs d'écran peuvent être modifiées en conséquence, ce qui signifie que votre bloc d'annonces devient réactif sans utiliser le "bloc d'annonces réactif de Google" standard.

Solution de largeur extensible

Par conséquent, en particulier dans un bloc d'annonces lien , je n'utilise normalement même pas display: none. Vous pouvez vous attaquer au problème avec leur approche en largeur extensible , qui est encore l'exemple de Google:

<style>
.adslot_1 { display:inline-block;min-width:100px;max-width:970px;width:100%;max-height:100px; }
</style>

En définissant une largeur minimale et maximale alors que la width elle-même s'adapte à l'écran (en la définissant sur 100%), l'option est compatible avec toutes les largeurs des annonces de liens, à partir des plus grandes (728x15 et 200x90). aux plus petits actuellement (468x15 et 120x90), et vous n'avez même pas besoin de requêtes @media!

Par conséquent, si à l'avenir Google crée des unités de liens plus petites, votre unité les prendra en charge, les demandera et les affichera! Cela est dû au ) dimensionnement automatique d'Adsense en fonction de l'espace disponible .

Requêtes spécifiques @media pour des solutions de tailles d'annonce spécifiques

Si vous préférez toujours définir des largeurs et des hauteurs fixes (pour une annonce de lien particulière), vous pouvez alors préciser encore mieux vos requêtes multimédia avec min-widths et max-widths. Par exemple.:

<style>
.adslot_1 { display:inline-block; width: 728px; height: 15px; }
@media (max-width: 479px) { .adslot_1 { width: 468px } }
@media (min-width: 480px) and (max-width: 799px) { .adslot_1 { width: 728px } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; text-align: center } }
</style>

Cela permettra aux annonces de liens 468x15 et 728x15 d'être affichées sous des largeurs d'écran de 800 pixels et à tous les autres blocs d'annonces de lien disponibles au-dessus de cette largeur (de 120x90 à 200x90 et, bien entendu, également aux formats 728x15). Si un bloc d'annonces de type lien 100x15 est créé à l'avenir, vous pouvez définir @media (max-width: 479px) { .adslot_1 { width: 100% } } ou une autre requête multimédia:

@media (max-width: 199px) { .adslot_1 { width: 100px } }
@media (min-width: 200px) and (max-width: 479px) { .adslot_1 { width: 468px } }
3
Armfoot

Les unités de liens réactifs sont maintenant disponibles dans adsense .

Les unités de liaison réactive vous permettent de prendre en charge un large éventail de périphériques (ordinateurs, téléphones, tablettes, etc.) en adaptant automatiquement leur taille à la présentation de votre page. Ils sont conçus pour fonctionner avec des sites construits avec une conception réactive, mais également sur des sites non réactifs. Indépendamment du type d'appareil utilisé par les utilisateurs pour consulter votre site, les unités de liens réactifs peuvent vous aider à fournir une expérience publicitaire exceptionnelle.

A quoi ressemble le code. 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive adlinks -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).Push({});
</script>

Les textes à l'intérieur des liens-boutons correspondent bien au contenu des sites que j'ai testés et ont l'air très tentants. Lors de mes tests, ils ont très bien fonctionné, mais je les ai supprimés, car cela donne l'impression de gêner les visiteurs en les piégeant dans des liens qui ne correspondent pas aux mots affichés dans les boutons.

Ils se sont démarqués en dessous du premier paragraphe et toujours à la fin de la page.

4
code_only

C’est ce que j’ai fait pour cacher de longs liens publicitaires sur mobile. Cette méthode (c’est ce que je crois) relève également d’une des modifications acceptables de la modification du code adsense - https://support.google.com/adsense/answer/1354736?hl=fr

<style type="text/css">
.adslot_1 { display:inline-block; width: 728px; height: 15px; }
@media (max-width:800px) { .adslot_1 { display: none; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-..."
data-ad-slot="..."></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).Push({});</script>
1
Aakash