微信朋友圈广告方案审核.docx

微信朋友圈广告方案审核.docx

《微信朋友圈广告方案审核.docx》由会员分享，可在线阅读，更多相关《微信朋友圈广告方案审核.docx（13页珍藏版）》请在冰豆网上搜索。

微信朋友圈广告方案审核

视觉交互规范

文案要求

∙文案文字不超过40字

∙文案风格建议:

朋友亲切的口吻，简约而不简单

∙文字中不能有URL，不要特殊字符

∙文案与图片关联，与详情页关联

图片要求

∙图片建议数量：

1张（单张大小要求300KB以下）

∙图片内容与文案、详情页关联

∙为了使外层图片展示最大化，我们建议采用以下三个尺寸进行设计：

800*640像素（5:

4）、640*800像素（4:

5）、800*800像素（1:

1），

∙为在了保证在朋友圈的显示效果，规范如下：

∙

o这个区域要有比较完整的图像

o区域内尽量不放文字，放的话不超过两行

o文字及logo等元素不放在方形区域的边缘以免被裁切

分享规范

∙A-标题建议以朋友亲切的口吻（14个字以内）

∙B-描述建议20字以内

∙C-图片尺寸为120*120像素，大小建议10KB左右

∙D-标题建议14个字以内

∙E-图片尺寸为120*120像素，大小建议10KB左右

详情页通用规范

∙允许用户分享广告详情页，但不得有诱导分享、诱导关注等页面提示内容；

∙使用用户关系链进行的互动分享，需要注意分享逻辑的完整性；

∙详情页如使用背景音乐，则必须支持音乐可循环及可关闭（关闭按钮采用模版样式），并采用渐强（音乐逐渐变大）的方式出现；

∙详情页如使用视频文件，需先上传至腾讯视频。

广告详情页仅支持使用腾讯视频的视频内容；如视频总长度超过1分钟，需要再底部加上“建议在WIFI下加载播放”提示；

∙对页面的加载时间进行监控，加载耗时过长时，给予用户友好的提示；

∙非WIFI环境下时的提示建议：

复杂交互页面若流量消耗会很大时，建议对用户进行友好的提示，可能会消耗较多流量；

详情页支持形式

∙√品牌活动

∙√微信小店

∙√微信表情

∙APP下载（后续支持

∙×H5小游戏（后续支持）

∙非WIFI环境下时的提示建议：

复杂交互页面若流量消耗会很大时，建议对用户进行友好的提示，可能会消耗较多流量；

详情页实现

∙详情页交互简洁，重点展示图片创意，可以考虑在【微信公众号-朋友圈推广-详情页管理】根据模板生成详情页。

参考模板详情页规范

∙交互形式个性化，互动元素丰富，需自行开发自定义详情页。

为了提高开发效率，建议按照微信广告“自定义详情页前端工作流”，使用“自定义详情页前端通用库”，保证详情页符合技术规范

模版详情页规范

图片要求

∙页面数量：

1~2页

∙页面内容建议简洁有力，不得有诱导分享、诱导关注等页面提示内容。

∙图片尺寸640*1100像素。

为了保证各类机型下详情页能正常展现，建议页面上面部分640*1100像素作为详情页的“主体内容”，承载主要创意。

∙点此下载视频双页模版PSD文件

音乐规范

∙详情页如使用背景音乐，则必须支持音乐可循环及可关闭，并采用渐强（音乐逐渐变大）的方式出现；

∙音乐播放/关闭按钮，必须参照规范，并放置于页面右上角位置，详细参考下图。

∙点此下载音乐iconPSD文件。

自定义详情页技术规范

兼容目标

∙主流移动设备：

iPad2+，iPhone4+，三星、魅族、华为、红米、小米1S以上及主流Android千元机型；

∙操作系统：

iOS7.0+与Android4.0+；

加载速度、请求数与资源压缩

∙以3G网络环境100kb/s的网络速度计算，详情页首次加载过程中，可以在2s内看到Loading页面；

∙原则上页面中不超过1个的样式文件请求、2个的脚本文件网络请求；

∙图片资源应当进行压缩，JPG图片使用80%以下质量，PNG图片使用TinyPNG进行压缩；

∙详情页平均单页资源不超过300KB，总资源包大小不超过页数乘以300KB（不包括视频资源）；

∙应当对小图片进行CSS雪碧图合并，因低版本系统及低端设备渲染问题，单张图片尺寸不超过2000*2000像素，超过时需切分成多张雪碧图；

资源文件格式标准

文件类似

格式

大小

其它备注

背景音乐

mp3

小于80KB

开头和结尾音轨建议做使用淡入淡出处理

分享缩略图

jpg

小于6KB

尺寸为120*120像素

视频文件

mov/mp4/avi

暂无要求

分辨率>=960*540像素，视频码率>=1500KBps，画面比例4:

3或16:

9

资源部署

∙详情页应只包含静态文件资源，涉及数据交互使用AJAX进行数据提交；

∙详情页所有资源上线前将部署到腾讯服务器；

∙不允许在页面中添加非腾讯域名的资源；

∙若页面中包括视频，自行上传视频至腾讯视频服务器，告知视频地址；

自测与提测申请

∙至少提前5个工作日提供到微信侧；

∙提交微信团队测试前，请做好自测，并填写自测列表（下载自测列表）；

∙微信广告测试团队将会进行全面测试，发现问题后反馈给广告客户进行优化修复，直至详情页质量符合要求；

提测申请及部署申请邮件内容

内容

要求

基本信息

公众号名称、微信号、AppID、原始ID

需求文档

包括功能点列表和说明，产品流程图

修改说明

非首次提交时，需要详细说明本次提测修复的缺陷以及修复方案

自测报告

报告需包含主流移动设备、主流操作系统中的测试情况，以及填写好的自测列表

源代码压缩包

以ZIP格式压缩（不得包含空文件，.svn/.git/.DS_Store/Thumbs.db/.log等系统文件）。

广告详情页地址

若使用了微信授权登录，为方便测试，提供无需微信登录也可进行测试的地址

自定义详情页前端工作流

WxMoment-Workflow是由微信朋友圈广告团队基于Gulp面向广告详情页开发者提供的工作流。

工作流集成了详情页开发中的常见任务，可以简化开发工作，并在打包环节对资源进行压缩合并优化。

工作流包含了批处理文件，Windows用户可直接双击执行。

Mac用户可以执行相应的命令。

下载安装

前往NodeJS官网下载安装包并按指南安装NodeJS，下载最新的工作流压缩包并解压。

双击工作流目录中的安装.bat文件即可开始安装依赖，或者执行命令：

$cdWxMoment-Workflow

$npminstallgulp-g--registry=pmjs.org

$npminstall--registry=pmjs.org

目录说明

所有的开发都在src目录下进行，你只需要按约定好的放置相应文件，并按自己的项目需求编写代码即可。

├──package.json

├──tasks//工作流任务配置（一般不需要修改）

└──20150514-promo-vivo//示例项目，项目目录

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

  ├──gulpfile.js//工作流的任务配置文件（一般不需要修改）

└──src//源文件目录，所有的开发在此目录下进行

  ├──css//样式表目录，使用Less，只有style-*.less的文件名会被编译

  │  └──style-promo.less

  ├──html//HTML目录

  │  └──index.html

  ├──img//图片目录

  └──slice//雪碧图目录，此目录下的图片会进行合并，同名的@2x图片会被识别并进行合并

创建项目

从20150514-promo-vivo复制一个文件夹，重命名为自己的项目。

命名规则：

YYYYMMDD-promo-品牌名称。

YYYYMMDD为4位年份，2位月份，2位日期数字组成，品牌名称为全小写英文字母。

任务介绍

开发任务

执行开发.bat开始执行任务，或执行命令：

$cdWxMoment-Workflow/project

$gulpbuild_dev

此任务将启动一个HTTPServer，并自动在浏览器打开//localhost:

8080/html/index.html这样的地址。

打包任务

开发完成后，执行打包.bat，或执行命令：

$cdWxMoment-Workflow/project

$gulpzip

此任务将在项目目录下生成一个压缩包，压缩包以项目名命名。

更多功能介绍

JavaScript合并

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

--build:

js../js/lib.js-->

--endbuild-->

以上代码，在打包的时候，会将kalok.js与main.js合并压缩为lib.js，并替换html中的引用。

自定义详情页前端通用库

WxMoment是由微信朋友圈广告团队面向广告详情页开发者提供的一个JavaScript库。

通过使用WxMoment，开发者可以简单的实现详情页中的常见功能，例如：

微信分享、横屏提示、网页统计等。

前往Github查看WxMomentExample。

引用脚本

当前版本：

0.0.2

最后更新：

2015-05-29

最新的脚本地址及文件将会在Github库中更新。

数据统计

开发者使用数据统计功能前，请与商务团队提前确认统计监测点及统计的项目别名（例如：

20150504WXMOMENT）

注意：

网页统计需要部署到腾讯服务器才可正常上报统计数据

varwa=newWxMoment.Analytics（{

//projectName请与微信商务团队确认

projectName:

"20150504WXMOMENT"

}）;

支持自定义事件统计，例如预约按钮的点击事件、视频的播放事件等。

$（'#button01'）.click（function（）{

//两个必填参数，分别为:

事件分类、事件名称

wa.sendEvent（'click','button01'）;

}）;

横屏提示

若不支持横屏或横屏下体验不佳，请添加横屏提示。

newWxMoment.OrientationTip（）;

资源预加载

当图片较多时，对于页面的打开速度和后续的体验都非常影响，所以，我们通常让资源提前加载，即有一个loading的过程，当资源加载好以后再进入实际页面。

varbasePath="//

varloader=newWxMoment.Loader（）;

//声明资源文件列表

varfileList=['img/1.png','img/2.png','img/3.png','img/4.png'];

for（vari=0;i

loader.addImage（basePath+fileList[i]）;

}

//进度监听

loader.addProgressListener（function（e）{

varpercent=Math.round（（pletedCount/e.totalCount）*100）;

console.log（"当前加载了",percent,"%"）;

//在这里做Loading页面中百分比的显示

}）;

//加载完成

loader.addCompletionListener（function（）{

//可以在这里隐藏Loading页面开始进入主内容页面

}）;

//启动加载

loader.start（）;

滑屏组件

DOCTYPEhtml>