Responsive Adsense – so passt sich die Werbung der Seite an

Responsive Werbung auf der Webseite integrieren

Als Betreiber einer Webseite hat man 2 Möglichkeiten sich auf die Besucher mit Smartphones oder Tablets einzustellen. Entweder man lädt ein eigenes Webseiten-Theme für Besucher mit kleinen Display und kleiner Auflösung hoch oder man setzt ein Responsive Theme ein, welches sich je nach Auflösung des Endgerätes vom Webseiten-Besucher anpasst. Variante 1 wurde oft in der Vergangenheit eingesetzt und letztere Variante kommt immer mehr verstärkt zum Einsatz, da der User im Prinzip immer die gleiche Webseite zu sehen bekommt und man als Webmaster nur eine Seite zu pflegen hat. Im Prinzip sind also die Responsive Themes die bessere Methode um eine Webseite für alle Endgeräte einzusetzen, jedoch ist die automatische Größenanpassung nicht immer so einfach wie man es sich vielleicht wünschen würde. Der Grund hierfür sind zahlreiche Widgets und Werbetreibende, welche sich noch nicht auf den neuen Trend eingestellt haben. Wer nun z.B. Google Adsense einsetzt und große Banner auf seiner normalen „PC“-Webseite anzeigen lässt, zerschießt sich oft das Responsive Design, wenn eine kleinere Auflösung dargestellt werden soll. Denn die eingeblendeten Banner werden bislang noch nicht der Webseite angepasst und sprengen so sehr oft das restliche Design.

Ich habe hier eine Lösung für Euch, wie ihr zumindest Google Adsense an unterschiedliche Auflösungen anpassen könnt. Dieser Trick mit dem Java-Script funktioniert übrigens auch mit anderen Inhalten und muss nicht fest mit Googles Werbenetzwerk eingesetzt werden. Hier im Beispiel gehe ich jedoch auf Google Adsense ein!

Wer sich nun denkt – na toll – man darf doch gar nicht den Code aus dem Adsense Programm für seine Zwecke umschreiben, der irrt! Google hat die von mir beschriebene Methode offiziell frei gegeben und ihr müsst keine Angst haben vom Partnerprogramm ausgesperrt zu werden. Im Detail wird auch der Banner-Code nicht geändert, sondern nur der richtige Code je nach Auflösung aufgerufen.

Und so funktioniert es:

Basics:

Um unterschiedliche Werbeformate anzeigen zu lassen, müssen diese natürlich auch in Google Adsense angelegt sein! Erstellt Euch deshalb bitte im Vorfeld alle möglichen Werbeformate, die ihr in Eure Seite integrieren wollt. Danach könnt ich wie folgt vorgehen.

Folgendes Javascript bestimmt die genutzte Auflösung des Webseiten Besuchers und setzt dann dementsprechend den richtigen Adsense Code!

 

Ihr müsst nun nur noch die richtige „ca-pub-id“ und die richtige „google_ad_slot-id“ in das Script eintragen.

Über den Parameter „width“ bestimmt ihr, bei welcher Auflösung welche Ad geladen wird. Diesen Parameter müsst ihr natürlich mit Eurem Design abstimmen.

 

<script type=“text/javascript“>
 
    var width = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
 
    google_ad_client = „ca-pub-10101011010101001010“;
 
    if (width > 1026) {

        // Werbung mit  300×250 Medium Rectangle laden

        google_ad_slot = „101010101101010“;
        google_ad_width = 300;
        google_ad_height = 250;

    } else if ((width < 1025) && (width > 400)) {
 
      // Werbung mit 200×200 Small Rectangle laden

        google_ad_slot = „101010101010101“;
        google_ad_width = 200;
        google_ad_height = 200;

    } else {
        // Für kleinere Bildschirme 300×250 Medium Rectangle laden

        google_ad_slot = „101010101010101“;
        google_ad_width = 300;
        google_ad_height = 250;
    }
 
</script>

<script type=“text/javascript“
    src=“http://pagead2.googlesyndication.com/pagead/show_ads.js“>
</script>

 

Hier im Beispiel wird bei großen Auflösungen über 1024 Pixel eine größere Werbung eingeblendet als bei einer Auflösung von 400 bis 1024 Pixel. Sinkt die Auflösung unter 400 Pixel wird jedoch wieder die größere Werbung eingeblendet. Diese Parameter sind flexibel und müssen an Euren Webauftritt angepasst werden.

Viel Erfolg bei der Umsetzung! Fragen zu diesem Thema könnt ihr natürlich hier im Blog als Kommentar hinterlassen.