Jak dopasować reklamy Adsense do responsywnego szablonu? | DailyWeb.pl - codziennie o sieci

Jak dopasować reklamy Adsense do responsywnego szablonu?

Opublikowano 4 lata temu - 3


Reklamy na blogu już od kilku dni a dopiero wczoraj udało mi się rozwiązać problem, który męczył mnie od samego początku. Mianowicie dopasowanie reklamy Google Adsense do mojego responsywnego szablonu. Sprawa zasadniczo wydawała się bardzo prosta w opracowaniu i gdy już miałem całość gotową z ciekawością rzuciłem okiem, co na to rozwiązanie regulamin GA. Okazało się, że złapałbym bana gdybym te rozwiązanie wdrożył :-)

Mianowicie chciałem wykorzystać najprostsze możliwe rozwiązanie, czyli zależnie od szerokości ekranu użytkownika (telefon/tablet/PC) miał pokazać lub ukryć reklamy za pomocą: display:block; (jeśli wielkość ekranu była większa niż np. 400px) i display:none; (jeśli szerokość ekranu była mniejsza niż wielkość banera reklamowego). Nic bardziej mylnego, regulamin Google Adsense na to nie pozwala i w sumie jest to całkiem zasadne. Dlaczego? Otóż polecenia display:none powoduje, że reklama nie zostanie wyświetlona, mimo tego kod GA zostanie zinterpretowany i zostanie ona pobrana. W związku z tym zachwiane zostaną statystyki pobrania kodu a na ich podstawie może zostać przekłamana statystyka wyświetleń reklamy (jeśli jest ona zliczana na podstawie pobrania kodu).

W związku z całym zajściem sprawa się okazała nieco trudniejsza. Oczywiście Adsense oferuje reklamy responsywne, ale jak dla mnie są one do bani z jednego prostego względu. Totalnie nie mam wpływu na wysokość tej reklamy, podczas gdy głównie wyświetla się banner o wysokości 100px i długości 750px (do zobaczenia pod pierwszym wpisem na stronie głównej bloga). Jak problem rozwiązać? To co przyszło mi jako kolejne na myśl, to zastosowanie kodu JS/jQuery. Algorytm? Pobranie wielkości okna i pobranie odpowiedniego kodu Google Adsense. Widziałem, że takie metody są praktykowane, ale okazało się, że jest jeszcze prostsza metoda, sugerowana przez same Google.

Chodzi o zastosowanie @media w CSS czyli polecenia dzięki któremu dopasujemy rozmiar reklamy zależnie od medium, na którym strona jest uruchomiona. Powołując się na przykład z mojej strony. Wszystkie bannery/box mają określone trzy rodzaje @media w stylach CSS. Minimalna szerokość ekranu 800px, 500px i wartość domyślna. Co to za magia? Przykład powinien naświetlić sprawę. Najpierw określamy przedziały szerokości:

<style type="text/css">
.adslot_1 {
width: 320px; height: 50px;  /*wielkość domyślna naszego bannera*/
}
.@media (min-width:500px) { .adslot_1 {
width: 468px; height: 60px;  /*jeśli wielkość ekranu naszego gościa ma minimum 500px, to wyświetl banner 468x60px*/
}}
.@media (min-width:800px) { .adslot_1 {
width: 728px; height: 90px;  /*jeśli wielkość ekranu naszego gościa ma minimum 800px, to wyświetl banner 728x90px*/
}}
</style>

Kolejnym krokiem jest dołączenie klasy do naszego kodu emisji reklam Google Adsense:

</pre>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GLOWNA - top -->
<ins class="adsbygoogle adslot_1" <!-- tutaj doklejamy klasę wyżej zdefiniowaną adslot_1 -->
 style="display:inline-block;" <!-- ważne jest by z tego fragmentu usunąc jeśli występuje określenie wysokości i szerokości bannera, nasza klasa adslot_1 będzie ją określać dynamnicznie, zależnie od szerokości ekranu naszego gościa -->
 data-ad-client="nr_wydawcy"
 data-ad-slot="jakis_nr_wygenerowany_przez_G"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Pamiętajcie o o moich komentarzach umieszczonych w powyższych wypisach. Jeśli wsytępowało w pierwotnym kodzie: display:inline-block; to może ono zostać, ważne jest jednak by usunąć deklarację szerokości i wysokości zaszytej w parametrze style w tagu <ins>. Oczywiście tych deklaracji stylów może być tyle ile macie reklam AS na stronie. Całość ma wyglądać mniej więcej tak:

<style type="text/css">
.adslot_1 {
width: 320px; height: 50px;  /*wielkość domyślna naszego bannera*/
}
.@media (min-width:500px) { .adslot_1 {
width: 468px; height: 60px;  /*jeśli wielkość ekranu naszego gościa ma minimum 500px, to wyświetl banner 468x60px*/
}}
.@media (min-width:800px) { .adslot_1 {
width: 728px; height: 90px;  /*jeśli wielkość ekranu naszego gościa ma minimum 800px, to wyświetl banner 728x90px*/
}}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle adslot_1" <!-- tutaj doklejamy klasę wyżej zdefiniowaną adslot_1 -->
style="display:inline-block;" <!-- ważne jest by z tego fragmentu usunąc jeśli występuje określenie wysokości i szerokości bannera, nasza klasa adslot_1 będzie ją określać dynamnicznie, zależnie od szerokości ekranu naszego gościa -->
data-ad-client="nr_wydawcy"
data-ad-slot="jakis_nr_wygenerowany_przez_G"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Instrukcje możecie znaleźć także na stronach pomocy Google. Niemniej mam nadzieje, że udało mi się przybliżyć Wam pokrótce aspekty związane z wyświetlaniem reklam Google w szablonie strony internetowej, który jest responsywny.