技术盒子 | 听说看了朋友圈广告后，技术大咖都去翻字典了-杭州APP开发为你呈现

都说广告也可以是生活的一部分，我们在长大，广告也在变化~~

曾经，我们看到的广告是这样：

要么是农业重金属——没有金坷垃，怎么种庄家？！！（ 戏   很   足 ）

要么是城市套路深——恒源祥，羊羊羊…暴力出击，没有一点点防备~~~

广告界的泥石流！！！

后来，我们看到了朋友圈广告。因人而异的推送激发了大家的疯狂刷（tu）屏(cao）~

当我们已经习惯了平面、视频广告出现在朋友圈feed后，最新的朋友圈广告形式——朋友圈原生广告页在奥运会开幕那天一炮而红！

NIKE的震撼长图、三星的酷炫视频、腾讯新闻的高清海报，甚至还有能用全景模式无死角欣赏奥运风采，一则朋友圈广告有如欣赏大片，原来广告还能这么“黑科技”~

全屏展现、迅速加载、组合多样，看起来像Html6、又像是升级版的Html5，小派认识的技术GG们都在讨论，它到底是个啥？

小派拿到了效果数据：首发六支广告落地页人均停留时长20秒，高峰期峰值超过了春晚红包流量峰值。

看过的朋友都说，这很不广告。

让广告看起来不像广告，微信朋友圈广告团队怎么做到的？

朋友圈的最新广告有多酷炫？

可以看出这几点不同：

伴随里约奥运会的开幕，以“嘿，今天该你上场了！”为主题的NIKE广告登场。点开广告后看到的是全屏展现，真正地做到了视觉上的零干扰。

手机信号、电信运营商标志、网络状态、手机时间、电池信息图标通通都消失了~为了照顾用户体验，左上角的“×”和右上角的“…”为用户提供了返回路径。

对于微信朋友圈广告团队来说，这无疑是一次技术上大胆的尝试。“无论是被认为是Html5的升级版，还是Html6，都是有偏差的。”

之所以能达到这样的体验，是因为微信在原有的图片、视频广告开放的基础上，将客户端完整的原生界面首次开放给广告主，在展现逻辑上做了一些变化。

其实，朋友圈原生推广页早在6月份6.3.22版本的微信中就已经“预埋”好了，那时候已经万事俱备，只欠“奥运”。

网页浏览的内容多，打开的速度就会变慢。但朋友圈原生推广页广告却打破了这一“自然”规律。

在观赏最新广告的同时，我们可以看到，它能承载的信息比以前要大得多：集合了视频、轮播图、全景图等多种形态，不止图片容量变大，而且视频时长也加长，在高清度并没有降低的情况下反而观看起来更顺畅了。

承载了10倍于常规的推广内容，朋友圈新广告形态如何做到“瞬间加载”、“毫秒级”打开？

核心原因是，微信朋友圈原生推广页广告改变了点击广告需加载外部链接内容的做法，原生渲染出来的控件体验，远比Webview渲染出来的控件体验要好。

换个说法就是，普通的H5外链与朋友圈原生推广页广告的“赛道”并不同，微信为后者提供了一条更快的“赛道”。

这里也用到了大家熟悉的缓存技术，将内容（文字、图片、视频等）预加载在微信客户端原生框架中，不需要临时通过网络加载素材，大大省去了加载的时间，而且可以展示多样的酷炫效果。

小小的“加载速度”上的改变，就能带来大片袭来般的震撼感。

人的眼睛总是挑剔的，怎么才能让广告的美感提升？还是要用技术说话~

朋友圈的最新广告，创意怎么展示？原理可以参考我们小时候玩的“魔尺”。

单个24段的魔尺可以变100多种精美图案，有小鸟、长颈鹿、鸭子、乌龟，还可以变成生活中的各种事物。

原生推广页广告对创意手段的支持并没有因为优先加载速度而打折，反而，微信朋友圈广告页的原生渲染能力，会提供图片、小视频、视频、文本、按钮、轮播集合等相关原生组件供广告主随意选择，自由组合，形成格式化数据。

格式化数据通过服务器下发给客户端解析后，形成原生加载。配置原生的入场动画，让整个体验形成沉浸式的感觉。

谁的广告谁做主~

这也就形成了我们看到的广告新形式。

停留在NIKE广告里的同学，一定是认真看了长图文案和视频，它讲述的“曾经的小鬼头，如今竟也登上了世界之巅的赛场”的励志故事，能带动大家一起感染奥运的氛围。

朋友圈的最新广告，希望更开放、更自由组合的素材，能引导广告主在一个页面更完整、有趣地叙述一段故事、讲述一款产品，提升用户体验以及微信平台和广告主的价值。

让所有被推送广告的人都享受到完美的体验并不容易，微信朋友圈广告团队在准备过程中也遇到了一些技术问题。

首先是，体验需得当。

吃瓜群众们的机型众多，不光有iPhone，还有Android不同厂商各种尺寸大小的机型，同时还有更大屏Pad这样的机型，那么组件大小、两个组件之间的间隔值的设定规范是一个难题。

刚开始时，团队更多依靠等宽拉伸或者等高拉伸的方式让组件的绘制勉强能够绘制，但对于控件之间的距离就很难把握，这就容易造成在iPhone6s看起来还正常的广告，在iPhone5上就看起来非常奇怪。

在尝试了多种方法后，团队里一位有前端Web开发经验的毕业生提出了尝试类似Rem的设计方案，最终很好地解决了整个适配问题。

其次是，流量得够用。

经过不断尝试，微信朋友圈广告团队提供的打开策略能够很好地在用户体验度和用户流量消耗上找到平衡。他们提供了四种场景的解决方案：

A.Wi-Fi环境下，用户收到朋友圈广告推送，会提前下载图片、视频（若用户关闭了小视频的开关，将不提前预加载）；

B.非Wi-Fi环境下，用户收到朋友圈广告推送，提前下载第一张小的图片（保证进入动画正常），其他的媒体资源在进入原生推广页后再下载；

C.Wi-Fi环境下，用户收到朋友转发的原生推广页后，提前下载第一张小的图片（保证进入动画正常），其他的媒体资源在进入原生推广页后再下载；

D.非Wi-Fi环境下，用户收到朋友转发的原生推广页后，不提前下载任何资源。

这样，在点开的一刹那，不同的网络环节对应的下载策略会不同，吃瓜群众也就不用担心打开广告带来的流量压力啦。

最后，可能大家会比较好奇，为什么微信朋友圈广告要用这种新形式？

一方面，微信朋友圈广告团队希望用全新的形式，让用户产生焕然一新的感觉，另一方面，也希望改变此前图片和视频广告形式上的局限性，让广告主施展出更好的创意。

他们也说了，随着技术的突破，微信的开放能力将会和微信的产品优势结合起来，带来更有想象空间的体验。

毕竟，经历了金坷垃、恒源祥、脑白金这样的洗脑式广告的我们，都不容易啊~