Zaktualizowano dnia 13.12.2012, aby odzwierciedlić zasady programu AdSense.

W naszym ostatnim poście na temat projektowania responsywnego pisaliśmy, jak ważne jest tworzenie witryn dostosowanych do urządzeń mobilnych i jaki udział w tym może mieć projektowanie responsywne. Dzisiaj wyjaśnimy, jak skutecznie korzystać z reklam AdSense w witrynie zbudowanej przy użyciu projektowania responsywnego. Wcześniej jednak jeszcze raz krótko wyjaśnimy, co to jest.

Projektowanie responsywne to technika projektowania witryn, która pozwala utworzyć jedną witrynę dopasowującą się do urządzenia, na którym jest wyświetlana – niezależnie od tego, czy jest to laptop, smartfon czy tablet. Witryna zaprojektowana w ten sposób automatycznie zmienia swój rozmiar w zależności od urządzenia, ale to Ty decydujesz o wyróżnieniu treści, które uważasz za najbardziej odpowiednie dla wybranych urządzeń i ich użytkowników.


Wraz z zawartością witryny do różnych rozmiarów ekranów można dostosować reklamy AdSense – w tym celu wystarczy użyć prostego fragmentu kodu JavaScript. Aby wykorzystać możliwości, jakie daje projektowanie responsywne, najpierw utwórz różne rozmiary reklam, np. 728 x 90, 468 x 60 i 300 x 250. Następnie zaimplementuj fragment kodu „if-else”, by wyświetlać odpowiedni rozmiar reklamy na podstawie wielkości urządzenia użytkownika. Oto przykład takiego kodu JavaScript:

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if  (window. innerWidth  >= 800) {

google_ad_slot = "1234567890";
google_ad_width = 728;
google_ad_height = 90;
} else if  (window.innerWidth < 400) {
google_ad_slot = "2345678901";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "3456789012";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


Proszę pamiętać, że jakiekolwiek zmiany w kodzie AdSense są niezgodne z zasadami programu AdSense. To jest jedyna zalecana modyfikacja kodu, która jest dozwolona w przypadku witryn zbudowanych przy użyciu projektowania responsywnego. Wszelkie inne zmiany, poza zalecaną powyżej modyfikacją kodu JavaScript, będą rozpatrywane jako naruszenie zasad programu AdSense.

Szczegółowe informacje na temat projektowania responsywnego znajdziesz w tym poście, przygotowanym przez zespół webmasterów Google (dostępny tylko w języku angielskim). Więcej informacji o zaletach tworzenia witryn na komórki, testowaniu witryn i wyszukiwaniu programistów, którzy pomogą Ci w utworzeniu witryny przyjaznej dla komórek, znajdziesz na howtogomo.com.