整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML5 營銷:三種玩法+案例

          段時間小編發(fā)現(xiàn),HTML5似乎滿足了廣告主對移動營銷的大部分需求,從形式到功用、到傳播,有人觀望,更有人已搶了鮮,在2014年HTML5營銷案例也層出不窮。大到可口可樂、維多利亞的秘密這種敢于嘗鮮的大牌,小到知乎推出的一本新書,各種品牌和產(chǎn)品都在嘗試利用HTML5進行營銷。那么H5到底可以怎么玩?讓我們一起來看看吧。

          主題派

          主題傳播永遠是品牌的重要傳播訴求,但無論是新聞稿還是軟文拿到社交媒體上來,與其他形式紛繁的訊息進行PK,總是感覺弱弱的,這個時候HTML5就可以華麗麗出場了。在原有專題的基礎(chǔ)上,加之互動以及其他適配小屏幕的素材,一個聲情并茂的HTML5主題就可以制作完成。可以預(yù)期的是,將有越來越多的媒體和企業(yè)會采用此種形式推介某個主題或是亮點。可口可樂已先行使用HTML5形式傳播品牌主題:如用一條紅線重現(xiàn)一個品牌經(jīng)歷的歲月,在簡潔的線條世界里,可口可樂描繪了一段歷史,整個時間軸隨著用戶向上滑動頁面“繪制”而成。“我們在乎”——可口可樂中國可持續(xù)發(fā)展報告,一份枯燥的報告也可以變身輕盈,適應(yīng)移動端觀看及分享的需求,以更活潑的形式在朋友圈被熱轉(zhuǎn)。

          案例鏈接:騰訊大會邀請函

          2014年11月8日,騰訊就在世人面前高調(diào)地玩了一把科技感。在WE大會現(xiàn)場中,不但有唯美的星空畫風和首頁由遠及近的宇宙效果,還增加了指紋識別的科技互動元素。最重要的是游戲規(guī)則:將應(yīng)用邀請發(fā)給好友,300秒之內(nèi),雙方在各自手機上同時按下指紋,驗明正身后獲得邀請碼。這種手機端接連現(xiàn)場的技術(shù)十分搶眼,可以讓與會者享受到被重視的禮遇,還有瞬間通電的感覺。這款邀請函不只是實現(xiàn)了人機互動,更是實現(xiàn)了雙屏互動,運用了一次社群思維。

          游戲派

          愛玩是人類的天性,好游戲吸引用戶參與沒有問題,但當游戲遇上營銷,就難免生死未卜了,弄不好就破壞了游戲體驗,引火上身。像《圍住神經(jīng)貓》只是因為接入了廣告文字鏈,就結(jié)束了一款游戲絢爛而又短暫的生命,于朋友圈銷聲匿跡。

          所以想要利用游戲進行營銷一定要做到謹慎、巧妙。目前HTML5游戲營銷主要是兩種形式,一種是品牌推出游戲,游戲依附于品牌,一般為知名品牌;另一種為游戲先行,產(chǎn)品藏匿于游戲之中,這種則是一些新產(chǎn)品或是新品牌。像杜蕾斯、維多利亞的秘密就屬于前者,推出符合品牌特點的一些小游戲,將品牌與游戲進行深度融合,如將經(jīng)典游戲中的元素換為品牌標識或是產(chǎn)品,使用戶在玩游戲的過程中加深對品牌的認知。而《財務(wù)包子鋪》則是后者的典型代表,成為HTML5小游戲中的一匹黑馬。

          案例鏈接:《財務(wù)包子鋪》背后的那本書

          測試一下自己的創(chuàng)業(yè)成功指數(shù)?在這個人人吵著要創(chuàng)業(yè)的年代,大多數(shù)人都會對這個測試躍躍欲試吧,心里想著:我的創(chuàng)業(yè)天賦可不能就此埋沒。于是由知乎制作的小游戲《財務(wù)包子鋪》在微信朋友圈里迅速流傳,玩家以創(chuàng)業(yè)老板的身份,對自己的包子鋪的日常經(jīng)營做出決策。聽上去沒什么特別,但游戲中專門設(shè)置了機制,比如用戶如果決策失誤,就會收到破產(chǎn)警告,需要選擇一本救命書——就是知乎要借此推廣的《金錢有術(shù)》。續(xù)命之后可以繼續(xù)游戲,讓玩家對新書留下初步印象,又不會中斷游戲。游戲上線三天后,《金錢有術(shù)》這本書成為亞馬遜圖書銷售總榜冠軍,同時還是預(yù)售冠軍、新書冠軍、經(jīng)濟類冠軍,僅在游戲里點擊“購買秘籍”這一選項的獨立用戶數(shù)就有55萬。怎么樣,設(shè)計得如此天衣無縫,就算有人知道是“軟游戲”了,但還是愿意為這本書買單。

          活動派

          有粉絲的地方就有活動,社交媒體風行后,品牌活動大規(guī)模轉(zhuǎn)移到微博、微信上來,真實的社交關(guān)系鏈,對于有獎活動來說是最好的人氣資源。相對于微博上的關(guān)注和轉(zhuǎn)發(fā)有禮,以及微信朋友圈轉(zhuǎn)發(fā)集贊等,使用HTML5開發(fā)出的有獎互動活動形式會更新穎和多變,同時也可以發(fā)揮HTML5的多項營銷優(yōu)勢,如互動性強,在活動中開發(fā)出各種與用戶的互動形式;功用性好,獎品對于用戶來說就是最實際的刺激和誘惑;傳播性廣,獨樂樂不如眾樂樂,發(fā)現(xiàn)了既好玩又有獎品拿的好事,當然要好朋友一起分享。

          案例鏈接:索尼七夕送“小青心”

          在2014年七夕期間,索尼就用HTML5開發(fā)了活動頁面,強力推出一款新品——清新范兒十足的小青心索尼C3手機。在活動期間,只要關(guān)注索尼Xperia官方微信進入游戲,將在頁面“邂逅”專屬幸運四葉草,分享活動到微信朋友圈,邀請4位好友幫助拆開禮盒,點亮小青心幸運四葉草,即可獲得抽獎資格,索尼為此一共準備了77臺小青心索尼C3智能手機。七夕是年輕人的節(jié)日,整個活動將小青心標簽與七夕相結(jié)合,踩準節(jié)日營銷的時間點,同時環(huán)節(jié)中設(shè)置需要4位好友幫助,也使社交傳播鏈得到了幾何式鋪開。

          功能派

          在前文中已經(jīng)提到,想用戶之所想才能夠有效“黏住”用戶,使得HTML5營銷得到轉(zhuǎn)化,不論什么時候,只要實用,總會有人點擊、有人轉(zhuǎn)發(fā),這也是HTML5營銷最需要的推動力。在功能性HTML5開發(fā)方面,百度可謂屢試不爽,如先后推出iBreath智呼吸、手機告全體主人書、北京地鐵計算器等產(chǎn)品,這幾款產(chǎn)品無一不是戳中了用戶的“痛點”:健康、手機使用、地鐵漲價,這都是實實在在的需求點。以手機告全體主人書為例,你是否已經(jīng)看夠了那些枯燥的文字敘述,也厭煩了毫無新意的小互動,這組頁面幾乎每頁都根據(jù)要表現(xiàn)的內(nèi)容增加了趣味十足的動畫效果,將說明書變成了“動畫片”。

          案例鏈接:百度iBreath智呼吸

          這款HTML5的slogan為:人呼出的氣體和指紋一樣獨一無二。此語一出,就讓人對自己的呼吸充滿了好奇,具體操作也很簡單:手機水平放好,然后深呼吸,對著手機下方吹氣。幾秒鐘之后,通過大數(shù)據(jù)分析,你的健康值就會被測算出來,會列出用戶的呼吸氣體成分詳細數(shù)據(jù),還會分析出用戶的健康情況,如肺部感染癥狀以及相應(yīng)的健康改善建議等等。

          更多精彩內(nèi)容,請關(guān)注互聯(lián)網(wǎng)分析沙龍微信:techxue 每天為您推送最新、最熱干貨!

          互聯(lián)網(wǎng)分析沙龍——互聯(lián)網(wǎng)人的實戰(zhàn)分享平臺,一個為您提供專業(yè)的商業(yè)模式、產(chǎn)品、數(shù)據(jù)、用戶、電子商務(wù)、社會化媒體、移動互聯(lián)網(wǎng)等深度分析的信息網(wǎng)站!請在微信公眾賬號中搜索「techxue」,或用手機掃描左方二維碼,即可獲得互聯(lián)網(wǎng)分析沙龍每日精華內(nèi)容推送和最優(yōu)搜索體驗,并參與編輯活動。

          tml5公司官網(wǎng)發(fā)展時間軸動畫特效

          html5鼠標移動特效,帶logo的psd修改文件,可做官網(wǎng)、引導(dǎo)頁、時間軸特效

          演示地址:http://www.17sucai.com/pins/demoshow/22898

          html5 css3在線留言表單美化代碼

          html5 css3留言表單代碼。表單美化。

          演示地址:http://www.17sucai.com/pins/demoshow/22929

          html5 slider響應(yīng)式圖片輪播插件

          html5 slider圖片輪播,響應(yīng)式圖片切換

          演示地址:http://www.17sucai.com/pins/demoshow/20626

          lt;!DOCTYPE HTML>

          <html>

          <head>

          <meta charset="utf-8">

          <title>H5混合開發(fā)(runoob.com)</title>

          <style type="text/css">

          #div1{width:350px;height:70px;padding:10px;border:1pxsolid#aaaaaa;}

          </style>

          <script>

          function allowDrop(ev)

          {

          ev.preventDefault();

          }

          function drag(ev)

          {

          ev.dataTransfer.setData("Text",ev.target.id);

          }

          function drop(ev)

          {

          ev.preventDefault();

          var data=ev.dataTransfer.getData("Text");

          ev.target.appendChild(document.getElementById(data));

          }

          </script>

          </head>

          <body>

          <p>拖動 RUNOOB.COM 圖片到矩形框中:</p>

          <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

          <br>

          <img id="drag1" src="img/logo.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

          </body>

          </html>

          它看上去也許有些復(fù)雜,不過我們可以分別研究拖放事件的不同部分。


          設(shè)置元素為可拖放

          首先,為了使元素可拖動,把 draggable 屬性設(shè)置為 true :

          <img draggable="true">


          拖動什么 - ondragstart 和 setData()

          然后,規(guī)定當元素被拖動時,會發(fā)生什么。

          在上面的例子中,ondragstart 屬性調(diào)用了一個函數(shù),drag(event),它規(guī)定了被拖動的數(shù)據(jù)。

          dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值:

          function drag(ev)

          {

          ev.dataTransfer.setData("Text",ev.target.id);

          }

          在這個例子中,數(shù)據(jù)類型是 "Text",值是可拖動元素的 id ("drag1")。


          放到何處 - ondragover

          ondragover 事件規(guī)定在何處放置被拖動的數(shù)據(jù)。

          默認地,無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置,我們必須阻止對元素的默認處理方式。

          這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法:

          event.preventDefault()


          進行放置 - ondrop

          當放置被拖數(shù)據(jù)時,會發(fā)生 drop 事件。

          在上面的例子中,ondrop 屬性調(diào)用了一個函數(shù),drop(event):

          function drop(ev)

          {

          ev.preventDefault();

          var data=ev.dataTransfer.getData("Text");

          ev.target.appendChild(document.getElementById(data));

          }

          代碼解釋:

          • 調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認處理(drop 事件的默認行為是以鏈接形式打開)

          • 通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。

          • 被拖數(shù)據(jù)是被拖元素的 id ("drag1")

          • 把被拖元素追加到放置元素(目標元素)中


          主站蜘蛛池模板: 国产A∨国片精品一区二区| 久久精品黄AA片一区二区三区| 丝袜无码一区二区三区| 亚洲AV无码一区二区三区人| 亚洲日本中文字幕一区二区三区 | 国产免费伦精品一区二区三区| 亚洲一区中文字幕在线电影网| 色欲AV无码一区二区三区| 中字幕一区二区三区乱码| 亚洲综合一区二区| 人体内射精一区二区三区| 国产剧情国产精品一区| 中文字幕一区二区三区日韩精品 | 日本免费电影一区二区| 国产免费播放一区二区| 久久综合精品国产一区二区三区| 国产一区二区三区国产精品| 中文字幕日韩欧美一区二区三区| 国产精品一区二区不卡| 亚洲欧美日韩国产精品一区| 亚洲日韩国产欧美一区二区三区 | 国产乱码精品一区二区三区麻豆| 国产精品揄拍一区二区久久| 亚欧免费视频一区二区三区| 韩国一区二区视频| 亚洲国产精品综合一区在线| 亚洲狠狠狠一区二区三区| 毛片一区二区三区| 精品国产一区二区三区| 日韩一区二区三区不卡视频| 后入内射国产一区二区| 无码人妻精品一区二区蜜桃百度| 一区二区免费国产在线观看| 国产精品女同一区二区久久 | 97人妻无码一区二区精品免费| 国产99久久精品一区二区| 日本国产一区二区三区在线观看 | 中文字幕日韩一区二区三区不卡| 国产精品亚洲一区二区三区在线| 亚洲一区二区三区日本久久九| 精品不卡一区二区|