it-swarm.com.de

Responsive Linkblöcke in AdSense

Ab sofort besteht die einzige Möglichkeit, Google AdSense-Anzeigenblöcke für eine Website zu implementieren, die auf Responsive Design basiert, in der Verwendung der Google Responsive-Anzeigenblöcke. Es scheint jedoch, dass für Verbindungseinheiten keine Antwortoption verfügbar ist.

Gibt es eine Möglichkeit, Google AdSense-Linkeinheiten in einem responsiven Design zu implementieren, ohne das Design zu stören und ohne dass Inhalte außerhalb des Ansichtsfensters liegen?

Ich habe die gleiche Frage in den Google-Produktforen gestellt und sie konnten auch nicht anders.

5
Rana Prathap

Ich weiß, dass dies ein altes Thema ist, aber seine Relevanz wird heutzutage immer größer (2015-06-17). Wie Google in diesem Dokument erwähnt , dürfen Sie jede Anzeige ausblenden (nicht nur Anzeigenblöcke verknüpfen) ) "auf kleineren mobilen Geräten" . Wenn Sie beispielsweise möchten, dass der Werbeblock in Bildschirmen mit einer Breite von weniger als 400 Pixel nicht angezeigt wird, können Sie dies tun (eigenes Beispiel von 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>

Zitieren von Google:

sie können einen Parameter mit CSS-Medienabfragen festlegen, sodass keine Anzeigenanforderung erfolgt und keine Anzeige geschaltet wird

Dies geschieht bei der Medienabfrage mit display: none: Anzeigen werden nicht angefordert, sodass Sie nicht riskieren, die Adsense-Richtlinien zu verletzen.

In HTML und Javascript müssen Sie nur die adslot_1 -Klasse verwenden, der Rest des Codes erfordert keine Änderung .

<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>

Auf diese Weise stellen Sie fest, dass Höhe und Breite Ihres Anzeigenblocks für andere Bildschirmbreiten entsprechend geändert werden können. Dies bedeutet, dass Ihr Anzeigenblock ohne die Verwendung des standardmäßigen "Google Responsive-Anzeigenblocks" reagiert.

Lösung mit erweiterbarer Breite

Daher verwende ich speziell in einem Link-Anzeigenblock normalerweise nicht einmal display: none. Sie können das Problem mit ihrer erweiterbaren Breite lösen, die ein weiteres Beispiel von Google ist:

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

Durch Festlegen einer minimalen und maximalen Breite, während sich width selbst an den Bildschirm anpasst (Einstellung auf 100%), werden alle Link-Anzeigenbreiten unterstützt, von den derzeit größten (728 x 15 und 200 x 90). zu den derzeit kleinsten (468x15 und 120x90), und Sie brauchen nicht einmal @media Abfragen!

Wenn Google daher in Zukunft kleinere Linkeinheiten erstellt, werden diese von Ihrer Einheit unterstützt, angefordert und angezeigt. Dies liegt an der automatischen Größenanpassung von Adsense basierend auf dem verfügbaren Speicherplatz .

Bestimmte @media Abfragen für bestimmte Anzeigengrößen

Wenn Sie weiterhin feste Breiten und Höhen (für eine bestimmte Link-Anzeige) bevorzugen, können Sie Ihre Medienabfragen sowohl mit minimalen als auch mit maximalen Breiten noch besser spezifizieren. Z.B.:

<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>

Auf diese Weise können sowohl 468 x 15- als auch 728 x 15-Link-Anzeigen mit einer Bildschirmbreite von 800 Pixel und alle anderen verfügbaren Link-Anzeigenblöcke oberhalb dieser Breite (von 120 x 90 bis 200 x 90 und natürlich auch 728 x 15) angezeigt werden. Wenn in Zukunft ein 100 x 15-Link-Anzeigenblock erstellt wird, können Sie entweder @media (max-width: 479px) { .adslot_1 { width: 100% } } oder eine andere Medienabfrage festlegen:

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

Responsive Link Units sind jetzt in adsense verfügbar .

Mit reaktionsschnellen Link-Units können Sie eine Vielzahl von Geräten (z. B. Computer, Telefone, Tablets usw.) unterstützen, indem Sie deren Größe automatisch an Ihr Seitenlayout anpassen. Sie sollen mit Websites arbeiten, die mit reaktionsschnellem Design erstellt wurden, funktionieren aber auch auf nicht reaktionsschnellen Websites. Unabhängig davon, welche Gerätebenutzer Ihre Website besuchen, können reaktionsschnelle Linkblöcke Ihnen dabei helfen, eine hervorragende Anzeigenerfahrung zu erzielen.

Wie der Code aussieht.

<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>

Die Texte in den Link-Buttons passen gut zum Inhalt der von mir getesteten Seiten und sehen sehr verlockend aus. Bei meinen Tests haben sie sehr gut abgeschnitten, aber ich habe sie entfernt, da es sich nach ärgerlichen Besuchern anfühlt, indem ich sie in Links gelockt habe, die tatsächlich nicht mit den Wörtern übereinstimmen, die auf den Schaltflächen angezeigt werden.

Sie haben unterhalb des ersten Absatzes hervorragende Leistungen erbracht und waren am Ende der Seite immer noch nett.

4
code_only

Dies ist, was ich getan habe, um lange Adlinks auf dem Handy zu verstecken. Diese Methode (das glaube ich) fällt auch unter eine der akzeptablen Modifikationen zum Ändern des AdSense-Codes - https://support.google.com/adsense/answer/1354736?hl=de

<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