Verwendung von Adsense Responsive Ads in Burning Board 4

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Verwendung von Adsense Responsive Ads in Burning Board 4

    11 Jun 2015 16 Hot

    Responsive Ads von Google sind ein relativ neuer Anzeigetyp, der auf den ersten Blick ziemlich praktisch erscheint:



    Eigentlich sollte durch diesen Anzeigentyp die Verwendung statischer Banner passé werden, aber in der Praxis gibt es jedoch einige Hürden zu überwinden, denn die Benutzung von Responsive Ads in Burning Board 4 funktioniert nicht ohne weitere Anpassungen. Wer lediglich den bereitgestellten Code an die Werbepositionen einfügt, wird sich erst einmal wundern, dass nichts angezeigt wird. Ein Blick in die Konsole zeigt dann auch schon einen Fehler im Zusammenhang mit dem Code an:

    Cannot find a responsive size for a container of width=0px and data-ad-format=auto adsense

    Der Code kann die Abmessungen nicht korrekt ermitteln und zeigt deswegen erst einmal nichts an.

    Um die Anzeigen in Burning Board lauffähig zu bekommen, muss man von Hand definieren, welche Größen man einsetzen will. Google empfiehlt an den Stellen, an denen man ein Leaderboard-Banner einfügen möchte, zum Beispiel folgende Abstufungen:

    • Bis 500px Bildschirmbreite: Large Mobile Banner 320 x 100
    • Zwischen 500 und 800px: Standardbanner 468 x 60
    • Ab 800px: Leaderboard-Banner 728 x 90


    Das muss man dem Anzeigencode von Hand mitteilen. Dazu definiert man per CSS die entsprechenden Anweisungen:

    CSS Source Code

    1. <style type="text/css" scoped>
    2. .adsFooter { width: 320px; height: 100px; }
    3. @media (min-width:500px) { .adsFooter { width: 468px; height: 60px; } }
    4. @media (min-width:800px) { .adsFooter { width: 728px; height: 90px; } }
    5. </style>

    und fügt sie dem Anzeigencode hinzu (Zeile 1-5):

    HTML Source Code

    1. <style type="text/css" scoped>
    2. .adsFooter { width: 320px; height: 100px; }
    3. @media (min-width:500px) { .adsFooter { width: 468px; height: 60px; } }
    4. @media (min-width:800px) { .adsFooter { width: 728px; height: 90px; } }
    5. </style>
    6. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    7. <!-- Demo Responsive -->
    8. <ins class="adsbygoogle adsFooter"
    9. style="display:inline-block"
    10. data-ad-client="ca-pub-7760948852044928"
    11. data-ad-slot="7468659245"
    12. data-ad-format="auto"></ins>
    13. <script>
    14. (adsbygoogle = window.adsbygoogle || []).push({})
    15. </script>
    Display All

    und ergänzt den Code um die neu definierte CSS-Klasse adsFooter, siehe Zeile 8. Nach einem Neuladen der Seite werden ab jetzt die Anzeigen eingeblendet.

    Je nach Einsatzort, sind andere Anzeigengrößen sinnvoll, im Startbeitrag würde man zum Beispiel kaum einen Leaderboard-Banner einsetzen. An dieser Stelle kann man gut folgende Kombination verwenden:

    • Bis 500px Bildschirmbreite: Large Mobile Banner 320 x 100
    • Zwischen 500 und 800px: Medium Rectangle 300 x 250
    • Ab 800px: Large Rectangle 336 x 280
    Der entsprechende CSS-Code sieht dann wie folgt aus:

    HTML Source Code

    1. <style type="text/css" scoped>
    2. .adsFirstPost { width: 320px; height: 100px; }
    3. @media (min-width:500px) { .adsFirstPost { width: 300px; height: 250px; } }
    4. @media (min-width:800px) { .adsFirstPost { width: 336px; height: 280px; } }
    5. </style>

    und der komplette Block:

    HTML Source Code

    1. <style type="text/css" scoped>
    2. .adsFirstPost { width: 320px; height: 100px; }
    3. @media (min-width:500px) { .adsFirstPost { width: 300px; height: 250px; } }
    4. @media (min-width:800px) { .adsFirstPost { width: 336px; height: 280px; } }
    5. </style>
    6. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    7. <!-- Demo Responsive -->
    8. <ins class="adsbygoogle adsFirstPost"
    9. style="display:inline-block"
    10. data-ad-client="ca-pub-7760948852044928"
    11. data-ad-slot="7468659245"
    12. data-ad-format="auto"></ins>
    13. <script>
    14. (adsbygoogle = window.adsbygoogle || []).push({})
    15. </script>
    Display All

    Zu beachten ist, dass jeweils auch die Klasse, je nach Anzeigengröße, angepasst wird. Am besten verwendet ihr einfach für jede Anzeige eine eindeutige Klasse:

    .adsFooter
    .adsFirstPost
    .adsBetweenPosts

    usw.

    Weitere Informationen gibt es bei Google:

    support.google.com/adsense/answer/3543893

    Fragen können gerne in den Kommentaren oder im Forum gestellt werden.
    TwitterFacebook

    Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
    :eyes:

    4,569 times read

Comments 16

  • BuMINH@N -

    Ich füge meinen Code wie beschrieben ein doch die Anzeige erscheint nicht. Bitte um Hilfe.
    Hier ist mein Code von GoogleAdSense:

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-XXXXXXXXXX",
    enable_page_level_ads: true
    });
    (adsbygoogle = window.adsbygoogle || []).push({})
    </script>

  • Blacky1404 -

    kann mir mal bitte jemand die gängigen Klassen hier posten die man mit dem Werbung Feature von WoltLab nutzen kann. footer und firstpost ist mir ja noch einleuchtend aber der rest ? oder gibt es eine Möglichkeit wie ich dieses rausfinden kann ?

    • Tom -

      Was genau meinst du? Es ist ein mal der Code für Banner von 320px bis 800px Breite angegeben und ein mal für quadratische Banner. Mehr gibt es eigentlich auch nicht. Die Sidebar hat ja eine feste Breite. Die Codes oben kannst du überall verwenden.

    • Blacky1404 -

      ja aber ich muss doch je nach Bereich für meine reponsiven Anzeigen diesen Extra Code eingeben also als Beispiel .adsfooter, .adsFirstPost (Die beiden sind mir sogar noch klar) was ist aber .adsBetweenPost bzw. was muss man für die anderen bereichen für Codes verwenden ?

    • Tom -

      Nein, die Klassen sind im Prinzip egal, du kannst den Code mit .adsfooter überall da einsetzen wo du Leaderboard-Banner bis 728px Breite einsetzen willst: Header, Footer, zwischen Beiträgen, am Seitenende usw. Wichtig bei den Beispielen ist nur das der eine Code für max. 728x90px ist und der andere für max. 320x320px.

    • Blacky1404 -

      Ach so. Ich dachte ich muss das an jeder stelle extra eingeben. Super Sache danke für die schnelle Hilfe.

  • Blacky1404 -

    Funktioniert der Spaß auch beim 4.1 ? bekomm das da nämlich auch nicht zum laufen.

  • Grafiksüchtig -

    Danke Tom für die Erklärung aber ich muss gestehen ich raffe das nicht egal wie oft ich das lese. Wo muss ich den CSS Code.. (Style-Erweitere Einstellungen) ? und wo nun den Html Code eingeben.

    Währe schön ein Beispiel für den Footer hätte.

    • Cr@@gle -

      Wie im Thema geschrieben gibst du den ganzen Block - also mit dem CSS-Teil davor - als Code für den Banner an.

    • Grafiksüchtig -

      Hallo Cr@@gle also dieses hier :

      (Code)

      und das bei Style.richtig.

      Danke schon mal

    • Grafiksüchtig -

      egal wo ich es auch versuche. kein Erfolg.. bei sytle bekomme ich einen Fehler, beim Banner code immer noch nichts zu sehen. bin einfach zu doof.

    • Tom -

      Irgendwie ist beim Kopieren der Code der Anzeigen kaputt gegangen, ich habe das oben korrigiert, die beiden Codeblöcke funktionieren jetzt, ich habe es eben noch mal getestet. Versuch den ersten Codeblock mal, wenn da nichts angezeigt wird hast du vermutlich einen Adblocker an?

      Wenn da was angezeigt wird, ersetzt du dann einfach die Nummern bei data-ad-slot und data-ad-slot durch deine.

    • Grafiksüchtig -

      Egal was ich mache es ist kein Banner zu sehen.

      Da ich wohl der einzigste bin der damit Probleme hat, gebe ich nun auf.

      Bedanke mich bei Cr@@gle und Tom für die Geduld und Mühe mit mir.