Responsive Google AdSense Ads – Mobil und Desktop

Ich zeige euch hier ein kleines Javascript, welches die Anzeigegröße der AdSense Werbebanner automatisch auf die Displaygröße anpasst.

Javascript

Dies ist das Ausgangsscript, welches editiert werden muss.
Dieses Script wird von AdSense zugelassen und verstößt gegen keine der Richtlinien von Google AdSense, sofern der Code genau so benutzt wird.



<!-- Hier kannst du die verschiedenen Banner eingeben -->
<!-- Füge einfach zu jeden Banner deine "google_ad_slot" hinzu -->

<div id="google-ads-1">
<script type="text/javascript">

adUnit = document.getElementById("google-ads-1");
adWidth = adUnit.offsetWidth;

/* Ersetze dies mit deiner AdSense Publisher ID */
google_ad_client = "ca-pub-1234567890";

if ( adWidth >= 768 ) {
/* Leaderboard 728x90 */
google_ad_slot = "AAA";
google_ad_width = 768;
google_ad_height = 90;
} else if ( adWidth >= 468 ) {
/* Banner (468 x 60) */
google_ad_slot = "BBB";
google_ad_width = 468;
google_ad_height = 60;
} else if ( adWidth >= 336 ) {
/* Large Rectangle (336 x 280) */
google_ad_slot = "CCC";
google_ad_width = 336;
google_ad_height = 280;
} else if ( adWidth >= 300 ) {
/* Medium Rectangle (300 x 250) */
google_ad_slot = "DDD";
google_ad_width = 300;
google_ad_height = 250;
} else if ( adWidth >= 250 ) {
/* Square (250 x 250) */
google_ad_slot = "EEE";
google_ad_width = 250;
google_ad_height = 250;
} else {
/* Ad Link Unit (200 x 90) */
google_ad_slot = "FFF";
google_ad_width = 200;
google_ad_height = 90;
}
</script>

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

 Vorgehensweise

  1. Erstellt nun für jede Größe einen Werbebanner in eurem AdSense Dashboard und kopiert den Namen unter “google_ad_slot” in den oben angezeigten Code für die jeweilige Anzeige.
  2. Füg das Javascript in eure Webseite ein und es wird je nach Displayauflösung der richtige Banner angezeigt.
  3. Fertig!

Was this article helpful?

Leave A Comment?