Kako izmijeniti responzivni oglasni kôd

Ako utvrdite da naš oglasni kôd za responzivne oglase ne radi sve što vam treba, možete izmijeniti oglasni kôd kako bi bolje zadovoljavao potrebe vaše responzivne web-lokacije. U sljedećim primjerima pokazujemo kako ispravno unijeti te izmjene:

Važno:

• Ako niste upoznati s CSS medijskim upitima i mijenjanjem oglasnog koda, preporučujemo vam da počnete s odjeljkom Primjer točne veličine oglasne jedinice prema širini zaslona.
• Ako ste već upoznati s CSS medijskim upitima i mijenjanjem oglasnog koda, slobodno prijeđite izravno na odjeljak Primjeri naprednih značajki responzivnog oglasnog koda.

Napomena: primjeri opisani u ovom članku predstavljaju prihvatljive izmjene AdSense oglasnog koda. Nećete prekršiti programska pravila za AdSense ako izmijenite responzivni oglasni kôd na ove odobrene načine.

Primjer točne veličine oglasne jedinice prema širini zaslona

Ovaj primjer pokazuje kako možete izmijeniti responzivni kôd da biste postavili posebne veličine oglasnih jedinica za tri raspona širina zaslona, tj. za mobilni uređaj, tablet i stolno računalo. Za primjenu ovog primjera ne morate imati iskustva s CSS medijskim upitima ili mijenjanjem AdSense oglasnog koda.

Evo nekoliko izmijenjenih responzivnih oglasnih kodova koji postavljaju sljedeće točne veličine oglasnih jedinica prema širini zaslona:

• Za širine zaslona do 500 piksela: oglasna jedinica veličine 320 x 100.
• Za širine zaslona između 500 i 799 piksela: oglasna jedinica veličine 468 x 60.
• Za širine zaslona od 800 piksela i šire: oglasna jedinica veličine 728 x 90.

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Da biste prilagodili taj primjer koda za svoju web-lokaciju:

1. Izradite prikaznu oglasnu jedinicu na AdSense računu, pazeći da u odjeljku Veličina oglasa ostane odabrana opcija Responzivna. Zabilježite sljedeće informacije iz responzivnog oglasnog koda:
   • Vaš ID izdavača, npr. ca-pub-1234567890123456
   • ID oglasne jedinice (data-ad-slot), na primjer 1234567890.
2. U uzorku koda:
   • Svaku instancu example_responsive_1 zamijenite jedinstvenim nazivom, npr Home_Page, front_page_123 itd.
     Napomene:

     • Vaš jedinstveni naziv mora sadržavati samo slova engleske abecede (A – Z), brojeve i podvlake, a prvi znak mora biti slovo engleske abecede.
     • Svaki put kad prilagodite ovaj primjer koda, morate upotrijebiti drugi jedinstveni naziv.
   • Zamijenite ca-pub-1234567890123456 vlastitim ID-om izdavača.
   • Zamijenite 8XXXXX1 vlastitim ID-jem oglasne jedinice.
3. Odlučite koje veličine želite da vaša oglasna jedinica ima prema širini zaslona:
   • Ako ste zadovoljni postojećim veličinama oglasnih jedinica u primjeru koda, ne trebate unositi dodatne promjene.
   • Ako želite postaviti drugačije veličine oglasnih jedinica prema širini zaslona, u uzorku koda:
     • Zamijenite 320px i 100px širinom i visinom oglasne jedinice koju želite koristiti za širine zaslona do 500 piksela.
     • Zamijenite 468px i 60px širinom i visinom oglasne jedinice koju želite koristiti za širine zaslona između 500 i 799 piksela.
     • Zamijenite 728px i 90px širinom i visinom oglasne jedinice koju želite koristiti za širine zaslona od 800 piksela i šire.
4. Kopirajte i zalijepite izmijenjeni oglasni kôd u izvorni HTML kôd stranice na kojoj želite da se oglasi prikazuju.
   Napomena: nakon što postavite oglasni kôd, preporučujemo da testirate oglase na različitim uređajima i zaslonima da biste provjerili funkcionira li responzivno ponašanje ispravno.

Primjeri naprednih značajki responzivnog oglasnog koda

Ako ustanovite da naš responzivni oglasni kôd ne ispunjava sve vaše potrebe, možete izmijeniti svoj oglasni kôd tako da navodi točnu veličinu za vašu oglasnu jedinicu putem CSS-a.

Napomena: ne preporučujemo upotrebu tih naprednih značajki osim ako niste potpuno sigurni u vezi s izmjenom oglasnog koda.

Određivanje proširive širine i fiksne visine

Responzivni oglasni kôd možete izmijeniti da biste odredili proširivu širinu i fiksnu visinu za oglasnu jedinicu pomoću CSS-a. U sljedećem primjeru prikazano je kako unijeti te izmjene:

Primjer s proširivom širinom i fiksnom visinom

U ovom primjeru pokazuje se kako izmijeniti responzivni oglasni kôd da biste odredili fiksnu visinu od 90 px i varijablu širine od 400 px do 970 px u maksimalnu širinu:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Određivanje točne veličine prema širini zaslona

Responzivni oglasni kôd možete izmijeniti da biste odredili točnu veličinu oglasne jedinice pomoću CSS-a. U sljedećem primjeru prikazano je kako unijeti te izmjene:

Primjer s točnom veličinom prema širini zaslona

Ako znate točne veličine oglasnih jedinica prema uređaju koje najbolje odgovaraju responzivnoj web-lokaciji, pomoću CSS3 medijskih upita možete postaviti veličinu responzivne oglasne jedinice. U sljedećem primjeru pokazuje se kako izmijeniti oglasni kôd za korištenje CSS3 medijskih upit:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Pravila @media imaju CSS3 sintaksu i podržavaju ih svi moderni preglednici. Postavljanje veličine oglasne jedinice pomoću CSS-a u vanjskim listovima stilova nije službeno podržano.

Skrivanje oglasne jedinice

U nekim slučajevima, posebno na manjim mobilnim uređajima, možda uopće nećete htjeti prikazati oglas. Ako želite sakriti oglasnu jedinicu, možete postaviti parametar s CSS medijskim upitima kako se ne bi upućivao zahtjev za oglas i kako se oglas ne bi prikazivao. Sljedeći primjer prikazuje kako možete unijeti te izmjene:

Primjer skrivanja oglasa za određene veličine zaslona

Ako želite prikazivati oglase samo na određenim veličinama zaslona, to možete postići pomoću CSS-a. U sljedećem primjeru pokazuje se kako izmijeniti oglasni kôd za korištenje CSS3 medijskih upita za skrivanje oglasa za određene veličine zaslona:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

U ovom primjeru oglasi se neće prikazivati ako je širina zaslona manja od 400 piksela.

Čak i uz ove mogućnosti, uvijek se trebate pridržavati naših pravila o položaju oglasa. Napominjemo da su našim programskim pravilima dopuštene samo ograničene izmjene koda.