Jak upravovat kód responzivní reklamy

Když zjistíte, že kód responzivní reklamy neplní všechny vaše požadavky, můžete upravit kód reklamy tak, aby lépe splňoval požadavky vašeho responzivního webu. Následující příklady ukazují, jak úpravy správně provést:

Důležité:

• Pokud se s dotazy na média CSS a úpravami kódu reklamy teprve seznamujete, doporučujeme začít s Příkladem přesné velikosti reklamní jednotky na šířku obrazovky.
• Pokud jste již s dotazy na média CSS a úpravami kódu reklamy obeznámení, můžete přejít přímo k části Příklady pokročilých funkcí kódu responzivní reklamy.

Poznámka: Příklady popsané v tomto článku představují přijatelné úpravy kódu reklamy AdSense. Pokud upravíte kód responzivní reklamy těmito schválenými způsoby, neporušíte programové zásady AdSense.

Příklad přesné velikosti reklamní jednotky na šířku obrazovky

Zde je příklad, jak lze kód responzivní reklamy upravit tak, aby volil konkrétní velikost reklamní jednotky podle tří rozmezí šířky obrazovky, tj. pro mobilní zařízení, tablety a stolní počítače. K provedení tohoto příkladu nepotřebujete žádné předchozí zkušenosti s dotazy na média CSS či úpravy kódu reklamy služby AdSense.

Zde je příklad kódu responzivní reklamy, který nastaví následující přesné velikosti reklamní jednotky na šířku obrazovky:

• pro šířku obrazovky až do 500 pixelů: reklamní jednotka o velikosti 320 × 100,
• pro šířku obrazovky v rozmezí od 500 pixelů do 799 pixelů: reklamní jednotka o velikosti 468 × 60,
• pro šířku obrazovky 800 pixelů a více: reklamní jednotka o velikosti 728 × 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>

Postup přizpůsobení vzorového kódu vašemu vlastnímu webu:

1. Vytvořte v účtu AdSense obsahovou reklamní jednotku. Nezapomeňte v oddílu Velikost reklamy nechat zaškrtnutou volbu Responzivní. Z kódu responzivní reklamy si poznačte tyto údaje:
   • vaše ID majitele, například ca-pub-1234567890123456,
   • vaše ID reklamní jednotky (data-ad-slot), například 1234567890.
2. Ve vzorovém kódu:
   • Všechny výskyty parametru priklad_responzivni_1 nahraďte jedinečným názvem, např. Domovska_stranka, prvni_stranka_123 apod.
     Poznámky:

     • Jedinečný název smí obsahovat pouze písmena anglické abecedy (A–Z), číslice a podtržítka. Prvním znakem musí být písmeno.
     • Při každé úpravě tohoto vzorového kódu musíte použít jiný jedinečný název.
   • Parametr ca-pub-1234567890123456 nahraďte svým vlastním ID majitele.
   • Parametr 8XXXXX1 nahraďte vlastním ID reklamní jednotky.
3. Určete velikost, jakou má reklamní jednotka zabírat vzhledem k šířce obrazovky:
   • Pokud jste se stávajícími velikostmi reklamní jednotky ve vzorovém kódu spokojení, nemusíte dělat žádné další změny.
   • Jestliže nastavit jiné velikosti reklamní jednotky na šířku obrazovky, tak ve vzorovém kódu:
     • Nahraďte rozměry 320 px a 100 px šířkou a výškou reklamní jednotky, jakou chcete použít pro šířky obrazovky do 500 pixelů.
     • Nahraďte rozměry 468 px a 60 px šířkou a výškou reklamní jednotky, jakou chcete použít pro šířky obrazovky v rozmezí od 500 pixelů do 799 pixelů.
     • Nahraďte rozměry 728 px a 90 px šířkou a výškou reklamní jednotky, jakou chcete použít pro šířky obrazovky 800 pixelů a více.
4. Zkopírujte upravený kód reklamy a vložte jej do zdrojového kódu HTML stránky, na které chcete, aby se reklama zobrazila.
   Poznámka: Po umístění kódu reklamy doporučujeme otestovat na různých zařízeních a obrazovkách, zda responzivní chování reklam správně funguje.

Příklady pokročilých funkcí kódu responzivní reklamy

Pokud kód responzivní reklamy nefunguje přesně tak, jak byste potřebovali, můžete v něm pomocí CSS určit přesnou velikost reklamní jednotky.

Poznámka: Pokud se v úpravách kódu reklamy dobře nevyznáte, raději tyto pokročilé funkce nepoužívejte.

Určení šířky rozbalené reklamy a pevné výšky

Kód responzivní reklamy můžete upravit tak, aby prostřednictvím CSS udával roztažitelnou šířku a pevnou výšku reklamní jednotky. V následujícím příkladu si ukážeme, jak tyto úpravy provést:

Příklad se šířkou rozbalené reklamy a pevnou výškou

Tento příklad ukazuje, jak můžete kód responzivní reklamy upravit tak, aby zadal pevnou výšku 90 pixelů a proměnlivou šířku od 400 pixelů do 970 pixelů:
<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čení přesné velikosti podle šířky obrazovky

Kód responzivní reklamy můžete upravit tak, aby prostřednictvím CSS uváděl přesnou velikost reklamní jednotky. Na následujícím příkladu si ukážeme, jak tyto úpravy provést:

Příklad s přesnou velikostí podle šířky obrazovky

Pokud znáte přesné velikosti reklamních jednotek pro různá zařízení, které budou pro váš responzivní web nejvhodnější, můžete k nastavení responzivní reklamní jednotky využít dotazy na média CSS3. Tento příklad ukazuje, jak upravit kód reklamy, aby používal dotazy na média 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>

Pravidla @media mají syntaxi stylů CSS3 a jsou podporována ve všech moderních prohlížečích. Upozorňujeme, že nastavení velikosti reklamní jednotky prostřednictvím stylů CSS v externích šablonách stylů není oficiálně podporováno.

Skrytí reklamní jednotky

V určitých případech, zejména na menších mobilních zařízeních, možná nebudete chtít reklamu vůbec zobrazovat. Chcete-li některou reklamní jednotku skrýt, můžete dotazy na média CSS nastavit pomocí parametru tak, aby se negenerovala žádná žádost o reklamu a nezobrazovala se žádná reklama. Postup provádění těchto úprav je popsán v následujícím příkladu:

Příklad skrytí reklam pro určité velikosti obrazovek

Pokud chcete reklamy zobrazovat jen pro určité velikosti obrazovky, můžete k tomu použít styly CSS. Tento příklad ukazuje, jak upravit kód reklamy tak, aby u reklam pro konkrétní velikosti obrazovek skrýval reklamy pomocí stylů CSS3:
<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 příkladu se reklamy nebudou zobrazovat na obrazovkách užších než 400 pixelů.

Při využívání těchto možností ale vždy dodržujte naše zásady pro umisťování reklam. Upozorňujeme, že naše programové zásady povolují jen omezené úpravy kódu.