Przeglądając serwisy internetowe można natrafić na strony, gdzie reklamy Adsense firmy Google są większe niż przeznaczone dla nich miejsce i zasłaniają treści na stronie.
Adsense jest to program reklamowy firmy Google – w zamian za wyświetlanie reklam Google właściciel strony internetowej otrzymuje pieniądze w zależności od ilości wyświetleń.
Program Adsense w ostatnim czasie promuje „Reklamy automatyczne”. Te reklamy są przygotowane specjalnie na urządzenia mobilne, tablety czy komputery i co do zasady działają dobrze.
Na serwisach internetowych, gdzie włączone są responsoryjne formaty reklam skrypt w .js powiększa sobie miejsce na reklamę automatycznie. W nadrzędnych elementach modelu dokumentu ustawia wysokość automatyczną i kasuje paramter css max-height. W Internecie, zwłaszcza na stronie programu Google Adsense znajduje się sporo prób rozwiązania problemu powiększania się reklamy w dół. Żaden z tych sposobów w pełni nie działa.
Ustawienie rozmiarów dla nadrzędnego obiektu pomaga w sprawie szerokości reklamy. Parametr „max-with” jest respekowany i reklama nigdy nie jest szersza niż „wrapper”. Natomiast wysokość obiektów nadrzędnych, nie jednego, a nawet kliku zmienia się automatycznie i sprawcą jest skrypt Google Adsense!
Przy czwartej próbie w przeciągu kilku miesięcy udało się rozwiązać problem. Żeby nie było, z pomocą Google – tutaj znajduje się jedyny działający sposób na okiełznanie żarłocznego Googla powiększającego jednostki reklamowe w pionie i zajmującego cenne miejsce w serwisach internetowych.
Banery reklamowe dla poszczególnych rozmiarów urządzeń
Zacząć musimy od ustalenia ile miejsca przeznaczamy na reklamę na poszczególnych urządzeniach, wyświetlających naszą stronę internetową. W popularnych rozwiązaniach, takich jak Twitter Bootstrap, mamy gotowe rozmiary dla poszczególnych urządzeń. Dla Boostrapa 3 dla urządzeń XS – najmniejszych, o szerokości ekranu do 768 px warto wybrać jednostki reklamowe które zmieszczą się na telefonie w pozycji pionowej.
Popularne telefony mają rozmiar ekranu w pikselach ok. 760×360. Dla komfortu użytkownika telefonu warto wyświetlać reklamy o szerokości mniejszej niż 360px. Z tabeli formatów reklamowych Google wybieramy zatem Large mobile banner o rozmiarze 320×100. Jeśli chcemy większą jednostkę reklamową, możemy zamieścić też Medium Rectangle o rozmiarze 300×250, ale będzie on bardziej uciążliwy dla użytkownika. Dla rozmiaru XS zatem, nasze media query będzie wyglądać tak:
.adsense1 { width: 320px; height: 100px; }
Nie ustawiamy rozmiaru, zgodnie z ideą Google „Mobile first”.
Rozmiarze Bootstrap sm obejmuje telefony od 768 do 991px. Najlepiej umieścić jednostkę reklamową o szerokości 728×90, czyli Leaderboard Nasze media query:
@media(min-width: 768px) { .adsense1 { width: 728px; height: 90px; } }
W rozmiarze Bootstrap md, czyli tablety i niewielkie desktopy ekran może mieć od 992px do 1199px. Dla tego rozmiaru zwykle kolumny stron umieszczane są jeszcze jedna pod drugą, więc reklama zwykle może mieć szerokość pełną, to jest 992 px. Pasującym rozmiarem reklamy jest panorama o wymiarach 980x120px. Ustawiamy zatem
@media(min-width: 992px) { .adsense1 { width: 980px; height: 120px; } }
Rozmiar duży, czyli lg – na laptopie czy komputerze stacjonarnym, charakteryzuje się tym, że kolumny wyświetlane są obok siebie, w zależności od layoutu. Przy stronie o szerokości np. 1200px reklama może zajmować np. połowę, czyli 600px – zależy to tylko i wyłącznie od layoutu strony. Nie ma zatem tutaj reguły. Na górze strony może to na przykład być jeden z polskich formatów uznawany przez Google – PL Double Billboard o wymiarze 750×200.
Zakodujmy to w media query
@media(min-width: 1200px) { .adsense1 { width: 750px; height: 200px; } }
Kod reklamy Adsense do wstawienia na stronę
Poniżej nasz gotowy kod do wstawienia na stronę:
<style>
.adsense1 { width: 320px; height: 100px; }
@media(min-width: 768px) { .adsense1 { width: 728px; height: 90px; } }
@media(min-width: 992px) { .adsense1 { width: 980px; height: 120px; } }
@media(min-width: 1200px) { .adsense1 { width: 750px; height: 200px; } }
<style>
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– example_responsive_1 –>
<ins class=”adsbygoogle adsense1″
style=”display:inline-block”
data-ad-client=”ca-pub-XXXXXXX11XXX9″
data-ad-slot=”8XXXXX1″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Oczywiście zamiast XXXX wklejamy swoje numery ca-pub oraz numer slotu reklamowe data-ad-slot.
Należy zwrócić uwagę na display „inline-block” i definicje klasy adsense1 (może to być dowolna nazwa klasy). Ustawianie rozmiarów tutaj bezpośrednio w parametrze „style” nie działa, a było zalecane przez Google !
W przypadku blokady konta Adsense ze względu na modyfikacje kodu reklamowego, można powołać się na stronę Google wsparcia Adsense, gdzie dokładnie take modyfikacje są dozwolone i nawet doradzane przez Google.