10 Dakikada Etkileşimli HTML5 Reklamı Nasıl Oluşturulur?
Flash'ın düşmesiyle, etkileşimli reklamlar için sorumluluk HTML5'e aktarıldı. Burada, yalnızca 10 dakikada etkileşimli bir HTML5 reklamı oluşturmayı öğreniyoruz.
Bugün etkileşimli bir HTML5 banner reklamının nasıl oluşturulacağını göstermek istiyoruz.
Bu yaptığımız bir projeydi. Carlsberg Bir süre önce, ön uç tasarım çalışmaları ile ilgilenen tasarımcılar ve programcılar için yararlı olabileceğini düşündük.
Carlsberg, dünya çapında 40.000'den fazla kişinin çalıştığı, milyar dolarlık, küresel bir bira markasıdır. Evdeki Carlsberg markasının yanı sıra, Tuborg, Somersby (elma şarabı), Kronenbourg ve Dali Beer (Asya'da hızla büyüyen bir marka) gibi diğer markaları da barındırıyorlar.
İnteraktif Reklam Nedir?
Hızlı bir özet yapalım. Eski günlerde, reklamverenin sayfasının, ürününün veya hizmetinin bağlantısı olan kısa bir metin bulanıklığı olan metin reklamlar oluşturduk.
Daha sonra statik banner reklamlar geldi. Bunlar tipik olarak statik görüntülerdir. Metin reklamları daha çekicidir, çünkü resimler bin kelimeye bedeldir. Ana formatlar 300 × 250 piksel (kutu), 728 × 90 (geniş) veya 90 × 728 (gökdelen) olarak gelir.
Ardından, masaüstü tarayıcıda birlikte Flash teknolojisi oyunu. Flash devrimciydi, çünkü hareketli banner reklamlarının yanı sıra etkileşimli olanlar da bir dalga oluşturdu. Animasyonlu reklamlar, kullanıcı ilgisini daha yüksek tıklama oranlarına (TO) neden olacak şekilde büyülüyor. Oyuncular, bir şeye ateş eden bir mikro oyun oynayabilir veya çember içine bir top attırabilir.
2010 yılında Apple, HTML5'e geçme erdemlerini dünyaya ikna etti ve Google'ın da dahil olduğu devler de dahil olmak üzere, Flash teknolojisi hızla azaldı.
Reklam teknolojisi şirketleri, mobildeki devasa büyüme potansiyelini görüyor ve dolayısıyla HTML5'i yeni, çapraz platform reklam birimine uygulamaya başladı. Bu birime, MRAID, MRAID2 ve benzeri gibi yeni endüstri standartları tarafından desteklenen HTML5 etkileşimli reklam denir.
Kısa bir hikaye olan etkileşimli bir HTML5 reklamı, artık akıllı telefonlar, tabletler ve masaüstü tarayıcılarda çalışan bir reklamdır.
Peki bu Carlsberg hakkında ne var?
İşte bir videoya bağlantı , bir iPhone üzerinde çalışan etkileşimli reklamı gösterme:
Bu etkileşimli reklamın amacı, Hong Kong'da gerçekleşen yıllık bir rugby olayı olan Dünya Rugby Sevens Tournament'in farkındalığını artırmaktır. Dünyanın dört bir yanındaki en iyi takımların en iyisi, en yüksek ödülü kazanmak için her yıl yarışıyor. Carlsberg, ana sponsorlardan biridir.
Reklam deneyimi basit. Kullanıcılar parlayan Carlsberg bira şişesini görüyor. Bir mesaj, kullanıcının parlayan şişeye dokunmasını ister.
Üzerine basıldığında, soğuk, buzlu bir kova Carlsberg bira taşıyan bir rugby oyuncunun kısa bir canlandırma oyunu.
Eğlenceli bir marka sloganı ortaya çıkıyor: “Bira hazır mısınız”?
Daha sonra kullanıcılar daha fazla bilgi için reklamverenin sayfasını ziyaret etmek için 'Bizi Facebook'ta bulun' bağlantısını tıklayabilir.
Düzenli Programlamaya Dön
Etkileşimli bir HTML5 reklamı 5 ana öğeden oluşur:
- index.html (ana giriş noktası)
- main.js (mantığı içeren javascript)
- main.css (CSS stil sayfası)
- varlıklar (görsel varlıklar)
- giden bağlantı (reklamın kullanıcıları alması gereken)
Reklamı oluşturmaya başlayalım…
Bölüm 1: index.html
İndex.html standart HTML bildirimlerinden oluşur.
Kalemi görmek Carlsberg Etkileşimli Reklam Demo - index.html Ben Chong tarafından @marketjs ) CodePen .
Burada önemli olan, meta viewport ve main.css ve main.js ile olan bağlantıdır.
Gördüğünüz gibi oldukça basit. Sıradışı bir şey yok.
Bölüm 2: main.js (Et ve Kemikler)
Main.js, reklamla tüm etkileşimi yönlendiren bir Javascript dosyasıdır.
Kalemi görmek Carlsberg Etkileşimli Reklam Demo - main.js Ben Chong tarafından @marketjs ) CodePen .
Üstte, jQuery'nin tamamlanmış JS'sini ekliyoruz. JQuery’nin son sürümünü kullanabilirsiniz. http://jquery.com/
jQuery, kullandığımız DOM manipülasyon tekniklerinin çoğu için yararlı olacaktır.
Ardından, basit bir görüntü tabanlı önyükleme işlevi oluşturuyoruz.
Reklamla ilgili bir grup grafik varlıkları önceden yüklüyoruz.
Şimdi, mantığa. Reklam yüklendiğinde, scene1 ve scene2 olarak adlandırılan 2 div oluşturduğumuzu fark edeceksiniz .
scene1, parlayan şişenin div'sini içerir. Tıklandığında, gotoScene2 işleviyle scene2'ye geçiş yapar.
scene2'nin kendisi, dokunduğunda Carlsberg'in Facebook sayfasına yönlendiren tagline div'ini içerir.
Bu temelde. Çok basit bir mantık gerekiyor.
Bölüm 3: main.css (Stil Sayfası)
Main.css dosyası tüm CSS ile ilgili stilleri içerir.
Kalemi görmek Carlsberg Etkileşimli Reklam Demo - main.css Ben Chong tarafından @marketjs ) CodePen .
Bu örnekte, CSS ile gördüğünüz harika animasyonlardan bazılarını gerçekleştirdik
Örneğin, parlayan bira şişesi, -webkit-animasyon özelliğinden göz kırpma değerini kullanır.
Ayrıca, kullanıcıların bounceIn ve bounceOut gibi sevme eğiliminde olduğu birkaç standart algoritma da ekliyoruz.
Bölüm 4: Görsel Varlıklar
Etkileşimli reklamlar, marka ile ilgili eğlenceli görseller gerektirir. Bu nedenle, etkileşimli HTML5 reklamlarında bir tasarımcıyla çalışmanız önerilir.
Bizim durumumuzda kullandık: Boş yeşil arka plan; Şişe; Biraların soğuk bir buz kovası tutan rugby adamla arka plan; Harekete geçirme grafikleri çağrısı.
Bölüm 5: Harekete Geçirici Mesaj (CTA)
Bu, herhangi bir etkileşimli reklamın en önemli kısımlarıdır. Harekete geçirici mesaj, kullanıcıların daha fazla bilgi edinmek için tıklamak istedikleri iyi tasarlanmış olmalıdır.
Kullanıcının merakına bağlı olan zorlayıcı bir mesaj olmalı.
özet
Bu makalenin topluluk için yararlı olduğunu umuyoruz. Gördüğünüz gibi, bu etkileşimli reklamın oluşturulması gerçekten çok kolay ve kendinizi bir araya getirmek 10 dakikadan fazla sürmez.
Buraya TIKLAYIN proje dosyalarını ve kaynak kodunu indirmek için