第一篇：基于用戶差異的Feed廣告?zhèn)鞑ツＪ?——以微信朋友圈廣告為例

3140103591

傳播學(xué)概論期中論文

課程教師：邵培仁、李東曉

學(xué)生：廣告學(xué)1401 邱凌峰

基于用戶差異的Feed廣告?zhèn)鞑ツＪ?/p>

——以微信朋友圈廣告為例

摘要：在受眾個性化愈發(fā)明顯，媒介競爭越發(fā)激烈的新媒體時代，簡單的點對面的廣告?zhèn)鞑ツＪ揭呀?jīng)不再適用。2015年春節(jié)前夕，微信朋友圈成了新的廣告投放平臺，與傳統(tǒng)的微信公眾號里的廣告不同，微信朋友圈的廣告投放是根據(jù)廣告主的要求進行選擇性投放，不同用戶看到的廣告不同，是一種廣泛意義上的精準廣告。本文從傳播學(xué)的角度，分析這種基于用戶差異的廣告?zhèn)鞑ツＪ降奶攸c和存在的問題以及問題的解決方案。關(guān)鍵詞：微信朋友圈廣告受眾

一、事件回顧

關(guān)于廣告將亮相朋友圈的傳言在2015年1月初就開始盛傳，對此騰訊方面始終沒有出面否認，而微信的用戶也未對此消息表現(xiàn)出明顯的抵觸。2015年1月21日晚，所有微信用戶的微信朋友圈里都出現(xiàn)了一位名叫“微信團體”的好友，他發(fā)了一條如下圖所示的朋友圈。“它無孔不入，它無處可藏……”，它是什么？點擊微信團隊給出的鏈接，得出的答案是“廣告，也可以生活的一部分。我們試圖，做些改變”。

微信團隊以這樣一種煽情的形式預(yù)告著，微信方面放棄了原本“高冷”的形象，開始以廣告這樣的方式獲得盈利。

1月25日，廣告正式在朋友圈登場，首先登場的是寶馬中國、vivo手機和可口可樂的廣告。微信朋友圈的廣告和以往的廣告模式有所不同，有的用戶收到的是vivo手機的廣告，有的是可口可樂的廣告，而有的用戶則收到了寶馬中國的廣告。3月初，用戶的朋友圈又被周迅夫婦英菲尼迪的廣告刷屏了——和上一次一樣，并不是所有用戶都刷到了這條推廣微信。8月20日，當情侶們忙著秀恩愛，單身狗忙著吐槽時，微信朋友圈廣告正式在微信官方網(wǎng)站中上線，并公布了合作流程。廣告主只要在微信朋友圈廣告平臺中自主申請，通過審核后就可以在朋友圈中推送廣告了。到目前為止，聯(lián)合利華、凱迪拉克等世界500強公司都在微信朋友圈中推送了廣告。

二、基于用戶差異的朋友圈廣告?zhèn)鞑ツＪ?/p>

微信朋友圈的廣告不同于以往公眾號推送的文章底部那些簡單粗暴的廣告植入，而是通過對受眾行為進行信息采集、加以個性化分析，將目標受眾分類，當產(chǎn)品或服務(wù)需要投放廣告時，按照目標受眾的分析結(jié)果，將與受眾需求特征相匹配的廣告信息投放給受眾，并按照實際效果付費。因此才會出現(xiàn)“你刷著英菲尼迪的廣告，我的朋友圈里卻是福特翼虎”的現(xiàn)象。這種廣告?zhèn)鞑ツＪ绞且环NFeed流廣告，F(xiàn)eed流廣告是穿插于發(fā)布的消息中的一種廣告，它主要有兩個特點，一個是融合在社交網(wǎng)站的信息中，而不是以懸浮窗等形式出現(xiàn)，對用戶體驗造成的負面影響較少；另一個特點是廣告是根據(jù)性別、年齡、愛好、地理位置等一些用戶標簽進行精準匹配，以減少廣告費用的浪費。最早進行Feed廣告投放的是Twitter，現(xiàn)在在Facebook等國外社交網(wǎng)站上，F(xiàn)eed廣告收入已成為網(wǎng)站的重要收入來源。Feed廣告將程序化購買與互動程度高的社交平臺結(jié)合在一起，具有投用戶所好、可分享、可評論等特點，這些特點決定其以一種十分自然的方式融入到用戶好友狀態(tài)中，有很高的觸達率。信息流廣告的計算是一個動態(tài)過程，不僅要考慮向用戶發(fā)送什么廣告，還要決定在什么時候發(fā)送廣告1。

三、微信朋友圈Feed廣告?zhèn)鞑ツＪ降奶攸c

依托手機移動端和互聯(lián)網(wǎng)的新媒體的興起改變了以報紙、電視等大眾媒體為主要傳播媒介的傳統(tǒng)廣告?zhèn)鞑ツＪ健Ｐ旅襟w環(huán)境下的廣告?zhèn)鞑ツＪ皆趥鞑サ幕有浴⑹鼙姷牡匚缓蛡鞑バЧ确矫娑及l(fā)生了變化。1.傳播的互動性增強

新媒體時代的廣告?zhèn)鞑ツＪ绞且环N同步的互動傳播。在企業(yè)推送的微信朋友圈廣告中，用戶不僅可以點贊、評論，還可以看到自己的好友在該條推送下的評論。傳統(tǒng)的大眾傳播媒介上的廣告只是廣告主對用戶的單向傳播，廣告主在投放廣告后只能在經(jīng)過一段時間的市場測算之后才能了解廣告的效果。而且傳統(tǒng)的大眾媒介廣告需要經(jīng)過報紙、電視、廣播等媒介的把關(guān)才能向大眾傳遞信息，難以直接地、點對點地面對消費者。因此大眾傳播中的反饋有間接性、集中性、延遲性的特點。而Feed廣告模式是雙向的、即時的，這有利于廣告主及時了解用戶對產(chǎn)品和廣告的評價，還可以讓用戶之間間相互交流，增強了傳播的互動性。2.受眾的地位改變

在新媒體時代的廣告?zhèn)鞑ブ校鼙姷牡匚挥辛孙@著的改變，這種改變表現(xiàn)在受眾地位的提高以及傳者和受眾地位的互易。

就受眾在空間上分布、存在的態(tài)勢上看，受眾的特點主要表現(xiàn)為：眾多性、混雜性、分散性和隱匿性2。因此傳統(tǒng)的大眾傳播媒介在進行廣告?zhèn)鞑サ倪^程中，受眾的人數(shù)極大、成分極為復(fù)雜，而由于技術(shù)、地域等方面的限制，受眾被視為無差異的群體。而Feed廣告模式是基于用戶差異的，用戶收到的廣告是根據(jù)性別、年齡、愛好、地理位置等一些用戶標簽進行匹配的。受眾由同質(zhì)化的大眾群體向異質(zhì)化的小眾個體分裂。受眾的裂變使得大眾化的受眾群體消失，受眾以個體集群方式出現(xiàn)3。受眾不再是被動的接受者，廣告主要花更多心思在思考如何讓用戶接收到與自己需求更匹配的信息上，而不僅僅是如何擴大受眾的數(shù)量。除了異質(zhì)化，用戶地位的提高還體現(xiàn)在受眾具有了一定的選擇權(quán)。在微信朋友圈的廣告中，每一條推送的右上角都有一個推廣的下拉菜單，用戶可以選擇屏蔽廣告拒不接受。選擇權(quán)是受眾的基本權(quán)利之一，F(xiàn)eed廣告可以選擇屏蔽的機制尊重了用戶的選擇權(quán)，而允許用戶評論則是對于用戶表達權(quán)的尊重，較為有效地提高了用戶的使用體驗和滿意度。

除了受眾地位的提高，傳者和受眾地位的互易也是受眾地位改變的表現(xiàn)。微信朋友圈廣告給用戶帶來了新鮮感和表達欲。在今年1月25日微信朋友圈的第一波廣告推送中，部分收到寶馬廣告的用戶有截圖發(fā)朋友圈、QQ空間和微博等社交網(wǎng)站“秀”的行為。而有的廣 12謝園、周偉婷、周瑞華.智取朋友圈[J].成功營銷，2015（2）邵培仁.傳播學(xué)[M].高等教育出版社，2007（277）3張幼斌.新媒體對廣告?zhèn)鞑ツＪ降挠绊慬J].現(xiàn)代廣告，2011（7）告因為文案創(chuàng)意精妙也在社交網(wǎng)站上廣為流傳，使得更多的人看到。這實際上是一種二次傳播甚至多級傳播的行為，受眾在多次傳播之后成為新的信息源，不再僅僅是信息的接收者。而收到受眾反饋的廣告主也不再是單純的傳者，變成了新的受者。處于這種Feed廣告模式下的個體，是具有傳播者和受眾雙重身份的人。3.信息的有效到達率

截止今年9月30日的騰訊2015年第三季度業(yè)績報告，微信和WeChat合并后月活躍用戶量達到了6.5億，同比再漲39％。自從2014年底用戶活躍量突破5億以來，微信正在以每個季度新增5000萬用戶的節(jié)奏穩(wěn)步增長，也許今年底就超過7億了4。微信朋友圈的Feed廣告就是建立在微信的用戶行為數(shù)據(jù)庫的基礎(chǔ)上的。而一般的微信公眾號推文中的底部廣告的接受者只有微信公眾號的關(guān)注者，但是這些關(guān)注著并非都是廣告主的預(yù)期受眾和潛在客戶。再者，目前為止，微信公眾號的注冊數(shù)量高達1600萬，每個公眾號的關(guān)注人數(shù)是有限的，因此廣告可以到達的實際受眾范圍也是有限的。與之相比，F(xiàn)eed廣告的投放范圍更加廣；基于海量微信用戶數(shù)據(jù)的積累和整理分類，投放更加精準，這種傳播模式更有針對性和目的性。

廣告?zhèn)鞑バЧ暮饬恳恢笔抢_廣告主的問題。傳統(tǒng)廣告效果的衡量以廣告的到達率為主，而對于到達后客戶對廣告的反饋則難以得知。Feed廣告的優(yōu)勢在于反饋互動的即時性，廣告主可以看到用戶對于廣告的直接反應(yīng)，并借助高超的信息技術(shù)對廣告鏈接的點擊、點贊進行量化測量。

較為精準的受眾定位和較為完善的傳播效果評價方式使得廣告?zhèn)鞑サ挠行源蟠筇岣撸沟脧V告主能夠高效、準確地進行廣告投放和產(chǎn)品開發(fā)。

四、Feed廣告現(xiàn)有傳播模式存在的問題及解決方法

微信朋友圈的廣告在今年年初才正式進入到公眾的視野中，F(xiàn)eed廣告的傳播模式也是近幾年才在國內(nèi)的新媒體上流行起來，因此這種較為新興的廣告?zhèn)鞑ツＪ竭€存在著一些影響其傳播效果的地方。1.優(yōu)化受眾的選擇權(quán)

受眾的選擇權(quán)是一種最基本的權(quán)利。在傳統(tǒng)的大眾傳播中，由于技術(shù)的限制，受眾不能自主選擇是否接受媒介傳遞的信息，而微信朋友圈的廣告提供了屏蔽廣告的可能性。但是，朋友圈廣告以好友發(fā)布消息的形式嵌入在朋友圈里，極具隱蔽性，受眾經(jīng)常在閱讀完了廣告之后才反應(yīng)過來。

4數(shù)據(jù)來自網(wǎng)易新聞http://digi.163.com/15/1110/19/B836SMGU00162OUT.html 從上圖我們可以看出，朋友圈的廣告右上角有一個名為“推廣”的按鈕，下拉可以選擇屏蔽廣告。但是由于這個菜單不夠顯眼，許多用戶表示并不知道這個按鈕下屏蔽功能。除此之外，還有用戶吐槽“即便可以選擇屏蔽廣告，我們也已經(jīng)看過了第一條廣告了”。可見，在Feed廣告中，用戶雖然具有了一定的選擇權(quán)，但這種選擇權(quán)并沒有得到很好的利用。

微信方面應(yīng)該依據(jù)用戶數(shù)據(jù)模型，給予用戶信息篩選權(quán)，讓用戶自主選擇，這樣才能避免廣告對用戶體驗造成的負面影響。2．提高受眾對廣告的心理接受度

一直以來，微信以高冷的形象示人，此番朋友圈廣告試水雖然沒有遭到用戶的嚴重抵制，但用戶還是產(chǎn)生了一定的抵觸情緒。一開始受眾對于接受到寶馬、凱迪拉克等豪車廣告還津津樂道，時間長了就不再有新奇感，甚至會產(chǎn)生厭惡情緒。傳統(tǒng)的電視、廣播傳播是典型的單向傳播，受眾只能在有限的頻道中被動接收信息。而Feed廣告屬于精準廣告模式，所依附的媒體是以網(wǎng)絡(luò)信息為基礎(chǔ)，廣告存在交互性和自主性，受眾的個性特征也更鮮明5，因此用戶對于帶有一些強迫性質(zhì)的廣告心理接受度低于對于傳統(tǒng)大眾媒體中廣告的接受度。

除此之外，微信朋友圈廣告可能讓受眾有隱私權(quán)遭到侵犯的感覺。朋友圈廣告的投放是利用受眾行為數(shù)據(jù)來進行分析的，這些數(shù)據(jù)包括用戶的地理位置、年齡性別等注冊信息，還包括用戶關(guān)注的公眾號、發(fā)布的朋友圈等給用戶打上標簽的信息。基于強大數(shù)據(jù)庫的Feed廣告是建立在受眾個人信息的商業(yè)利用基礎(chǔ)上的，讓受眾認為私人空間和生活受到侵犯。

可見，F(xiàn)eed廣告在提高用戶的心理接受度這一路上還有很長的路要走。根據(jù)滿足需要論，受眾對于媒介產(chǎn)品的消毒是為了滿足個人化、經(jīng)驗化的需要，因此廣告的內(nèi)容和形式應(yīng)該滿足受眾的需求，將受眾的心理和情感融入到廣告制作的過程中。Feed廣告中受眾是信息的“譯碼者”，為了使接受者的譯碼部分能夠符合傳播者想傳達的意義，廣告的形式要新穎有趣，以激發(fā)受眾的創(chuàng)造力和創(chuàng)新欲，成為理性的“譯碼者”。3.加強受眾匹配的精準性

盡管朋友圈的廣告推送是基于用戶數(shù)據(jù)分析的，但在受眾需求的匹配上還有些差強人意。下圖是一些關(guān)于朋友圈廣告受眾不匹配的吐槽：

6可以看出，受眾對于廣告的需求匹配度是不太滿意的，那么，廣告主和微信方面在進行廣告投放時，投放的維度有哪些？迅雷產(chǎn)品總監(jiān)蘭軍利用自己的公眾號進行調(diào)查和SPSS數(shù)據(jù)分析，得出了關(guān)于1月25號的第一波朋友圈廣告投放準則的猜想：三個廣告的投放，并無基于大數(shù)據(jù)的精準推薦；機型是這次廣告投放的重要條件；城市或許是這次投放的標準之一。

所以，朋友圈的Feed廣告是一種對目標受眾進行了市場細分的廣告模式，但距離完全 56鄧瑛.精準廣告的傳播模式與策略研究[D].湖南大學(xué)碩士論文，2008（29）圖片來自網(wǎng)絡(luò)http://news.mydrivers.com/1/400/400237.htm 意義上的精準廣告還有差距。為了提高信息匹配的精準度，微信方面應(yīng)該強化數(shù)據(jù)庫管理，建立信息比較完善的消費者數(shù)據(jù)庫，對潛在受眾的實際數(shù)據(jù)進行具體的分析和動態(tài)觀察，在確保數(shù)據(jù)庫真實性的同時，提高對受眾行為數(shù)據(jù)的技術(shù)分析和語義分析能力7。當然，在對受眾數(shù)據(jù)進行管理時，要執(zhí)行嚴格的隱私保護措施，保護好受眾的隱私權(quán)和人身財產(chǎn)方面的安全。

五、總結(jié)

Feed廣告模式是新媒體環(huán)境下的新興廣告?zhèn)鞑シ绞剑哂辛己玫陌l(fā)展前景。盡管還存在管理不規(guī)范、匹配度較低等問題，但隨著信息技術(shù)的發(fā)展和廣告人思維的完善，這種傳播模式在未來的廣告?zhèn)鞑ブ袑加袠O大地比重。隨著越來越多的傳播新形式的出現(xiàn)，傳播學(xué)的學(xué)科理論也會不斷地完善，從而推著傳播事業(yè)的前進。

【參考文獻】

1.鄧瑛.精準廣告的傳播模式與策略研究[D].湖南大學(xué)碩士論文.2008 2.張幼斌.新媒體對廣告?zhèn)鞑ツＪ降挠绊慬J].現(xiàn)代廣告，2011 3.邵培仁.傳播學(xué)[M].高等教育出版社，2007

7鄧瑛.精準廣告的傳播模式與策略研究[D].湖南大學(xué)碩士論文.2008（29）

第二篇：微信朋友圈廣告方案審核

上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

視覺交互規(guī)范

文案要求

? ? ? ? 文案文字不超過40字

文案風格建議: 朋友親切的口吻，簡約而不簡單 文字中不能有URL，不要特殊字符 文案與圖片關(guān)聯(lián)，與詳情頁關(guān)聯(lián)

圖片要求

? ? ? ? ? 圖片建議數(shù)量：1張(單張大小要求300KB以下)圖片內(nèi)容與文案、詳情頁關(guān)聯(lián)

為了使外層圖片展示最大化，我們建議采用以下三個尺寸進行設(shè)計：800*640像素（5:4）、640*800像素（4:5）、800*800像素（1:1），為在了保證在朋友圈的顯示效果，規(guī)范如下：

o 這個區(qū)域要有比較完整的圖像

o 區(qū)域內(nèi)盡量不放文字，放的話不超過兩行

o 文字及l(fā)ogo等元素不放在方形區(qū)域的邊緣以免被裁切 上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

分享規(guī)范

? ? ? ? ? A描述建議 20 字以內(nèi)

C標題建議 14 個字以內(nèi)

E-圖片尺寸為120*120像素，大小建議10KB左右

詳情頁通用規(guī)范 上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

? ? ? ?

? ? 允許用戶分享廣告詳情頁，但不得有誘導(dǎo)分享、誘導(dǎo)關(guān)注等頁面提示內(nèi)容；

使用用戶關(guān)系鏈進行的互動分享，需要注意分享邏輯的完整性；

詳情頁如使用背景音樂，則必須支持音樂可循環(huán)及可關(guān)閉（關(guān)閉按鈕采用模版樣式），并采用漸強（音樂逐漸變大）的方式出現(xiàn)；

詳情頁如使用視頻文件，需先上傳至騰訊視頻。廣告詳情頁僅支持使用騰訊視頻的視頻內(nèi)容；如視頻總長度超過1分鐘，需要再底部加上“建議在WIFI下加載播放”提示；

對頁面的加載時間進行監(jiān)控，加載耗時過長時，給予用戶友好的提示；

非 WIFI 環(huán)境下時的提示建議：復(fù)雜交互頁面若流量消耗會很大時，建議對用戶進行友好的提示，可能會消耗較多流量；

詳情頁支持形式

? ? ? ? ? ? √ 品牌活動

√ 微信小店

√ 微信表情

APP 下載（后續(xù)支持

× H5 小游戲（后續(xù)支持）

非 WIFI 環(huán)境下時的提示建議：復(fù)雜交互頁面若流量消耗會很大時，建議對用戶進行友好的提示，可能會消耗較多流量；

詳情頁實現(xiàn)

? ? 詳情頁交互簡潔，重點展示圖片創(chuàng)意，可以考慮在【微信公眾號-朋友圈推廣-詳情頁管理】根據(jù)模板生成詳情頁。參考模板詳情頁規(guī)范

交互形式個性化，互動元素豐富，需自行開發(fā)自定義詳情頁。為了提高開發(fā)效率，建議按照微信廣告“自定義詳情頁前端工作流”，使用“自定義詳情頁前端通用庫”，保證詳情頁符合技術(shù)規(guī)范

模版詳情頁規(guī)范

圖片要求

? ? 頁面數(shù)量：1~2頁

頁面內(nèi)容建議簡潔有力，不得有誘導(dǎo)分享、誘導(dǎo)關(guān)注等頁面提示內(nèi)容。上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

? ? 圖片尺寸640*1100像素。為了保證各類機型下詳情頁能正常展現(xiàn)，建議頁面上面部分640*1100像素作為詳情頁的“主體內(nèi)容”，承載主要創(chuàng)意。

點此下載視頻雙頁模版PSD文件

上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

音樂規(guī)范

? ? ? 詳情頁如使用背景音樂，則必須支持音樂可循環(huán)及可關(guān)閉，并采用漸強（音樂逐漸變大）的方式出現(xiàn)；

音樂播放/關(guān)閉按鈕，必須參照規(guī)范，并放置于頁面右上角位置，詳細參考下圖。

點此下載音樂iconPSD文件。

上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

自定義詳情頁技術(shù)規(guī)范

兼容目標

? ? 主流移動設(shè)備：iPad 2+，iPhone 4+，三星、魅族、華為、紅米、小米1S 以上及主流 Android 千元機型；

操作系統(tǒng)：iOS 7.0+ 與 Android 4.0+；

加載速度、請求數(shù)與資源壓縮

? ? ? ? ? 以 3G 網(wǎng)絡(luò)環(huán)境 100kb/s 的網(wǎng)絡(luò)速度計算，詳情頁首次加載過程中，可以在 2s 內(nèi)看到 Loading 頁面；

原則上頁面中不超過 1 個的樣式文件請求、2 個的腳本文件網(wǎng)絡(luò)請求；

圖片資源應(yīng)當進行壓縮，JPG 圖片使用 80% 以下質(zhì)量，PNG 圖片使用 TinyPNG 進行壓縮；

詳情頁平均單頁資源不超過 300 KB，總資源包大小不超過頁數(shù)乘以300KB（不包括視頻資源）；

應(yīng)當對小圖片進行 CSS 雪碧圖 合并，因低版本系統(tǒng)及低端設(shè)備渲染問題，單張圖片尺寸不超過 2000*2000 像素，超過時需切分成多張雪碧圖；

資源文件格式標準 文件類格式 似

背景音mp3 樂

分享縮jpg 略圖

大小

其它備注

小于 80

開頭和結(jié)尾音軌建議做使用淡入淡出處理

KB

小于 6

尺寸為 120*120 像素

KB

視頻文暫無要分辨率>=960*540像素，視頻碼率>=1500KBps，mov/mp4/avi 件 求 畫面比例 4:3或16:9

資源部署

? ? ? ? 詳情頁應(yīng)只包含靜態(tài)文件資源，涉及數(shù)據(jù)交互使用 AJAX 進行數(shù)據(jù)提交；

詳情頁所有資源上線前將部署到騰訊服務(wù)器；

不允許在頁面中添加非騰訊域名的資源；

若頁面中包括視頻，自行上傳視頻至騰訊視頻服務(wù)器，告知視頻地址； 上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

自測與提測申請

? ? ?-至少提前 5 個工作日 提供到微信側(cè)；

提交微信團隊測試前，請做好自測，并填寫自測列表（下載自測列表）；

微信廣告測試團隊將會進行全面測試，發(fā)現(xiàn)問題后反饋給廣告客戶進行優(yōu)化修復(fù)，直至詳情頁質(zhì)量符合要求；

提測申請及部署申請郵件內(nèi)容 內(nèi)容 要求

基本信息 公眾號名稱、微信號、AppID、原始ID 需求文檔 包括功能點列表和說明，產(chǎn)品流程圖

修改說明 非首次提交時，需要詳細說明本次提測修復(fù)的缺陷以及修復(fù)方案 自測報告 報告需包含主流移動設(shè)備、主流操作系統(tǒng)中的測試情況，以及填寫好的自測列表

源代碼壓以 ZIP 格式壓縮（不得包含空文縮包 件，.svn/.git/.DS_Store/Thumbs.db/.log 等系統(tǒng)文件）。廣告詳情若使用了微信授權(quán)登錄，為方便測試，提供無需微信登錄也可進行測頁地址 試的地址

自定義詳情頁前端工作流

WxMoment-Workflow 是由微信朋友圈廣告團隊基于 Gulp 面向廣告詳情頁開發(fā)者提供的工作流。工作流集成了詳情頁開發(fā)中的常見任務(wù)，可以簡化開發(fā)工作，并在打包環(huán)節(jié)對資源進行壓縮合并優(yōu)化。

工作流包含了批處理文件，Windows 用戶可直接雙擊執(zhí)行。Mac 用戶可以執(zhí)行相應(yīng)的命令。

下載安裝

前往 NodeJS 官網(wǎng) 下載安裝包并按指南安裝 NodeJS，下載最新的 工作流壓縮包 并解壓。

雙擊工作流目錄中的 安裝.bat 文件即可開始安裝依賴，或者執(zhí)行命令： 上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

$ cd WxMoment-Workflow $ npm install gulp-g--registry=https://r.cnpmjs.org $ npm install--registry=https://r.cnpmjs.org 目錄說明

所有的開發(fā)都在 src 目錄下進行，你只需要按約定好的放置相應(yīng)文件，并按自己的項目需求編寫代碼即可。

├── package.json├── tasks //工作流任務(wù)配置（一般不需要修改）└── 20150514-promo-vivo //示例項目，項目目錄

├──.tmtworkflowrc //工作流的項目配置文件（一般不需要修改）

├── gulpfile.js //工作流的任務(wù)配置文件（一般不需要修改）└── src //源文件目錄，所有的開發(fā)在此目錄下進行

├── css //樣式表目錄，使用 Less，只有 style-*.less 的文件名會被編譯

│

└── style-promo.less

├── html //HTML目錄

│

└── index.html

├── img //圖片目錄

└── slice //雪碧圖目錄，此目錄下的圖片會進行合并，同名的 @2x 圖片會被識別并進行合并

創(chuàng)建項目

從 20150514-promo-vivo 復(fù)制一個文件夾，重命名為自己的項目。

命名規(guī)則：YYYYMMDD-promo-品牌名稱。

YYYYMMDD 為 4 位年份，2 位月份，2 位日期數(shù)字組成，品牌名稱為全小寫英文字母。

任務(wù)介紹

開發(fā)任務(wù)

執(zhí)行 開發(fā).bat 開始執(zhí)行任務(wù)，或執(zhí)行命令： $ cd WxMoment-Workflow/project $ gulp build_dev 此任務(wù)將啟動一個 HTTP Server，并自動在瀏覽器打開 //localhost:8080/html/index.html 這樣的地址。打包任務(wù) 上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

開發(fā)完成后，執(zhí)行 打包.bat，或執(zhí)行命令： $ cd WxMoment-Workflow/project $ gulp zip 此任務(wù)將在項目目錄下生成一個壓縮包，壓縮包以項目名命名。

更多功能介紹

JavaScript合并

在 HTML 中，使用注釋的方式前面包含起來即可。

以上代碼，在打包的時候，會將 kalok.js 與 main.js 合并壓縮為 lib.js，并替換 html 中的引用。

自定義詳情頁前端通用庫

WxMoment 是由微信朋友圈廣告團隊面向廣告詳情頁開發(fā)者提供的一個

JavaScript 庫。通過使用 WxMoment，開發(fā)者可以簡單的實現(xiàn)詳情頁中的常見功能，例如：微信分享、橫屏提示、網(wǎng)頁統(tǒng)計等。

前往 Github 查看 WxMoment Example。

引用腳本

當前版本：0.0.2 最后更新：2015-05-29 最新的腳本地址及文件將會在 Github 庫 中更新。

數(shù)據(jù)統(tǒng)計

開發(fā)者使用數(shù)據(jù)統(tǒng)計功能前，請與商務(wù)團隊提前確認統(tǒng)計監(jiān)測點及統(tǒng)計的項目別名（例如：20150504WXMOMENT）

注意：網(wǎng)頁統(tǒng)計需要部署到騰訊服務(wù)器才可正常上報統(tǒng)計數(shù)據(jù) var wa = new WxMoment.Analytics({ //projectName 請與微信商務(wù)團隊確認 projectName: “20150504WXMOMENT” });支持自定義事件統(tǒng)計，例如預(yù)約按鈕的點擊事件、視頻的播放事件等。$('#button01').click(function(){ //兩個必填參數(shù)，分別為: 事件分類、事件名稱 wa.sendEvent('click', 'button01');});橫屏提示

若不支持橫屏或橫屏下體驗不佳，請?zhí)砑訖M屏提示。new WxMoment.OrientationTip();資源預(yù)加載

當圖片較多時，對于頁面的打開速度和后續(xù)的體驗都非常影響，所以，我們通常讓資源提前加載，即有一個 loading 的過程，當資源加載好以后再進入實際頁面。var basePath = “//wximg.gtimg.com/some/path/”

var loader = new WxMoment.Loader();

//聲明資源文件列表

var fileList = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png'];上海零趣網(wǎng)絡(luò)科技：社會化媒體、新媒體整合營銷傳播領(lǐng)導(dǎo)品牌

for(var i = 0;i < fileList.length;i++){ loader.addImage(basePath + fileList[i]);}

//進度監(jiān)聽

loader.addProgressListener(function(e){ var percent = Math.round((e.completedCount / e.totalCount)* 100);console.log(“當前加載了”, percent, “%”);//在這里做 Loading 頁面中百分比的顯示 });

//加載完成

loader.addCompletionListener(function(){ //可以在這里隱藏 Loading 頁面開始進入主內(nèi)容頁面 });

//啟動加載

loader.start();滑屏組件