微信朋友圈廣告方案審核

1、上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌視覺交互規(guī)范文案要求文案文字不超過40 字文案風(fēng)格建議 : 朋友親切的口吻，簡(jiǎn)約而不簡(jiǎn)單文字中不能有URL ，不要特殊字符文案與圖片關(guān)聯(lián)，與詳情頁關(guān)聯(lián)圖片要求圖片建議數(shù)量： 1 張 (單張大小要求300KB 以下 )圖片內(nèi)容與文案、詳情頁關(guān)聯(lián)為了使外層圖片展示最大化，我們建議采用以下三個(gè)尺寸進(jìn)行設(shè)計(jì)：800*640 像素5:4 ）、 640*800 像素（ 4:5）、 800*800 像素（ 1:1），為在了保證在朋友圈的顯示效果，規(guī)范如下：這個(gè)區(qū)域要有比較完整的圖像區(qū)域內(nèi)盡量不放文字，放的話不超過兩行o文字及 logo 等元素不放在方形

2、區(qū)域的邊緣以免被裁切上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌分享規(guī)范A - 標(biāo)題建議以朋友親切的口吻（14 個(gè)字以內(nèi)）B - 描述建議20 字以內(nèi)C - 圖片尺寸為120*120 像素，大小建議10KB 左右D - 標(biāo)題建議14 個(gè)字以內(nèi)E - 圖片尺寸為120*120 像素，大小建議10KB 左右詳情頁通用規(guī)范上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌允許用戶分享廣告詳情頁，但不得有誘導(dǎo)分享、誘導(dǎo)關(guān)注等頁面提示內(nèi)容；使用用戶關(guān)系鏈進(jìn)行的互動(dòng)分享，需要注意分享邏輯的完整性；詳情頁如使用背景音樂， 則必須支持音樂可循環(huán)及可關(guān)閉 （關(guān)閉按鈕采用模版樣式） ，并采用漸強(qiáng)

3、（音樂逐漸變大）的方式出現(xiàn)；詳情頁如使用視頻文件，需先上傳至騰訊視頻。廣告詳情頁僅支持使用騰訊視頻的視頻內(nèi)容；如視頻總長(zhǎng)度超過 1 分鐘，需要再底部加上 “建議在 WIFI 下加載播放 ” 提示；對(duì)頁面的加載時(shí)間進(jìn)行監(jiān)控，加載耗時(shí)過長(zhǎng)時(shí)，給予用戶友好的提示；非 WIFI 環(huán)境下時(shí)的提示建議：復(fù)雜交互頁面若流量消耗會(huì)很大時(shí)，建議對(duì)用戶進(jìn)行友好的提示，可能會(huì)消耗較多流量；詳情頁支持形式 品牌活動(dòng) 微信小店 微信表情APP 下載（后續(xù)支持H5 小游戲（后續(xù)支持）非 WIFI 環(huán)境下時(shí)的提示建議：復(fù)雜交互頁面若流量消耗會(huì)很大時(shí)，建議對(duì)用戶進(jìn)行友好的提示，可能會(huì)消耗較多流量；詳情頁實(shí)現(xiàn)詳情頁交互簡(jiǎn)潔，重

4、點(diǎn)展示圖片創(chuàng)意，可以考慮在【微信公眾號(hào)-朋友圈推廣 -詳情頁管理】根據(jù)模板生成詳情頁。參考模板詳情頁規(guī)范交互形式個(gè)性化，互動(dòng)元素豐富，需自行開發(fā)自定義詳情頁。為了提高開發(fā)效率，建議按照微信廣告 “自定義詳情頁前端工作流 ”，使用 “自定義詳情頁前端通用庫 ”，保證詳情頁符合技術(shù)規(guī)范模版詳情頁規(guī)范圖片要求頁面數(shù)量： 12 頁頁面內(nèi)容建議簡(jiǎn)潔有力，不得有誘導(dǎo)分享、誘導(dǎo)關(guān)注等頁面提示內(nèi)容。上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌圖片尺寸640*1100 像素。為了保證各類機(jī)型下詳情頁能正常展現(xiàn)，建議頁面上面部分 640*1100 像素作為詳情頁的 “主體內(nèi)容 ”，承載主要?jiǎng)?chuàng)意。點(diǎn)此下

5、載視頻雙頁模版 PSD 文件上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌音樂規(guī)范詳情頁如使用背景音樂，則必須支持音樂可循環(huán)及可關(guān)閉，并采用漸強(qiáng)（音樂逐漸變大）的方式出現(xiàn)；音樂播放 /關(guān)閉按鈕，必須參照規(guī)范，并放置于頁面右上角位置，詳細(xì)參考下圖。點(diǎn)此下載音樂iconPSD 文件。上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌自定義詳情頁技術(shù)規(guī)范兼容目標(biāo)主流移動(dòng)設(shè)備：iPad 2+ ，iPhone 4+ ，三星、魅族、華為、紅米、小米1S 以上及主流 Android 千元機(jī)型；操作系統(tǒng)： iOS 7.0+ 與 Android 4.0+ ；加載速度、請(qǐng)求數(shù)與資源壓縮以 3G 網(wǎng)

6、絡(luò)環(huán)境 100kb/s的網(wǎng)絡(luò)速度計(jì)算，詳情頁首次加載過程中，可以在2s 內(nèi)看到 Loading 頁面；原則上頁面中不超過1 個(gè)的樣式文件請(qǐng)求、 2個(gè)的腳本文件網(wǎng)絡(luò)請(qǐng)求；圖片資源應(yīng)當(dāng)進(jìn)行壓縮，JPG 圖片使用 80%以下質(zhì)量， PNG 圖片使用TinyPNG進(jìn)行壓縮；詳情頁平均單頁資源不超過300 KB ，總資源包大小不超過頁數(shù)乘以300KB （不包括視頻資源）；應(yīng)當(dāng)對(duì)小圖片進(jìn)行CSS 雪碧圖 合并，因低版本系統(tǒng)及低端設(shè)備渲染問題，單張圖片尺寸不超過 2000*2000像素，超過時(shí)需切分成多張雪碧圖；資源文件格式標(biāo)準(zhǔn)文件類格式大小其它備注似背景音mp3小于 80開頭和結(jié)尾音軌建議做使用淡入淡出處

7、理樂KB分享縮jpg小于 6尺寸為 120*120 像素略圖KB視頻文mov/mp4/avi暫無要分辨率 =960*540 像素，視頻碼率 =1500KBps，件求畫面比例 4:3 或 16:9資源部署詳情頁應(yīng)只包含靜態(tài)文件資源，涉及數(shù)據(jù)交互使用AJAX進(jìn)行數(shù)據(jù)提交；詳情頁所有資源上線前將部署到騰訊服務(wù)器；不允許在頁面中添加非騰訊域名的資源；若頁面中包括視頻，自行上傳視頻至騰訊視頻服務(wù)器，告知視頻地址；上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌自測(cè)與提測(cè)申請(qǐng)-至少提前5 個(gè)工作日提供到微信側(cè)；提交微信團(tuán)隊(duì)測(cè)試前，請(qǐng)做好自測(cè)，并填寫自測(cè)列表（下載自測(cè)列表）；微信廣告測(cè)試團(tuán)隊(duì)將會(huì)進(jìn)行

8、全面測(cè)試，發(fā)現(xiàn)問題后反饋給廣告客戶進(jìn)行優(yōu)化修復(fù)，直至詳情頁質(zhì)量符合要求；提測(cè)申請(qǐng)及部署申請(qǐng)郵件內(nèi)容內(nèi)容要求基本信息公眾號(hào)名稱、微信號(hào)、 AppID、原始 ID需求文檔包括功能點(diǎn)列表和說明，產(chǎn)品流程圖修改說明 非首次提交時(shí)，需要詳細(xì)說明本次提測(cè)修復(fù)的缺陷以及修復(fù)方案自測(cè)報(bào)告報(bào)告需包含主流移動(dòng)設(shè)備、主流操作系統(tǒng)中的測(cè)試情況，以及填寫好的自測(cè)列表源代碼壓 以 ZIP 格式壓縮（不得包含空文縮包件， .svn/.git/.DS_Store/Thumbs.db/.log等系統(tǒng)文件）。廣告詳情若使用了微信授權(quán)登錄，為方便測(cè)試，提供無需微信登錄也可進(jìn)行測(cè)頁地址試的地址自定義詳情頁前端工作流WxMoment-

9、Workflow 是由微信朋友圈廣告團(tuán)隊(duì)基于 Gulp 面向廣告詳情頁開發(fā)者提供的工作流。工作流集成了詳情頁開發(fā)中的常見任務(wù)， 可以簡(jiǎn)化開發(fā)工作，并在打包環(huán)節(jié)對(duì)資源進(jìn)行壓縮合并優(yōu)化。工作流包含了批處理文件， Windows 用戶可直接雙擊執(zhí)行。 Mac 用戶可以執(zhí)行相應(yīng)的命令。下載安裝前往 NodeJS 官網(wǎng) 下載安裝包并按指南安裝 NodeJS，下載最新的 工作流壓縮包 并解壓。雙擊工作流目錄中的安裝 .bat文件即可開始安裝依賴，或者執(zhí)行命令：上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌$ cd WxMoment-Workflow目錄說明所有的開發(fā)都在 src 目錄下進(jìn)行，你只

10、需要按約定好的放置相應(yīng)文件，并按自己的項(xiàng)目需求編寫代碼即可。 package.json tasks/工作流任務(wù)配置（一般不需要修改） 20150514-promo-vivo/示例項(xiàng)目，項(xiàng)目目錄 .tmtworkflowrc/工作流的項(xiàng)目配置文件（一般不需要修改） gulpfile.js/工作流的任務(wù)配置文件（一般不需要修改） src/ 源文件目錄，所有的開發(fā)在此目錄下進(jìn)行 css/ 樣式表目錄，使用 Less ，只有 style-*.less的文件名會(huì)被編譯 style-promo.less html/HTML 目錄 index.html img/ 圖片目錄 slice/雪碧圖目錄，此目錄下的

11、圖片會(huì)進(jìn)行合并，同名的2x 圖片會(huì)被識(shí)別并進(jìn)行合并創(chuàng)建項(xiàng)目從20150514-promo-vivo復(fù)制一個(gè)文件夾，重命名為自己的項(xiàng)目。命名規(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ù)將啟動(dòng)一個(gè)HTTP Server，并自動(dòng)在瀏覽器打開/localhost:8080/html/index.html這樣的地址。打包任務(wù)上海零趣網(wǎng)絡(luò)科技：社會(huì)化

12、媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌開發(fā)完成后，執(zhí)行打包 .bat，或執(zhí)行命令：$ cd WxMoment-Workflow/project$ gulp zip此任務(wù)將在項(xiàng)目目錄下生成一個(gè)壓縮包，壓縮包以項(xiàng)目名命名。更多功能介紹JavaScript合并在 HTML中，使用注釋的方式前面包含起來即可。以上代碼，在打包的時(shí)候，會(huì)將 kalok.js 與 main.js 合并壓縮為 lib.js，并替換 html 中的引用。自定義詳情頁前端通用庫WxMoment 是由微信朋友圈廣告團(tuán)隊(duì)面向廣告詳情頁開發(fā)者提供的一個(gè) JavaScript 庫。通過使用 WxMoment ，開發(fā)者可以簡(jiǎn)單的實(shí)現(xiàn)詳情頁中的常

13、見功能，例如：微信分享、橫屏提示、網(wǎng)頁統(tǒng)計(jì)等。前往 Github 查看 WxMoment Example。引用腳本當(dāng)前版本：最后更新： 2015-05-29script上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌最新的腳本地址及文件將會(huì)在Github 庫 中更新。數(shù)據(jù)統(tǒng)計(jì)開發(fā)者使用數(shù)據(jù)統(tǒng)計(jì)功能前， 請(qǐng)與商務(wù)團(tuán)隊(duì)提前確認(rèn)統(tǒng)計(jì)監(jiān)測(cè)點(diǎn)及統(tǒng)計(jì)的項(xiàng)目別名（例如： 20150504WXMOMENT ）注意：網(wǎng)頁統(tǒng)計(jì)需要部署到騰訊服務(wù)器才可正常上報(bào)統(tǒng)計(jì)數(shù)據(jù)var wa = new WxMoment.Analytics(/projectName請(qǐng)與微信商務(wù)團(tuán)隊(duì)確認(rèn)projectName: 2015

14、0504WXMOMENT);支持自定義事件統(tǒng)計(jì)，例如預(yù)約按鈕的點(diǎn)擊事件、視頻的播放事件等。$(#button01).click(function()兩個(gè)必填參數(shù)，分別為 : 事件分類、事件名稱 wa.sendEvent(click, button01););橫屏提示若不支持橫屏或橫屏下體驗(yàn)不佳，請(qǐng)?zhí)砑訖M屏提示。new WxMoment.OrientationTip();資源預(yù)加載當(dāng)圖片較多時(shí)， 對(duì)于頁面的打開速度和后續(xù)的體驗(yàn)都非常影響， 所以，我們通常讓資源提前加載，即有一個(gè) loading 的過程，當(dāng)資源加載好以后再進(jìn)入實(shí)際頁面。var loader = new WxMoment.Loade

15、r();聲明資源文件列表var fileList = img/1.png, img/2.png, img/3.png, img/4.png;上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌for (var i = 0; i fileList.length; i+) loader.addImage(basePath + fileListi);進(jìn)度監(jiān)聽 loader.addProgressListener(function (e) var percent = Math.round(pletedCount / e.totalCount) * 100);console.log(當(dāng)前加載了 ,

16、percent, %);/在這里做 Loading頁面中百分比的顯示);加載完成 loader.addCompletionListener(function () 可以在這里隱藏 Loading 頁面開始進(jìn)入主內(nèi)容頁面);啟動(dòng)加載loader.start();滑屏組件html, body height: 100%;-webkit-box-sizing:border-box;box-sizing: border-box;overflow: hidden;.wrapwidth: 100%;height: 100%;overflow: hidden;.screenwidth: 100%;height

17、: 100%;overflow:hidden;-webkit-backface-visibility: hidden;-webkit-perspective: 1000; 上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌腳本調(diào)用var pageSlider = new WxMoment.PageSlider(pages: document.querySelectorAll(.screen);可用接口prev() /上一屏next() /下一屏moveTo(n) /跳轉(zhuǎn)到第 n屏，有緩動(dòng)效果moveTo(n, true) /直接跳到第 n屏，沒有緩動(dòng)效果微信分享新版 Weixin JS

18、SDK 的分享接口需要綁定域名，并通過 access_token 獲取jsapi_ticket，由于獲取 jsapi_ticket 的 API 調(diào)用次數(shù)非常有限，頻繁刷新 jsapi_ticket 會(huì)導(dǎo)致 API 調(diào)用受限，影響自身業(yè)務(wù)。詳情頁最終會(huì)部署到騰訊服務(wù)器域名下，允許繼續(xù)使用WeixinJSBridge 調(diào)用分享接口。注意：此微信分享實(shí)現(xiàn)方式要求部署到騰訊服務(wù)器后方可正常使用在 HEAD 中加入以下代碼 meta name=wxm:link在 JS 中初始化分享組件上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌var share = new WxMoment.Share()

19、;一些特定需求下，需要?jiǎng)討B(tài)修改分享的內(nèi)容，更多參數(shù)請(qǐng)查看exampleshare.set(appmessage, title, 使用 set函數(shù)重新設(shè)置標(biāo)題 );騰訊視頻在騰訊視頻上傳視頻后，可以獲取到這樣的視頻地址，其中b001672wkoe即視頻的vid 。代碼 var video = new WxMoment.Video(請(qǐng)聯(lián)系接口人確認(rèn)視頻清晰度已調(diào)至高清版本/如果要定制“播放按鈕”的樣式，請(qǐng)使用CSS和 .tvp_button_play即可覆蓋.tvp_overlay_playvid: a0016gys8ct, /視頻 vid取自視頻地址：設(shè)置視頻默認(rèn)縮略圖 oninited: fu

20、nction () 播放器在視頻載入完畢觸發(fā),onplaying: function () 播放器真正開始播放視頻第一幀畫面時(shí),onpause: function () /播放器觸發(fā)暫停時(shí)，目前只針對(duì)HTML5播放器有效,onresume: function () 暫停后繼續(xù)播放時(shí)觸發(fā),onallended: function () 播放器播放完畢時(shí),onfullscreen: function (isfull) /onfullscreen(isfull)播放器觸發(fā)全屏 / 非全屏?xí)r，參數(shù)isfull表上海零趣網(wǎng)絡(luò)科技：社會(huì)化媒體、新媒體整合營(yíng)銷傳播領(lǐng)導(dǎo)品牌示當(dāng)前是否是全屏);可以通過以下方式控制播放 / 暫停/video.getPlayer().play(); /video.getPlayer().pa