AdSense-Anzeigen für ein Responsive Design anpassen

Marcel Am 19.05.2013 veröffentlicht Lesezeit etwa 2:37 Minuten

Bildschirmfoto 2013-05-19 um 11.35.17

Google ist zwar gerade im mobilen Sektor quasi die unbestrittene Nummer 1 und auch in Sachen Werbung (AdSense und AdWords) ist Google ganz weit vorne – logisch, dürfte inzwischen die Haupteinnahmequelle des Konzerns sein. Dennoch gibt es seitens Google noch immer keine flexiblen AdSense-Anzeigen, soll heißen: sofern ihr auf ein responsive Webdesign setzt (was inzwischen fast schon Standard ist), werden AdSense-Anzeigen nicht automatisch an die entsprechende Viewport-Größe angepasst.

Nun könnte man natürlich mehr AdSense-Anzeigen einbetten und diese über CSS-MediaQueries aus- und einblenden lassen, wie es eben bei einem responsive Design gemacht wird, das Problem wird dann aber sein, dass eben auch Aufrufe gezählt werden, bei denen die Anzeigen über „display:none;“ ausgeblendet sind, womit das Verhältnis zwischen Aufrufe und Klicks herabgehen dürfte – und damit auch die Einnahmen pro Klick.

Die einzige Möglichkeit, hier dran etwas zu machen wäre eine Lösung via JavaScript – und seitens Google auch die einzig erlaubte Methode. „display:none;“ ist laut den Richtlinien nicht erlaubt, ebenso wenig „overflow:hidden;“ – Werbeanzeigen dürfen eben nicht über CSS ausgeblendet werden, ebenso darf der Code prinzipiell nicht verändert werden. Dennoch hat man im AdSense-Blog einen Artikel verfasst, indem man eben durch eine geringe Codeabwandlung einen guten Mittelweg finden kann. Erst einmal der originale AdSense-Code:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1234567890"; //Eure Publisher-ID
/* TITEL DER ANZEIGE */
google_ad_slot = "1234567890";
google_ad_width = 300;
google_ad_height = 600;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Was wir nun machen können: Wir können über JavaScript eine kleine Abfrage einbauen, in der die aktuelle Breite des Viewport abgefragt wird und je nach Größe eben die passende Anzeige eingeblendet wird – dafür müsst ihr vorab natürlich alle benötigten Anzeigen in AdSense anlegen. Schaut dann in etwa so aus:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1234567890"; //Eure Publisher-ID
if (window.innerWidth >= 800) { //Größer oder gleich 800 Pixel
  google_ad_slot = "1234567890";
  google_ad_width = 728;
  google_ad_height = 90;
} else if (window.innerWidth < 400) { //Mindestens 400 Pixel
  google_ad_slot = "0987654321";
  google_ad_width = 300;
  google_ad_height = 250;
} else { // Kleiner als 400 Pixel
  google_ad_slot = "1234509876";
  google_ad_width = 468;
  google_ad_height = 60; }
//-->></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Wie man sieht: Es gibt also drei verschiedene Anzeigegrößen auf die man zurückgreifen möchte. Zuerst die Anzeige für alles, was über 800 Pixel hinaus geht oder genau 800 Pixel beträgt. Der zweite Punkt trifft eben dann zu, wenn die Breite der Anzeige größer als 400 Pixel beträgt (aber eben kleiner als 800 Pixel ^^), der letzte Punkt wird eben dann eingeblendet, wenn der Viewport kleiner als 400 Pixel ist. Anhand des Beispiels dürfte man sich eben gut zurechtfinden und natürlich kann man auch noch weitere Abfragen einbauen oder eben auch die Abfrage auf eine einzelne Anzeige beschränken – zum Beispiel dann, wenn man an der ursprünglichen Stelle ansonsten keinen Banner angezeigt bekommen möchte).

google

Das Problem dieser Lösung: Es werden zwar alle Banner in der entsprechenden Größe angezeigt – verkleinert oder vergrößert ihr nun einmal das Browserfenster ohne die Seite zu aktualisieren, so wird das JavaScript nicht noch einmal geparsed und somit wird der Banner eben nicht angezeigt oder ausgetauscht, sondern eben immer erst nach einer erneuten Aktualisierung der Seite. Oder in Kurzform: Es wird immer die Größe genommen, die bei dem Laden der Seite bestanden hat. Ist sicherlich nicht schön, ist aber der einzig brauchbare Mittelweg und auch die einzig erlaubte Methode.

Quelle Google Bild responsivedesign.is

Artikel teilen

Kaufempfehlung*

  • Dremel Lite 7760 Akku Multifunktionswerkzeug 3.6V, Set mit 15 Zubehörteilen, Variable Drehzal 8.000-25.000 U/min - zum Schnitzen, Gravieren, Schleifen, Schärfen, Reinigen, Polieren, Schmirgeln,Schwarz
  • Neu ab 63,70 €
  • Auf Amazon kaufen*

Schreibe den ersten Kommentar

Schreibe eine Antwort

⚠ Mit dem Nutzen des Kommentarbereiches erklärst du dich mit der Datenschutzerklärung einverstanden.