Jak utworzyć interaktywną reklamę HTML5 w 10 minut
Wraz z końcem Flasha odpowiedzialność za reklamy interaktywne została przekazana do HTML5. Tutaj dowiemy się, jak zbudować interaktywną reklamę HTML5 w zaledwie 10 minut.
Dzisiaj chcielibyśmy zademonstrować, jak stworzyć interaktywną reklamę banerową HTML5.
To był projekt, dla którego zrobiliśmy Carlsberg jakiś czas temu, co naszym zdaniem może być przydatne dla projektantów i programistów zainteresowanych front-endowymi projektami.
Carlsberg to wielomiliardowa, globalna marka piwa, zatrudniająca ponad 40 000 osób na całym świecie. Poza domową marką Carlsberg, mają tam również inne marki, takie jak Tuborg, Somersby (cydr), Kronenbourg i Dali Beer (szybko rosnąca marka w Azji).
Co to jest reklama interaktywna?
Zróbmy krótkie podsumowanie. W dawnych czasach mieliśmy reklamy tekstowe, które są w zasadzie krótką notką tekstową z linkiem do strony reklamodawcy, produktu lub usługi.
Następnie pojawiły się statyczne banery reklamowe. Są to zazwyczaj obrazy statyczne. Są bardziej przekonujące niż reklamy tekstowe, ponieważ obrazy są warte tysiąc słów. Główne formaty to 300 × 250 pikseli (pudełko), 728 × 90 (szerokość) lub 90 × 728 (wieżowiec).
Następnie gra komputerowa Flash w przeglądarce na komputerze. Flash był rewolucyjny, ponieważ umożliwił wyświetlanie animowanych banerów reklamowych, a także interaktywnych. Animowane reklamy przyciągają uwagę użytkowników, co przekłada się na wyższe współczynniki klikalności (CTR). Gracze mogli nawet zagrać w mikrozestaw, na przykład strzelając do czegoś, lub rzucając piłkę w obręcz.
W 2010 roku firma Apple przekonała świat o zaletach przejścia na HTML5, a dzięki gigantom, w tym Google'owi, technologia Flash szybko się zmniejszyła.
Firmy zajmujące się technologiami reklamowymi widzą ogromny potencjał wzrostu w telefonii komórkowej, a zatem zaczęły wdrażać HTML5 w nową, wieloplatformową jednostkę reklamową. Ta jednostka nazywa się interaktywną reklamą HTML5, obsługiwaną przez nowe standardy branżowe, takie jak MRAID, MRAID2 i inne.
Krótka historia, interaktywna reklama HTML5, to reklama, która teraz działa na smartfonach, tabletach i przeglądarkach na komputery.
Więc co to jest reklama Carlsberga?
Tutaj jest link do wideo , pokazujący interaktywną reklamę działającą na iPhonie:
Celem tej interaktywnej reklamy jest podniesienie świadomości na temat World Rugby Sevens Tournament, corocznego turnieju rugby, który ma miejsce w Hongkongu. Najlepsze z najlepszych drużyn z całego świata rywalizują co roku o nagrodę główną. Carlsberg jest jednym z głównych sponsorów.
Reklama jest prosta. Użytkownicy widzą świecącą butelkę piwa Carlsberg. Wiadomość prosi użytkownika, aby dotknął świecącego butli.
Po stuknięciu w nią, krótka animacja odtwarza gracza rugby niosącego zimne, mrożone wiadro z piwami Carlsberga.
Pojawia się zabawne hasło marki: "Czy jesteś gotowy na piwo"?
Użytkownicy mogą następnie kliknąć link "Znajdź nas na Facebooku", aby przejść na stronę reklamodawcy, aby uzyskać więcej informacji.
Powrót do naszego regularnego programowania
Interaktywna reklama HTML5 składa się z 5 głównych elementów:
- index.html (główny punkt wejścia)
- main.js (javascript zawierający logikę)
- main.css (arkusz stylów CSS)
- zasoby (zasoby wizualne)
- link wychodzący (w którym reklama powinna kierować użytkowników)
Zacznijmy budować reklamę ...
Część 1: index.html
Indeks.html składa się ze standardowych deklaracji HTML.
Zobacz pióro Carlsberg Interactive Ad Demo - index.html Ben Chong ( @marketjs ) na CodePen .
Liczy się meta viewport i link do main.css i main.js
Jak widać, jest to dość proste. Nic niezwykłego.
Część 2: main.js (The Meat And Bones)
Main.js to plik JavaScript, który steruje całą interakcją z reklamą.
Zobacz pióro Carlsberg Interactive Ad Demo - main.js Ben Chong ( @marketjs ) na CodePen .
Na górze wstawiamy cały miniony JS JQuery. Zauważ, że możesz użyć najnowszej wersji jQuery http://jquery.com/
jQuery będzie pomocny w większości technik manipulacji DOM, z których korzystamy.
Następnie tworzymy prostą funkcję wstępnego ładowania obrazu.
Wstępnie ładujemy grono zasobów graficznych powiązanych z reklamą.
A teraz przejdźmy do logiki. Po załadowaniu reklamy zauważysz, że tworzymy 2 elementy div o nazwie scene1 i scene2 .
scene1 zawiera div rozświetlonej butelki. Po kliknięciu przechodzi do sceny 2 za pomocą funkcji gotoScene2
Sam scen2 zawiera tagline div, który po kliknięciu przekierowuje na stronę Facebooka w Carlsbergu.
To w zasadzie to. Potrzebna jest bardzo prosta logika.
Część 3: main.css (The Stylesheet)
Plik main.css zawiera wszystkie style związane z CSS.
Zobacz pióro Interaktywna reklama Carlsberg - main.css Ben Chong ( @marketjs ) na CodePen .
W tym przykładzie zrobiliśmy kilka fajnych animacji widzianych przez CSS
Na przykład świecąca butelka piwa wykorzystuje wartość migacza z właściwości -webkit-animation
Dodajemy również kilka standardowych algorytmów, które użytkownicy lubią, np. BounceIn i bounceOut
Część 4: Wizualne aktywa
Reklamy interaktywne wymagają zabawnych elementów wizualnych związanych z marką. W związku z tym wskazane jest, aby współpracować z projektantem przy interaktywnych reklamach HTML5.
W naszym przypadku użyliśmy: Pustego zielonego tła; Butelka; Tło z rugby trzymającym zimne lodowe wiadro piw; Wezwanie do działania grafiki.
Część 5: Wezwanie do działania (CTA)
Jest to najważniejsza część każdej interaktywnej reklamy. Wezwanie do działania musi być tak zaprojektowane, aby użytkownicy faktycznie chcieli kliknąć, aby dowiedzieć się więcej.
Musi to być przekonujący komunikat, który wiąże się z ciekawością użytkownika.
Podsumowanie
Mamy nadzieję, że ten artykuł przyda się społeczności. Jak widać, ta interaktywna reklama jest naprawdę łatwa do zbudowania i zajmuje nie więcej niż 10 minut.
Kliknij tutaj aby pobrać pliki projektu i kod źródłowy.