Jak vytvořit interaktivní reklamu HTML5 za 10 minut
Po zániku aplikace Flash byla odpovědnost za interaktivní reklamy předána do HTML5. Zde se dozvídáme, jak vytvořit interaktivní reklamu HTML5 za pouhých 10 minut.
Dnes bychom rádi ukázali, jak vytvořit interaktivní bannerovou reklamu HTML5.
To byl projekt, pro který jsme dělali Carlsberg chvíli zpátky, což si myslíme, že může být užitečné pro konstruktéry a programátory, kteří se zajímají o návrhovou práci na frontě.
Carlsberg je celosvětová značka piva, která zaměstnává více než 40 000 lidí po celém světě. Vedle značky značky Carlsberg pro domácnosti mají i další značky jako Tuborg, Somersby (jablečný), Kronenbourg a Dali Beer (rychle rostoucí značka v Asii).
Co je interaktivní reklama?
Uděláme to rychle. Ve starých dnech jsme měli textové reklamy, které jsou v podstatě krátké textové reklamy s odkazem na stránku, produkt nebo službu inzerenta.
Následovaly statické bannerové reklamy. Jedná se obvykle o statické obrázky. Jsou přesvědčivější, že textové reklamy, protože obrázky stojí za tisíc slov. Hlavní formáty jsou 300 × 250 pixelů (rámeček), 728 × 90 (širokoúhlý) nebo 90 × 728 (mrakodrap).
Poté se v prohlížeči na ploše přehraje technologie technologie Flash. Flash byl revoluční, protože umožnil vlnu animovaných bannerových reklam i interaktivních reklam. Animované reklamy zaujmou pozornost uživatelů, což vede k vyšší míře prokliku (CTR). Hráči mohou dokonce hrát mikro-hru, například natáčení něčeho, nebo vrhání míče do obruče.
V roce 2010 společnost Apple přesvědčila svět o výhodách přechodu na HTML5 a s obrymi, včetně společnosti Google, která následovala, technologie Flash rychle klesla.
Společnosti s reklamními technologiemi vidí obrovský růstový potenciál v mobilních zařízeních, a proto začali implementovat HTML5 do nové reklamní jednotky napříč platformou. Tato jednotka se nazývá interaktivní reklama HTML5, podporovaná novými průmyslovými standardy, jako jsou MRAID, MRAID2 a podobně.
Dlouhý příběh, interaktivní reklama HTML5, je reklama, která nyní funguje na smartphonech, tabletech a prohlížečích desktopů.
Takže co je to Carlsberg reklama?
Tady je a odkaz na video , zobrazující interaktivní reklamu běžící na zařízení iPhone:
Cílem této interaktivní reklamy je zvýšit povědomí o turnaji World Rugby Sevens, což je každoroční rugby, která se odehrává v Hongkongu. Nejlepší z nejlepších týmů z celého světa se každoročně soutěží o nejlepší cenu. Carlsberg je jedním z hlavních sponzorů.
Zkušenost s reklamami je jednoduchá. Uživatelé vidí zářící pivní láhev Carlsberg. Zpráva požaduje, aby uživatel klepal na zářící láhev.
Po klepnutí na něj krátké animace hraje rugby hráče, který nosí chladnou a ledovou kávu z piva Carlsberg.
Objeví se slogan zábavné značky: "Jste připraveni na pivo"?
Uživatelé pak mohou kliknout na odkaz "Najít na Facebooku" a navštívit stránku inzerenta pro více informací.
Zpět na naše pravidelné programování
Interaktivní reklama HTML5 se skládá z 5 hlavních prvků:
- index.html (hlavní vstupní bod)
- main.js (javascript obsahující logiku)
- main.css (styl stylu CSS)
- majetek (vizuální majetek)
- odchozí odkaz (kde by reklama měla uživatelům přimět)
Začneme vytvářet reklamu ...
Část 1: index.html
Index.html se skládá ze standardních prohlášení HTML.
Viz pero Interaktivní reklamní ukázka Carlsberg - index.html Ben Chong ( @marketjs ) na CodePen .
Na tom záleží meta viewport a spojení na main.css a main.js
Jak můžete vidět, je to docela jednoduché. Nic neobvyklého.
Část 2: main.js (Maso a kosti)
Hlavní.js je soubor Javascript, který řídí veškerou interakci s reklamou.
Viz pero Interaktivní reklamní ukázka Carlsberg - main.js Ben Chong ( @marketjs ) na CodePen .
V horní části vložíme celou JQueryho miniaturní JS. Všimněte si, že můžete použít nejnovější verzi jQuery http://jquery.com/
jQuery bude užitečné pro většinu manipulačních technik DOM, které používáme.
Dále vytvoříme jednoduchou funkci předběžného načtení obrazu.
Předem načteme spoustu grafických aktiv souvisejících s reklamou.
Nyní na logiku. Když se reklama načte, zjistíte, že vytvoříme 2 divy , nazvané scéna1 a scéna2 .
scéna1 obsahuje rozvětvenou láhev. Po kliknutí na něj přechází na scénu 2 přes funkci gotoScene2
scéna2 sama obsahuje tag div, který přesměruje na Facebook stránku Carlsbergu, když je klepnut.
To je v podstatě to. Je zapotřebí velmi jednoduchá logika.
Část 3: main.css (Stylesheet)
Soubor main.css obsahuje všechny styly související s CSS.
Viz pero Interaktivní reklamní ukázka Carlsberg - main.css Ben Chong ( @marketjs ) na CodePen .
V tomto příkladu jsme udělali některé z cool animací, které vidíte prostřednictvím CSS
Například, zářící pivní láhev používá hodnotu blikače z vlastností -webkit-animace
Přidáváme také několik standardních algoritmů, které uživatelé mají tendenci milovat, například bounceIn a bounceOut
Část 4: Vizuální majetek
Interaktivní reklamy vyžadují zábavné vizuály, které se týkají značky. Proto je vhodné pracovat s návrhářem na interaktivních reklamách HTML5.
V našem případě jsme použili: prázdné zelené pozadí; Láhev; Pozadí s rugby muž držení ledové kbelík s pivem; Grafika výzvy k akci.
Část 5: výzva k akci (CTA)
Toto jsou nejdůležitější části jakékoli interaktivní reklamy. Výzva k akci musí být navržena tak, aby uživatelé skutečně chtěli kliknout a zjistit další informace.
Musí to být přesvědčivá zpráva, která se váže ke zvědavosti uživatele.
souhrn
Doufáme, že tento článek bude pro komunitu užitečný. Jak můžete vidět, tato interaktivní reklama se opravdu snadno staví a trvá méně než 10 minut, než se sami sestavíte.
Klikněte zde stáhnout soubory projektu a zdrojový kód.