Vorheriger Artikel Nächster Artikel

Responsive Google AdSense mit JavaScript realisieren [Howto]

In einer Welt, in der mobiler Traffic stätig zunimmt und und den Desktop-Systemen den Rang ablaufen, werden hohe Erwartungen an das Design gestellt. Selbst Anzeigen müssen in dieser Welt lernen responsiv zu sein. Mit ein wenig kann diese Herausforderung schnell bewältigt werden.

Responsive Google AdSense mit JavaScript realisieren [Howto]

Anzeigen mit Google AdSense funktionieren von Haus aus nicht mit Responsive Design. Zwar können im System verschiedene Werbeplatz-Größen definiert werden, diese verändern jedoch nicht zusammen mit dem Design die Größe, wodurch Einschränkungen für das Design entstehen.

Mit ein paar Zeilen JavaScript und etwas CSS lassen sich diese Hürden schnell umgehen. Nachdem ihr einen AdSende-Anzeigenblock erstellt und auf „Code abrufen“ geklickt habt, solltet ihr eine Codebox wie im Screenshot unten sehen.

Screenshot eine Google AdSense Code
Google AdSense Code

Standardmäßig sind Google AdSense Anzeigen nicht responsiv. Deswegen müssen wir den Code ein wenig anpassen. Hierfür fragen wir die Breite des Browsers ab, um zu bestimmen in welcher Größe Google uns die Anzeige liefern soll.

<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";
if (window.innerWidth <= 350) {
// Kleine Anzeige
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 320;
google_ad_height = 50;
} else if (window.innerWidth >= 750) {
// Große Anzeige
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 728;
google_ad_height = 90;
} else {
// Mittelgroße (fallback) Anzeige
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 468;
google_ad_height = 60;
}
//--></script>

In diesem Beispiel erstellen wir drei verschiedene Banner-Größen. Klein (320x50) für mobile Geräte, Medium (468x60) für Tablets und Groß (728x90) für Desktop. Die Werte für google_ad_slot, google_ad_width und google_ad_height ersetzt ihr mit den entsprechenden Werten, die Google AdSense nach dem Erstellen der Anzeigenplätze mit der „Get Code“ Funktion für euch ausgibt.

Daraufhin serviert Google euch die Anzeigen in der gewünschten Größe. Bei Desktop-Browsern könnte diese Herangehensweise aber zu Problemen führen. Wird die Website mit einer Fenstergröße von 900px aufgerufen und das Fenster anschließend verkleinert, verkleinert sich nicht die Anzeige und kann so im schlimmsten Fall euer gesamtes Design zerstören. Hierfür bieten sich zwei Lösungsansätze an.

CSS Lösung

Indem ihr dem Container, in dem die Anzeige geladen wird, die CSS-Eigenschaft overflow:hidden gebt, stellt ihr sicher, dass euer Design erhalten bleibt.

div.werbebanner {
overflow:hidden;
}

JavaScript Lösung

Eine Alternative oder Ergänzung für diesen Ansatz würde ein zusätzliches JavaScript liefern, das die Website nach Ändern des Viewports erneut lädt und so die Anzeige in richtiger Größe anfordert. Bei dieser Methode ist wichtig, dass man die Funktion für den Reload nicht direkt bei onResize aufruft, da sie so während des gesamten Skalier-Vorgangs immer wieder aufgerufen wird.

<head>
<script>
var reload_function;
function responsive_reload(){
reload_function = setTimeout(
function(){
window.location=window.location;
},500);
}
</script>
</head>
<body onResize="responsive_reload()">
[...]
</body>

Mit der JavaScript setTimeout Funktion verhindert ihr, dass die Seite schon während des Ziehens des Fensters neu geladen wird. Mit einer zusätzlichen Abfrage der Fenstergröße, können unnötige Reloads ebenfalls vermieden werden.

Welche dieser Methoden sich am besten eignet, dürfte von Projekt zu Projekt veriieren. Im Zweifelsfall sollte man sich aber eher im Sinne des Users und nicht im Sinne der Werbung entscheiden und auf die Reload-Methode verzichten.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
6 Antworten
  1. von Benni am 24.02.2013 (16:20 Uhr)

    Wundert mich etwas, dass Google hier noch keine eigene Lösung bereitstellt oder automatisch etwas für die Responsivität tut. Immerhin empfehlen sie Responsive Webdesign, wenn es um mobile Websites geht.

    Übrigens: In der Headline hat sich ein kleiner Buchstabendreher eingeschlichen ;)

    Viele Grüße,
    Benni

    Antworten Teilen
  2. von Ilja Zaglov am 24.02.2013 (16:34 Uhr)

    Hallo Benni,

    danke für den Hinweis.
    Mich wundert es auch, dass Google da kein eigenes Fallback dafür bietet. Schließlich stellt das AdSense Netzwerk eine nicht unerhebliche Einnahmequelle für Google dar.

    Grüße
    Ilja

    Antworten Teilen
  3. von Sven Wolfermann am 24.02.2013 (21:11 Uhr)

    Danke für den Artikel. Ich denke aber,dass es eine Frage der Zeit ist bis Google mit einer Lösung kommt. Ein Anfang ist schon gemacht http://www.businessinsider.com/google-blends-desktop-and-mobile-ads-2013-2

    Antworten Teilen
  4. von Julian am 25.02.2013 (10:46 Uhr)

    "

    var reload_function;
    function responsive_reload(){
    reload_function = setTimeout(
    function(){
    window.location=window.location;
    },500);
    }



    [...]
    "

    Kann man sich auch schenken:



    Hier der Artikel nochmal etwas ausführlicher:

    http://www.nerds-first-choice.de/google/google-adsense/google-adsense-anzeigen-fur-responsive-webseiten-anpassen/

    Antworten Teilen
  5. von Julian am 25.02.2013 (10:47 Uhr)

    Der Code ist nicht mit gekommen:



    Die Leerzeichen entfernen.

    Antworten Teilen
  6. von Andreas am 25.02.2013 (18:17 Uhr)

    Dieser Artikel ist ein Paradebeispiel warum ich mein T3N-Abo gekündigt habe und solche Artikel grundsätzlich nur noch mit 1 Stern bewerte. Lösungen werden als die eigenen ausgeben und Quellenangaben sind Mangelware.

    Bereits am 11.12.2012 hat das Google mobile Team einen entsprechenden Post verfasst in dem ganz deutlich mitgeteilt wurde, das der oben genannte Javascript-Code als einzige Variante verwendet werden darf um nicht gegen die Google-Adsense Richtlinien zu verstoßen.

    Der entsprechende Link, der mindestens in den obigen Beitrag als Quelle gehört:
    http://adsense-de.blogspot.de/2012/12/adsense-auf-responsive-design-websites.html

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Google AdSense
Android L: Das bringt die neue Version des mobilen Betriebssystems
Android L: Das bringt die neue Version des mobilen Betriebssystems

Mitte Oktober könnten die ersten Geräte auf Basis von Android L vorgestellt werden. Was ihr von der nächsten Version des Google-Betriebssystems erwarten könnt, verraten wir euch in diesem Artikel. » weiterlesen

Project Tango: 3D-Scanner-Tablet von Google und LG soll 2015 erscheinen
Project Tango: 3D-Scanner-Tablet von Google und LG soll 2015 erscheinen

Googles „Project Tango“ will Tablets ein „menschliches“ Verständnis von Raum und Bewegung einhauchen. Interessierte Entwickler können sich nun um Prototypen bewerben. Schon 2015 soll ein … » weiterlesen

Material Design: Google enthüllt neue Designsprache für Android, Chrome und das Web
Material Design: Google enthüllt neue Designsprache für Android, Chrome und das Web

Google hat auf seiner Entwicklerkonferenz eine neue, produktübergreifende Designsprache namens „Material Design“ vorgestellt, die zukünftig auf alle Produkte (Android, Chrome und Googles … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen