Ako upraviť kód responzívnej reklamy

Ak zistíte, že náš kód responzívnej reklamy nespĺňa všetky vaše očakávania, môžete ho upraviť, aby lepšie zodpovedal požiadavkám vášho responzívneho webu. V nasledujúcich príkladoch je uvedené, ako vykonať tieto úpravy.

Dôležité:

• Ak nemáte skúsenosti s dopytmi „media“ v jazyku CSS a upravovaním kódu reklamy, odporúčame vám začať so sekciou Príklad presnej veľkosti reklamnej jednotky podľa šírky obrazovky.
• Ak už máte skúsenosti s dopytmi „media“ v jazyku CSS a upravovaním kódu reklamy, môžete prejsť priamo do sekcie Príklady rozšírených funkcií kódu responzívnej reklamy.

Poznámka: Príklady uvedené v tomto článku sú prijateľnými úpravami kódu reklamy AdSense. Úpravou kódu responzívnej reklamy týmito schválenými spôsobmi neporušíte pravidlá programu AdSense.

Príklad presnej veľkosti reklamnej jednotky podľa šírky obrazovky

Tento príklad znázorňuje, ako upraviť kód responzívnej reklamy tak, aby ste nastavili konkrétne veľkosti reklamnej jednotky pre tri rozsahy šírky obrazovky, t. j. pre mobil, tablet a počítač. Na pochopenie tohto príkladu nemusíte mať skúsenosť s dopytmi „media“ v jazyku CSS ani s upravovaním kódu reklamy AdSense.

Nižšie je uvedený upravený kód responzívnej reklamy, pomocou ktorého nastavíte nasledujúce presné veľkosti reklamnej jednotky podľa šírky obrazovky:

• Pre šírky obrazovky do 500 pixelov: reklamná jednotka 320 x 100.
• Pre šírky obrazovky od 500 pixelov do 799 pixelov: reklamná jednotka 468 x 60.
• Pre šírky obrazovky od 800 pixelov: reklamná jednotka 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>

Ak chcete tento vzorový kód použiť na svojom webe, postupujte takto:

1. Vo svojom účte AdSense vytvorte obsahovú reklamnú jednotku a v sekcii Veľkosť reklamy ponechajte vybratú možnosť Responzívne. Z kódu responzívnej reklamy si zapíšte nasledujúce informácie:
   • číslo vlastníka, napríklad ca-pub-123456789123456;
   • identifikátor reklamnej jednotky (data-ad-slot), napríklad 1234567890.
2. Vo vzorovom kóde vykonajte nasledujúce kroky:
   • Všetky výskyty reťazca example_responsive_1 nahraďte jedinečným názvom, napríklad Home_Page, front_page_123 atď.
     Poznámky:

     • Jedinečný názov smie obsahovať len anglické písmená (A – Z), čísla a podčiarkovníky a prvý znak musí byť anglické písmeno.
     • Pri každom prispôsobení tohto vzorového kódu musíte použiť iný jedinečný názov.
   • Identifikátor ca-pub-1234567890123456 nahraďte vlastným identifikátorom vlastníka.
   • Identifikátor 8XXXXX1 nahraďte vlastným identifikátorom reklamnej jednotky.
3. Podľa šírky obrazovky sa rozhodnite, aké veľkosti má mať reklamná jednotka:
   • Ak vám vyhovujú existujúce veľkosti reklamnej jednotky vo vzorovom kóde, nemusíte nič meniť.
   • Ak chcete podľa šírky obrazovky nastaviť iné veľkosti reklamnej jednotky, vo vzorovom kóde vykonajte tieto kroky:
     • Hodnoty 320px a 100px nahraďte šírkou a výškou reklamnej jednotky, ktoré chcete používať pre šírky obrazovky do 500 pixelov.
     • Hodnoty 468px a 60px nahraďte šírkou a výškou reklamnej jednotky, ktoré chcete používať pre šírky obrazovky od 500 do 799 pixelov.
     • Hodnoty 728px a 90px nahraďte šírkou a výškou reklamnej jednotky, ktoré chcete používať pre šírky obrazovky od 800 pixelov.
4. Upravený kód reklamy skopírujte a prilepte do zdrojového kódu HTML stránky, na ktorej chcete zobrazovať reklamy.
   Poznámka: Po umiestnení kódu reklamy vám odporúčame, aby ste reklamy otestovali v rôznych zariadeniach a na rôznych obrazovkách a uistili sa, že responzívne vlastnosti fungujú správne.

Príklady rozšírených funkcií kódu responzívnej reklamy

Ak zistíte, že náš kód responzívnej reklamy nespĺňa všetky vaše požiadavky, môžete kód reklamy upraviť tak, že pomocou jazyka CSS určíte presnú veľkosť reklamnej jednotky.

Poznámka: Používanie týchto rozšírených funkcií neodporúčame, ak nemáte istotu, ako upraviť kód reklamy.

Zadanie prispôsobiteľnej šírky a pevnej výšky

Kód responzívnej reklamy možno upraviť tak, že pomocou jazyka CSS zadáte prispôsobiteľnú šírku a pevnú výšku reklamnej jednotky. Nasledujúci príklad znázorňuje, ako môžete tieto úpravy vykonať:

Príklad reklamy s prispôsobiteľnou šírkou a pevnou výškou

Tento príklad znázorňuje, ako upraviť kód responzívnej reklamy tak, aby bola zadaná pevná výška 90 pixelov a premenlivá šírka od 400 do 970 pixelov:
<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>

Určenie presnej veľkosti podľa šírky obrazovky

Kód responzívnej reklamy môžete upraviť tak, aby ste určili presnú veľkosť reklamnej jednotky pomocou jazyka CSS. Nasledujúci príklad znázorňuje, ako môžete vykonať tieto úpravy:

Príklad presnej veľkosti podľa šírky obrazovky

Ak v prípade jednotlivých zariadení poznáte presné veľkosti reklamných jednotiek, ktoré najviac vyhovujú vášmu responzívnemu webu, môžete použiť dopyty „media“ v jazyku CSS3 a nastaviť tak veľkosť responzívnej reklamnej jednotky. Nasledujúci príklad znázorňuje, ako upraviť kód reklamy, aby sa použili dopyty „media“ v jazyku CSS3:
<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>

Pravidlá @media predstavujú syntax jazyka CSS3 a podporujú ich všetky moderné prehliadače. Upozorňujeme, že nastavenie veľkosti reklamnej jednotky pomocou jazyka CSS v externých šablónach kaskádových štýlov nie je oficiálne podporované.

Skrytie reklamnej jednotky

V niektorých prípadoch, hlavne v menších mobilných zariadeniach, pravdepodobne nebudete chcieť zobraziť reklamu vôbec. Ak chcete skryť reklamnú jednotku, parameter s dopytmi „media“ v jazyku CSS môžete nastaviť tak, aby nevznikla žiadna žiadosť o reklamu a nezobrazila sa žiadna reklama. Nasledujúci príklad znázorňuje, ako môžete tieto úpravy vykonať:

Príklad skrytia reklamy pre určité veľkosti obrazoviek

Ak chcete zobraziť reklamy len v zariadeniach s určitou veľkosťou obrazovky, môžete použiť jazyk CSS. Nasledujúci príklad znázorňuje, ako upraviť kód reklamy tak, aby sa použili dopyty „media“ v jazyku CSS3 a reklamy sa tak nezobrazovali v zariadeniach s určitou veľkosťou obrazovky:
<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>

V tomto príklade sa nezobrazia žiadne reklamy, ak je šírka obrazovky menšia než 400 pixelov.

Aj pri takejto flexibilite vždy dodržiavajte naše pravidlá umiestnenia reklamy. Majte na pamäti, že programové pravidlá povoľujú len obmedzené úpravy kódu.