Rotacja reklam i dostosowanie ich do responsywnego szablonu

Jak wiecie, modyfikować kodu AdSense nie wolno. Oprócz dwóch kwestii, w których pewne zmiany w kodzie reklamy są dopuszczalne:

  • rotacja reklam, w celu przeprowadzenia testu A/B,
  • wybór różnych reklam, w zależności od rozmiaru ekranu, co jest przydatne przy szablonach responsywnych (zmieniających wygląd zależnie od rozmiaru ekranu).

Tak się złożyło, że potrzebowałem wykorzystać obydwie te funkcje w jednym kodzie, przy okazji zmian na jednym z moich blogów.

Opracowałem więc dostępny poniżej kod, który możecie pobierać i bezpłatnie wykorzystywać na swoich stronach.

Skrypt działa tak, że w pierwszym kroku sprawdza szerokość okna przeglądarki. W zależności od tego, w jakim jest przedziale, w drugim kroku dokonuje losowania pomiędzy jednostkami:

  • dla ekranów szerszych od 1 200 pikseli, losuje spomiędzy jednostek:
    • 300×600 (50% udziału),
    • 336×280 (40%),
    • 300×250 (10%),
  • dla ekranów o szerokości poniżej 1 000 pikseli, losuje jednostki:
    • 120×240 (50%),
    • 125×125 (50%),
  • dla pozostałych ekranów, losuje spomiędzy:
    • 336×280 (65%)
    • 300×250 (35%).

Po co taki akurat algorytm? Dostosowałem go do zastosowanego szablonu. Przy szerokiej stronie nie ma problemów z jednostkami. Przy wyświetlaniu jednostki długiej i szerokiej wszystko ładnie mi się mieści. Gdy ekran jest wąski, szpalta z tekstem robi się na tyle wąska, że chcę wyświetlać tylko najwęższe, ale też niewysokie jednostki. Jednocześnie przy stanie pośrednim zależy mi na tym, by nie było jednostki 300×600, bo obok jednostki będzie niewiele tekstu, co nie będzie się dobrze czytać.

Oczywiście procenty udziałów do losowania jednostek są tylko punktem wyjścia. Docelowo albo zostawię najlepsze jednostki, albo zmienię ich udział tak, by pozostawić wyświetlanie gorszych, ale znacznie rzadziej, niż do tej pory. Chodzi o to, by użytkowników nie przyzwyczajać.

Pełen kod — poniżej. Trzeba w nim tylko podmienić pub-ID konta AdSense oraz identyfikatory jednostek AdSense (stary, synchroniczny kod). Można też zmienić rozmiary jednostek, jeśli ktoś ma taką potrzebę.

rotator jest liczbą z zakresu 0-1, w kolejnych krokach jest porównywany z kolejnymi progami (np. 0,5 zapisywane jako .5). Zmieniając te wartości w tych liniach uzyskamy zmianę proporcji wyświetlania reklam.

Korzystajcie i dajcie znać gdzie kod zastosowaliście. 🙂

<script type=”text/javascript”><!–
// skrypt losowania reklam AdSense i dostosowania ich do rozmiarów okna dla szablonów
// responsywnych
// v 1.00
// autor: Krzysztof Lis
// licencja: linkware (w zamian za użytkowanie skryptu na 1 witrynie dodaj odnośnik do
// www.drewnozamiastbenzyny.pl (z dowolnym anchorem) z 1 podstrony
// metodyka: jeśli przeglądarka ma małą szerokość ekranu, nie chcemy wyświetlać dużej
// jednostki reklamowej — szerokiej i wysokiej, w takim przypadku dajemy jednostkę
// mniejszą
// dodatkowo skrypt losuje jednostki o różnych rozmiarach, duże i małe
google_ad_client = „ca-pub-[tu ID konta AdSense]”;
width = document.documentElement.clientWidth;
var rotator = Math.random();
if (width > 1200) {
// jeśli okno ma ponad 1200 px szerokości
// dajemy wszystkie jednostki — wysokie i szerokie
if (rotator > .5){
// 300×600
google_ad_slot = „[tu ID jednostki]”;
google_ad_width = 300;
google_ad_height = 600;
} else if (rotator > .1) {
// 336×280
google_ad_slot = „[tu ID jednostki]”;
google_ad_width = 336;
google_ad_height = 280;
}
else {
// 300×250
google_ad_slot = „[tu ID jednostki]”;
google_ad_width = 300;
google_ad_height = 250;
}
}
else if (width < 1000) {
// okno ma poniżej 1000 px szerokości
// dajemy jednostki małe i wąskie
if (rotator > .5){
// 120×240
google_ad_slot = „[tu ID jednostki]”;
google_ad_width = 120;
google_ad_height = 240;
}
else {
// 125×125
google_ad_slot = „[tu ID jednostki]”;
google_ad_width = 125;
google_ad_height = 125;
}
}
else {
// okno ma między 1000 a 1200 px szerokości
// dajemy jednostki szerokie, ale niskie
if (rotator > .35){
// 336×280
google_ad_slot = „[tu ID jednostki]”;
google_ad_width = 336;
google_ad_height = 280;
}
else {
// 300×250
google_ad_slot = „[tu ID jednostki]”;
google_ad_width = 300;
google_ad_height = 250;
}
}
//–>
</script><script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

One single comment

  1. Szuflad napisał(a):

    Krzysztofie bardzo ciekawa koncepcja. Jednak zastanawiam się czy nie lepiej zrobić to troszeczkę inaczej. Mianowicie zostawiamy :

    width = document.documentElement.clientWidth;

    Jednak w warunkach:
    if (width > 1200) {
    }

    Dodawać pełny kod reklamy wygenerowanej z panelu Adsense. Dzięki temu można wstawić również kody asynchroniczne w tym również elastyczne.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*