Dostosowanie jednostki AdSense do stron w Responsive Web Design

Responsive Web Design to taki sposób projektowania stron internetowych, w którym jedna strona internetowa wygląda dobrze we wszystkich urządzeniach: począwszy od komputerów stacjonarnych i laptopów z bardzo szerokimi ekranami (choćby fullhd 1920×1080), przez tablety i netbooki z ekranami o rozmiarze 1024×600, skończywszy na telefonach komórkowych.

W zależności od rozmiaru ekranu urządzenia strona będzie po prostu sama układać się tak, by wyglądać dobrze.

Czasem wymaga to także zmian rozmiaru reklamy, która jest w danym miejscu emitowana, żeby nie rozsuwała za bardzo innych elementów. Dotyczy to także AdSense. Od niedawna można to zrobić za pomocą niewielkich zmian w kodzie jednostki.

Co do zasady nie wolno zmieniać kodu jednostek AdSense, ale niedawno wprowadzono w regulaminie odpowiedni wyjątek.

Przykładowy kod, który pozwoli zmienić jednostkę AdSense zależnie od szerokości ekranu, wklejam poniżej, na podstawie strony z helpa AdSense.

<script type=”text/javascript”>
google_ad_client = „ca-publisher-id”;
width = document.documentElement.clientWidth;
google_ad_slot = „1234567890”;
google_ad_width = 320;
google_ad_height = 50;
if (width > 500) {
google_ad_slot = „3456789012”;
google_ad_width = 468;
google_ad_height = 60;
}
if (width > 800) {
google_ad_slot = „2345678901”;
google_ad_width = 728;
google_ad_height = 90;
}
</script>
<script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Składnia jest dość prosta: początkowo definiujemy domyślną jednostkę o rozmiarze 320×50. Jeśli szerokość ekranu jest większa, niż 500 pikseli, zmieniamy definicję, by wyświetlać jednostkę 468×60. Jeżeli szerokość jest większa, niż 800 pikseli, zmieniamy definicję ponownie, by pokazała się jednostka 728×90. A potem wywołujemy skrypt.

Na pewno można by to było napisać lepiej. 😉

4 komentarze

  1. srk76 pisze:

    Jutro to sprawdzę. Wiem że jest kłopot z moimi reklamami na przenośnych.

  2. Wilk pisze:

    Proste, a rpzydatne – dzięki!

  3. chwilówki pisze:

    Coś się zmieniło w responsive jeśli chodzi o reklamy adsense czy nadal trzeba stosować ten skrypt? pozdro.

  4. Krzysiek Lis pisze:

    @chwilówki: w tej chwili są osobne kody do jednostek responsywnych: automatycznie dostosowujące rozmiar, albo bardzo podobne do zaprezentowanych tutaj, w których ręcznie zmienia się wielkość jednostki zależnie od rozdzielczości ekranu.

Skomentuj chwilówki Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*