山里人家H5營(yíng)銷案例

山里人家成立于2015年，一直專注于陜南土蜂的養(yǎng)殖與土蜂蜜的供應(yīng)，山

里人家綠色生態(tài)園（淘寶企業(yè)店）是在淘寶端的官方網(wǎng)店，主營(yíng)陜南土蜂蜜及山

區(qū)特產(chǎn)，包括：土蜂蜜、老樹核桃、農(nóng)家香菇、西鄉(xiāng)茶葉等系列商品。小張是山

里人家的新媒體運(yùn)營(yíng)，為了更好地傳播網(wǎng)店中秋活動(dòng)信息，小張想利用H5進(jìn)行

營(yíng)銷，H5營(yíng)銷實(shí)施包括了前期策劃、頁(yè)面制作、頁(yè)面推廣三部分，小張也會(huì)從

這三方面入手實(shí)施本次H5營(yíng)銷。

一、前期策劃

1.確定主題

為吸引用戶關(guān)注，主題需突出產(chǎn)品特點(diǎn)的同時(shí)增加創(chuàng)意、避免抄襲，由于

H5是用來(lái)宣傳公司網(wǎng)店中秋活動(dòng)的，小張將H5的主題確定為“中秋好禮”來(lái)推

廣中秋節(jié)的活動(dòng)。

2.確定內(nèi)容

在確定內(nèi)容時(shí)主要從用戶角度考慮，通過(guò)圖文并茂的方式添加用戶互動(dòng)功能,

促使用戶點(diǎn)擊，提高粉絲活躍度和忠誠(chéng)度，根據(jù)本身產(chǎn)品定位以及受眾的特性設(shè)

計(jì)H5作品，在文案設(shè)計(jì)中抓住用戶心理，添加用戶感興趣的詞匯，同時(shí)可根據(jù)

用戶群的不同特點(diǎn)編寫標(biāo)題。

3.確定形式

H5的形式非常多樣，幻燈片式、小游戲、海報(bào)等各種形式，可以選擇最合

適的形式進(jìn)行營(yíng)銷。

4.傳播

目前比較常用的H5頁(yè)面推廣方式有公眾號(hào)的圖文群發(fā)推廣、微信群推廣、

線下二維碼推廣，以及KOL（意見(jiàn)領(lǐng)袖、微博達(dá)人）轉(zhuǎn)發(fā)和投稿等。

二、H5頁(yè)面制作

小張通過(guò)互聯(lián)網(wǎng)搜索得到許多H5制作的工具，如MAKA、易企秀、equb360

意派等。按照H5工具的自主定制空間及使用方式等可將H5工具分為以下三類,

完全自主定制（如epub360、vxplo互動(dòng)大師等）、自主定制類、非自主定制類,

不同類型有各自的優(yōu)缺點(diǎn)。完全自主定制和自主定制類的優(yōu)勢(shì)是完全自主定制，

可操作性強(qiáng)，劣勢(shì)在于功能較多，學(xué)習(xí)時(shí)間成本較大。非自主定制類的優(yōu)勢(shì)在于

操作簡(jiǎn)單、隨學(xué)隨用，劣勢(shì)為只能選擇使用，不能定制功能和交互效果。

經(jīng)過(guò)一番比較，小張選擇了易企秀這款目前國(guó)內(nèi)市面上使用最頻繁的，功能

上比較齊全H5微場(chǎng)景制作工具進(jìn)行中秋活動(dòng)H5頁(yè)面的制作。

通過(guò)互聯(lián)網(wǎng)搜索“易企秀”或者直接輸入網(wǎng)址（）進(jìn)入易企

秀官網(wǎng)。

秋節(jié)”找到了一款比較適合網(wǎng)店活動(dòng)的中秋H5模板。

推薦“一

進(jìn)入后臺(tái)編輯頁(yè)面，根據(jù)自己的需求制作H5頁(yè)面，可以通過(guò)調(diào)整H5頁(yè)面的

文案、圖片、特效、背景音樂(lè)或者添加組件、表單等方式創(chuàng)作企業(yè)所需的H5頁(yè)

面。

L基礎(chǔ)元素編輯

（1）文本：點(diǎn)擊制作頁(yè)面導(dǎo)航欄上的“文本”按鈕添加文本信息，使用編

輯器可以對(duì)添加的文本進(jìn)行字體、顏色、大小、方向、邊框、陰影等的更改或者

為文本信息添加動(dòng)畫效果，使文本信息更加生動(dòng)、美觀并與H5頁(yè)面保持統(tǒng)一。

（2）圖片：點(diǎn)擊制作頁(yè)面導(dǎo)航欄上的“圖片”按鈕添加圖片，可以直接使

用圖片庫(kù)中的圖片（有些需要收費(fèi)）或者上傳本地圖片進(jìn)行使用。對(duì)于添加的圖

片，可以利用編輯器進(jìn)行圖片翻轉(zhuǎn)、重力感應(yīng)開關(guān)，調(diào)整圖片大小、位置、邊框

樣式和陰影，在功能設(shè)置模塊還以對(duì)“點(diǎn)擊圖片”的效果進(jìn)行設(shè)置，包括有鏈接

（即點(diǎn)擊跳轉(zhuǎn)至鏈接網(wǎng)站）、頁(yè)面（點(diǎn)擊跳轉(zhuǎn)至H5的第X頁(yè)）、電話等。

正版圖片X

BB片庫(kù)線皇B9標(biāo)車通

我的陶英

我的上傳三陽(yáng)’《;，/

k3人

濤0

今夕公飛.7季。

領(lǐng)到】頁(yè)版

圖6-22H5制作頁(yè)面優(yōu)化圖片

（3）頁(yè)面背景：點(diǎn)擊制作頁(yè)面導(dǎo)航欄上的“背景”按鈕或者制作區(qū)右側(cè)快

捷菜單的方塊圖標(biāo)調(diào)整背景，可以直接使用圖片庫(kù)中的圖片（有些需要收費(fèi)）或

者上傳本地圖片進(jìn)行使用。

圖6-23H5制作頁(yè)面添加背景

（4）音樂(lè)：點(diǎn)擊制作頁(yè)面導(dǎo)航欄上的“音樂(lè)”按鈕或者制作區(qū)右側(cè)快捷菜

單的音符圖標(biāo)添加背景音樂(lè)，選擇音樂(lè)時(shí)也可以通左下角的“添加外鏈”輸入音

樂(lè)鏈接地址添加背景音樂(lè)。

圖6-24H5制作頁(yè)面添加背景音樂(lè)

2.互動(dòng)模塊

使用易企秀時(shí)，可以通過(guò)點(diǎn)擊制作頁(yè)面導(dǎo)航欄上的“組件”或者“表單”按

鈕選擇想要添加互動(dòng)模塊，如視頻、鏈接、電話、倒計(jì)時(shí)等組件，聯(lián)系人、輸入

框、提交按鈕、留言板、單選、多選、下拉列表等表單。

圖6-25H5制作頁(yè)面添加組件

（1）視頻

點(diǎn)擊“組件”下的視頻選項(xiàng)即可為當(dāng)前H5頁(yè)面添加視頻，添加視頻時(shí)要注

意粘貼的視頻代碼需要原視頻的通用代碼，目前優(yōu)酷、土豆、騰訊視頻在手機(jī)端

的體驗(yàn)較好，在選擇視頻時(shí)最好選擇此三類網(wǎng)站的視頻鏈接。添加好視頻鏈接后,

可以為視頻添加封面圖片，封面圖片可以通過(guò)圖片庫(kù)或者本地上傳獲得，完成后

可以利用編輯器對(duì)視頻播放窗口進(jìn)行背景顏色、大小、位置、邊框、陰影的調(diào)整

以及動(dòng)畫效果的添加。

.四大名助富萬(wàn)I

□?0?osyt

機(jī)看分享給好友1133評(píng)論24萬(wàn)播放

I分享到微博卜

把視頻貼到Blog或BBS怎么貼?手機(jī)掃碼分享視頻

二維碼24時(shí)內(nèi)有效

通用代碼:<iframeheight=498width=510src="http://p復(fù)制

flashitfeftt：/player.php/sid/XMTC復(fù)濤!|

html代碼:<embedsrc=*/player復(fù)制

已分享V土下載跚用手機(jī)看

復(fù)制Flash地址/TPout.sv

復(fù)制HTML代碼<embedsrc="http://static.video.qq

復(fù)制通用代碼一[

分享xz率1663條評(píng)論67.78萬(wàn)次播放

第一步,X

掃一掃，輕松分享貼到論壇或博客

（2）鏈接

點(diǎn)擊“組件”下的鏈接選項(xiàng)即可為當(dāng)前H5頁(yè)面添加鏈接，鏈接按鈕包括“點(diǎn)

我購(gòu)買”、“點(diǎn)開鏈接”、“馬上購(gòu)買”、“關(guān)注我們”和自定義圖片鏈接五種，鏈接

可以是跳轉(zhuǎn)到場(chǎng)景外的外部鏈接，也可以場(chǎng)景內(nèi)的內(nèi)部導(dǎo)航鏈接。

（3）留言板

點(diǎn)擊“表單”下留言板選項(xiàng)即可為當(dāng)前H5頁(yè)面添加留言板用以和用戶互動(dòng)，

留言板可以用來(lái)展示用戶的留言并引導(dǎo)用戶留言，成功添加留言板后可以利用編

輯器對(duì)留言板的配色風(fēng)格、按鈕文案、大小、位置等進(jìn)行調(diào)整。

3.特效

點(diǎn)擊制作頁(yè)面導(dǎo)航欄上的“特效”按鈕選擇想要添加的特效，添加的特效是

針對(duì)當(dāng)前頁(yè)面的頁(yè)面特效，會(huì)在設(shè)置界面展示，包括涂抹、指紋、環(huán)境、飄雪、

煙花、漸變、重力感應(yīng)、砸玻璃等特殊效果。

T1ass刀9o千rv

文本圖片背耳杳樂(lè)形狀擔(dān)件表單特效

4.H5頁(yè)面預(yù)覽和設(shè)置

H5頁(yè)面制作完成后可以通過(guò)右上角的“預(yù)覽和設(shè)置”按鈕預(yù)覽H5的呈現(xiàn)效

果，發(fā)現(xiàn)有不足的地方可以繼續(xù)編輯優(yōu)化，在設(shè)置頁(yè)面可以設(shè)置H5的標(biāo)題、描

述，微信分享時(shí)顯示的標(biāo)題、描述以及頁(yè)面翻頁(yè)方式等。

5.H5頁(yè)面發(fā)布

H5頁(yè)面制作完成后，點(diǎn)擊右上角的發(fā)布進(jìn)入發(fā)布頁(yè)面，在發(fā)布頁(yè)面可以獲

取H5的二維碼和地址鏈接用于推廣宣傳。

WUttitcmcs

三、H5頁(yè)面的投放推廣

H5頁(yè)面制作完成后，小張就考慮到了H5頁(yè)面推廣的問(wèn)題，經(jīng)過(guò)查閱書籍和

分析成功的H5營(yíng)銷案例，小張將H5頁(yè)面推廣渠道總結(jié)如下。

1.線上線下的結(jié)合推廣

線下活動(dòng)推廣，掃二維碼玩游戲送禮品，通過(guò)H5有趣的互動(dòng)可以引發(fā)粉絲

互動(dòng)轉(zhuǎn)發(fā)朋友圈、微博等。H5獨(dú)特價(jià)值在于除了具備傳播性以外，它通過(guò)用戶

的重復(fù)使用行為使得H