Kreativy HTML5

Kreativy HTML5 jsou reklamy vytvořené pomocí JavaScriptu, HTML a CSS, které se zobrazují na webových stránkách nebo v mobilních aplikacích. Může se jednat o obsahové reklamy nebo o reklamy rich media.

Obsahové – grafické reklamy, na které lze kliknout, a přejít tak na web inzerenta
Rich media – reklamy s interaktivními prvky, jako jsou animace, galerie obrázků, hry nebo vložená videa

Služba Display & Video 360 podporuje přímé nahrávání obsahových bannerů a bannerů rich media. Pokud však chcete používat kreativy s pokročilými funkcemi rich media, včetně rozbalitelných nebo vsunutých formátů, použijte službu Studio. Kreativy ze služby Studio lze nakonfigurovat pomocí služby Campaign Manager 360 a synchronizovat s účtem Display & Video 360.

Kreativy HTML5 lze přiřadit k obsahovým řádkovým položkám.

Podporované typy kreativ HTML5

Služba Display & Video 360 podporuje následující formáty kreativ HTML5. Příklady jednotlivých typů kreativ najdete v galerii Rich Media Gallery.

Obsahová síť

Kreativa HTML5 s jednou nebo více pevnými velikostmi a pevnou pozicí na webové stránce nebo v mobilní aplikaci.

Podporované funkce obsahových kreativ:

Značky kliknutí – Značky kliknutí jsou části kódu používané k měření kliknutí, která otevírají vstupní stránku inzerenta.
Responzivní kreativy – Pokud si přiřazování kreativ chcete usnadnit, můžete několik různých velikostí stejného obsahového banneru zabalit do jedné responzivní kreativy.

Rich media

Rich media je pojem označující reklamy, které mají pokročilé funkce, jako je video, zvuk nebo jiné poutavé prvky. Reklamy rich media podporují více metrik umožňujících zaznamenávat interakce s reklamami. Díky tomu získáte lepší přehled o interakcích uživatelů s reklamou. (Reklamy rich media například mohou obsahovat počítadla a časovače, které ukazují, kolikrát nebo jak dlouho lidé hráli hru ve vaší reklamě.)

Podporované funkce a formáty kreativ rich media:

Metriky rich media – Počítejte kliknutí, opuštění, interakce, doby přehrávání videí apod. pomocí metrik rich media.
Bannerové video – Reklamy, ve kterých jsou přehrávače videa. Videa lze zahrnout do všech formátů kreativ rich media kromě kreativ založených na datech.
Rozbalitelné na celou obrazovku – Reklamy, které se mohou rozbalit a vyplnit obrazovku mobilního zařízení. Například kreativy 3D Swirl.
Kreativy založené na datech – Kreativy založené na datech mohou přizpůsobovat své sdělení různým segmentům zákazníků.
Paralaxové kreativy – Paralaxa je animační efekt, který umožňuje vytvořit v kreativách rich media pomocí vrstev obrázků iluzi hloubky. Když divák stránku na mobilním zařízení posouvá nahoru nebo dolů, pohybují se obrázky v popředí a v pozadí různou rychlostí.

Vytvoření kreativy HTML5

Kreativy HTML5 je možné vytvořit v libovolném editoru HTML5, případně můžete použít bezplatnou webovou aplikaci Google Web Designer. Po vytvoření kreativy soubory zabalte do souboru .zip a nahrajte ho do služby Display & Video 360.

Vytvoření obsahového banneru HTML5

Obsahový banner HTML5 můžete vytvořit pomocí aplikace Google Web Designer nebo pomocí libovolného editoru HTML5.

Pokud chcete předejít prodlevám způsobeným zamítnutím, dodržujte při vytváření kreativy pokyny pro obsahové bannery ve formátu HTML5.

Google Web Designer

Google Web Designer je bezplatný nástroj určený k navrhování a vývoji kreativ HTML5, pomocí kterého můžete vytvořit libovolný typ kreativ HTML5. V nástroji Google Web Designer můžete buď začít zcela od začátku, nebo využít vestavěnou šablonu.

Vytvoření bannerové reklamy pomocí aplikace Google Web Designer

Editor HTML5

Pokud chcete raději napsat vlastní kód, můžete banner vytvořit v libovolném editoru HTML5.

Stáhnout ukázkový soubor ZIP

(pokročilé) Vytvoření banneru HTML5 od začátku

Vytvořte platný soubor HTML, včetně značek <html>, <head>, <title> a <body>.
Pokud chcete uvést požadovanou velikost kreativy, přidejte značku <meta>:
<meta name="ad.size" content="width=[x], výška=[y]">
Přidejte značku kliknutí:
1. Přidejte tuto značku script a řetězec https://www.google.com nahraďte vstupní stránkou inzerenta:
  
  <script type="text/javascript"> var clickTag = "https://www.google.com"; </script>
2. Značku <div> primárního obrázku nebo kontejneru reklamy vložte do značky <a>, aby na ni bylo možné kliknout:
  <a href="javascript:window.open(window.clickTag)"> <div id="container"> <img src="image.png" /> </div> </a>

Vytvoření banneru rich media

Bannery rich media můžete vytvářet v libovolném editoru HTML5 nebo v aplikaci Google Web Designer. Nejprve vytvořte bannerovou reklamu a poté přidejte mediální komponenty, například video, video YouTube nebo zvuk.

V bannerech rich media je vyžadován aktivátor nástroje Studio. Možná použití:

Videa a obrázky můžete bezpečně načítat pomocí kódu Enabler.getUrl().
Otevřete inzerentovu vstupní stránku pomocí kódu Enabler.exit(). Namísto značek kliknutí používejte v bannerech rich media značky opuštění.

Pokud chcete předejít prodlevám způsobeným zamítnutím, postupujte při vytváření kreativy podle pokynů pro kreativy rich media.

Co zahrnout do souboru ZIP kreativy HTML5

Soubory ZIP kreativ HTML5 mohou obsahovat až 100 souborů a jejich velikost není nijak omezena. Aby však byly splněny požadavky majitele stránek, zkuste soubor ZIP ponechat co nejmenší.

Stáhnout ukázkový soubor ZIP

Pojmenujte soubor ZIP

Zadejte název souboru ZIP kreativy HTML5 kratší než 50 znaků (včetně přípony „.zip“). Pokud je název souboru delší, nebude ho možné nahrát.

Podporované typy souborů

HTML/text: HTML, HTM, CSS, JS
Obrázky: JPG, JPEG, GIF, PNG, SVG
Písma: DFONT, EOT, OTF, TTE, TTF, WOFF, WOFF2

Co do souborů ZIP kreativ HTML5 zahrnout

Soubor HTML: Primárním podkladem kreativy HTML5 je soubor HTML. Soubor musí obsahovat alespoň jednu značku opuštění nebo kliknutí a musí být možné ho načíst do prvku iframe. Služba Display & Video 360 prvek iframe zobrazí společně s vašimi podklady.
Ostatní soubory: Obrázky, styly CSS a soubory JavaScriptu používané v souboru HTML. Kreativy rich media podporují také následující typy souborů, videa však musí být hostována na externím serveru, případně kreativa musí být vytvořená pomocí nástroje Studio:
.avi, .mov, .mp4, .m4v, .mpeg .mpg, .oga, .ogg, .ogv, .webm, .wmv.

Co do souborů ZIP kreativ HTML5 nezahrnovat

Další soubory ZIP: Do souboru ZIP kreativy HTML5 nepřidávejte žádné další soubory ZIP.
Nepoužívané soubory: Soubory přidávejte pouze v případě, že je používá soubor HTML. Nepřidávejte žádné zdrojové ani autorské soubory.
Místní úložiště nebo úložiště relace: Služba Display & Video 360 nepřijímá podklady HTML5, které používají místní úložiště nebo úložiště relace.
Záložní obrázek: Do souboru ZIP kreativy HTML5 nezahrnujte záložní obrázky. Záložní obrázky nahrajte samostatně v sekci Záložní obrázky.
Soubory s dlouhými názvy: Názvy souborů s videi a zvuky mohou mít maximálně 50 jednobajtových znaků. Ostatní názvy souborů mohou mít maximálně 200 jednobajtových znaků. (Například japonština, čínština a korejština používají dvoubajtové znaky. V těchto jazycích jsou limity 25 a 100.)

(Nepovinné) Záložní obrázky

Záložní obrázky jsou volitelné a zobrazují se jen v případě, že prohlížeč nebo platforma diváka nepodporuje podklady kreativy. Jako příklad lze uvést případ, kdy někdo prochází web pomocí prohlížeče Internet Explorer 8 a kreativa využívá animace CSS.

Záložní obrázky nahrajte odděleně od souboru ZIP s kreativou. Pokud záložní obrázek nenahrajete, zobrazí se místo něj prázdný obrázek vygenerovaný systémem.

Nahrání kreativy HTML5

Než začnete, zkontrolujte, zda jsou podklady kreativy zabaleny do souboru ZIP. Co do souborů ZIP kreativ HTML5 zahrnout

Otevřete inzerenta a v nabídce vlevo klikněte na Kreativy.
Klikněte na Nové, pak na Nahrát a pak na HTML5 nebo obrázek.
Zadejte název kreativy ve službě Display & Video 360.
Pokud chcete přidat soubory kreativ, přetáhněte soubor ZIP z počítače do části Sem přetáhněte soubor. Případně klikněte na Nahrát a vyberte soubor ZIP.

V případě odmítnutí nahrávaného souboru HTML5 postupujte podle těchto pokynů k odstraňování problémů.
Vyberte pro kreativu jednu nebo více zobrazovaných rozměrů. Služba Display & Video 360 podporuje kreativy s jednou velikostí i responzivní kreativy HTML5 s několika velikostmi.
V sekci Události zobrazte a upravte možnosti opuštění, které byly v kreativě zjištěny. U každého opuštění (neboli značky kliknutí) můžete upravit adresu vstupní stránky začínající schématem http:// nebo https://. Pokud chcete upravit štítek nebo URL pro přehledy, umístěte na řádek kurzor a klikněte na ikonu úprav .
Poznámka: Po uložení kreativy může několik minut trvat, než se v náhledu nebo u synchronizovaného inzerenta Campaign Manager 360 zobrazí aktualizovaná vstupní stránka.
Kreativu uložte.

Kreativy ve službě Display & Video 360 jsou ručně a automaticky kontrolovány, zda fungují. U kreativ se také kontroluje, zda splňují zásady inzerce společnosti Google a zásady burz, na kterých se mohou zobrazovat. Stav kreativ můžete zkontrolovat na kartě Stav kreativy.

Rozšířená nastavení

Následující nastavení jsou volitelná.

Pokud se vsunutá reklama na mobilu nevejde na obrazovku, služba Display & Video 360 přizpůsobí její velikost. Pokud chcete tomuto škálování zabránit, zapněte možnost „Nepřizpůsobovat šířce zařízení.“
Přidejte Záložní obrázek a štítek pro přehledy. Pokud nahráváte responzivní kreativu, můžete nahrát jeden záložní obrázek pro každou velikost.
Nahrajte obrázek pro zdvořilé načtení. Tento obrázek se zobrazí v případě prodlevy načítání primárních souborů kreativy nebo v případě pomalého připojení k síti.
Pokud je inzerent ve službě Display & Video 360 propojen s účtem služby Campaign Manager 360, přidejte měřicí reklamu, abyste u propojeného inzerenta ve službě Campaign Manager 360 měli k dispozici přehledy. Poznámka: Tato možnost je k dispozici pouze u kreativ rich media, Swirl a u vlastních kreativ založených na datech.
1. Klikněte na Vlastnosti zobrazování.
2. Vyhledejte existující měřicí reklamu služby Campaign Manager 360. Aby měla čas se synchronizovat, měli byste vytvořit měřicí reklamu ve službě Campaign Manager 360 před vytvořením kreativy ve službě Display & Video 360.
  
  Tip: Aby bylo snazší najít správnou měřicí reklamu, pro každou reklamu a umístění ve službě Campaign Manager 360 přiřaďte pouze jednu měřicí reklamu.
Kliknutím na Další podrobnosti přidejte měřicí značku, integrační kód nebo poznámky.

Sdílení náhledu

Pomocí odkazu na náhled můžete kreativy HTML5 sdílet s dalšími uživateli, aby je mohli zkontrolovat nebo schválit. Náhled bude moci zobrazit každý, komu tento odkaz poskytnete. Není vyžadováno přihlášení.

Časté dotazy

Proč se kreativa po nahrání souboru zobrazuje nesprávně?

Velikost kreativy se určuje buď podle kreativy, nebo podle záložního obrázku. Zkontrolujte, zda se velikost záložního obrázku shoduje s velikostí hlavní kreativy, případně vyberte správné rozměry kreativy pomocí rozbalovací nabídky Rozměry.

Proč kreativu nelze nahrát?

Mezi běžné problémy, které vám mohou zabránit v nahrání podkladu, patří:

Název souboru je příliš dlouhý: U většiny typů souborů je maximální délka 200 jednobajtových znaků nebo 100 dvoubajtových znaků. U zvukových souborů a videosouborů je maximální délka 50 jednobajtových znaků nebo 25 dvoubajtových znaků.
Soubory ZIP v souboru ZIP: Zahrnutí komprimovaného souboru ZIP do jiného souboru ZIP není povoleno.
Kreativa nemá žádný proklik: Všechny kreativy musí obsahovat alespoň jednu možnost opuštění, která vede na vstupní stránku inzerenta.
Kreativu Google Web Designer je potřeba aktualizovat: Pokud byla kreativa vytvořena pomocí nástroje Google Web Designer, může se zobrazit chyba „Metadata v kódu HTML nástroje Google Web Designer jsou neplatná“. Tato chyba znamená, že kreativa byla vytvořena v zastaralé verzi nástroje Web Designer a je potřeba ji aktualizovat. Upgradujte na nejnovější verzi nástroje Web Designer a poté kreativu otevřete a znovu publikujte.

Další informace najdete v článku Odstraňování problémů s nahráváním kreativ.

Pomohly vám tyto informace?

Jak bychom článek mohli vylepšit?