First of all, pay tribute to the wechat team, once again led the development direction of mobile Internet products, to the mobile advertising again opened a door!

Thanks for the experience of working in wechat, which makes me understand the Internet better

If there is anything wrong with the article, please directly email [email protected]

If you like my article, you can directly visit my blog, welcome criticism.

I. Introduction to advertising

Unclear friends first look at the wechat team on the introduction of this advertisement: circle of friends native promotion page advertising with the Olympic Games online

On the first day of the Rio Olympics, the wechat advertising team took a step further with a new type of advertising that is said to be aimed at making users more willing to share. When I opened it, it was amazing. Here are the pictures:

Review images

As a mobile developer who loves research, my first impression is, how does this work as an advertisement?

As shown in the image above, there is a cool entry animation, and the whole page will show several pictures of the above, which will insert a video, which will play automatically when it appears, pause after it has been highlighted, and at the end there will be a link button to jump to the specific product.

Later, I watched another advertisement demo released by wechat. The differences with it mainly lie in the element position, size, and final button position, as well as the difference of sliding interaction, as shown in the following figure:

Review images

One of the big differences is that each element takes up a page and slides flexibly, while the third page feels like a long panoramic image that can be moved based on the gravity sensor (cool!). .

Ii. Simple analysis and hook preparation

Obviously, this is a Native development page, not HTML (if H5 could do that, Native developers would be out of business); But as a page for advertisers to use, it must be able to flexibly display various elements according to the needs of the inevitable need for better customization features. React Native, Weex and wechat are the same as these, which use javascript code to render and translate the Native page display? Let’s hook the following wechat iOS version to see how it works. Here I temporarily jailbroken my poor 5S…

The socket used by wechat is directly TCP. If you do not know the encryption method, it is basically impossible to check its implementation by intercepting the request. This is done by looking at the UI layout, using objective-C runtime features, and looking at the member variables of the objects in the current layout

Above is the View Hierarchy structure of one of the ads. Obviously, the page is on the same stack as the ViewController behind it. In other words, the full screen of the page is not achieved by window and raising the Hierarchy, but by hiding the status bar in iOS7. Maybe the page doesn’t support iOS6.

Third, WCCanvasPageViewController

Above can be found that used to handle advertising page ViewController class name is WCCanvasPageViewController, maybe Canvas is the symbol of the project, guess Canvas include all the names are associated with this type of advertising. At the bottom of the stack is a large MMTableView, which means that the entire structure of the page is a UITableView.

Then the UI Hierarchy interface is studied, which can also be found by looking at View Hierarchy. The home page animation is jointly realized by a UIImageView and the first Cell of UITableView. The size, size, resources and position are all the same, which makes the eye be deceived and the real one be confused, as shown in the figure below: Review images

It is not clear whether the React Native or WEEx solution is implemented. However, only javascript is known to be the best interpretation language that can be executed in the iOS APP environment. Other languages, such as Lua, need some code base support in support. In the case of JS, other languages have been abandoned.

If use js to realize, that you just need to find a lot to js in related WCCanvasPageViewController or jsexecutor or jscontext naming methods or constants can, of course, it is best to find the UI code directly, it is irrefutable evidence.

Start browsing WCCanvasPageViewController below:

  • M_FirstViewToAnimate — this view is a header image and will take into account some animation processing
  • Failed to find any js or javascript related names
  • 3, from the name can completely see the key information must be in a name calledm_advertiseInfoIn fact, all of the Model layer data about advertising is there. This one of the fields are too many, not very familiar with wechat advertising business, it can not guess what it is.
  • 4, because the current page is calledWCCanvasPageViewControllerAs mentioned earlier,canvasI think that’s the code name for the project, som_advertiseInfoOne of the names in it is calledadCanvasInfoMust be the key to rendering this page.

Ok, check its information below:

Review images

  • ShareTitle: “Is the title of this AD”
  • ShareDesc: “Some introduction to advertising”
  • ShareWebUrl: “Advertising try on the share link, pro test in the unsupported version will directly jump to the URL h5 for advertising display”
  • SizeType :1 — should be related to the style
  • BaseWidth :750 — Not sure how to use it
  • AdCanvasPageList — > An array that looks like an array for paging displays, or page pages, to deal with the inertia of sliding. If a page is not paging, there is only one object in the array. In fact, it all comes from the XML below.
  • FromAdXml – a section of XML, the most critical information comes, the entire page meta data in this!

Knowing that the data exchange format for wechat messages is XML, it is natural to be sure that this is where the data is stored.

Just knowing that XML is used is not enough to determine the rendering scheme. You need to browse the XML, and if it doesn’t contain style information, you also need to understand its internal meaning. Here is the XML information for these two ads:

1. Yili Milk advertising meta information

1470527748-6114390104925202608 1600004088 | wx0oghes5zhpmn4y | | | 0 yili milk 0 1 for details http://as.weixin.qq.com/cgi-bin/redirect?tid=1601557 0 1 1918989427 sponsors ads Sponsored advertising sponsors to provide information of Sponsored advertising information Story classify_zh_CN Electrical classify_zh_TW Electrical Appliance nickname_zh_TW Nickname_EN 1700001666 1371 Amousse 1 750 1 He'll make the world look good. Do you think so? I tao, who can dominate the screen by appearance level, is going to dominate the whole universe. http://mmsns.qpic.cn/mmsns/olticmAYicoM8WH03wUK2LgURpbYn92GxLWWCd9cegRJ46W3BlEIrz5A/0 http://mp.weixin.qq.com/tp/ad_detail_info?page_key=95264e7fa44c6cd90e55334350d4e560e0acde652c42b567fe3759cbd644983dc171f f853248263e068cb034dd9c0be9 #ffffff http://mmsns.qpic.cn/mmsns/olticmAYicoM882rFgvNH3mKo5ZDn6p7LFxdZnUt8WSEQqibXtkwXplHQ/0 is shown in figure 1 938 750 0 0 0 0 41 1371_3015_41 http://mmsns.qpic.cn/mmsns/olticmAYicoM882rFgvNH3mKo5ZDn6p7LFLL5prEEujnDa0v0ANaBiaWw/0 396 750 0 0 0 0 41 Figure 2 1371 _3016_41 # 000000 http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30270201010420301e0201690402534804100fe55d4d35540737a214d9 9e1721636002036d43de0400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4522c02024ef202031e8d7f02030f42 400204045a320a0201000400 0 http://vweixinthumb.tc.qq.com/150/20250/snsvideodownload?filekey=30280201010421301f020200960402534804106ed93afac5f3924bd 8f6f6666917470c0203016a870400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4522c02024f1a02031e8d7f020 30 f42400204045a320a0201000400 640 1138 0 0 0 0 62 video 1 1371 _3017_62 # 000000 http://mmsns.qpic.cn/mmsns/olticmAYicoM8WH03wUK2LgURpbYn92GxLZ1s7PbTjWlwjmxnyqk5QXA/0 44 panoramic 1 1371 _3018_44 # FFFFFF http://mmsns.qpic.cn/mmsns/olticmAYicoM882rFgvNH3mKo5ZDn6p7LFdQz4tNnibpxfbJ0XbzDsRlQ/0 736 750 0 0 0 0 41 in figure 3 1371_3019_41 http://mmsns.qpic.cn/mmsns/olticmAYicoM8aSeQibcyTFYR5BQx2zibXaoZWyQy8uUlbQAIm116KkSRw/0 301 750 0 0 0 0 41 Figure 4 1371 _3020_41 immediately joined 30 0 0 78 # 004 # FFFFFF http://yili.cici6.com/201608/main.html da1 # da1 1 0 0 004 205 205 21 button 1 1371 _3021_21Copy the code

2, Nike advertising meta information

NIKE 0 1 for details http://as.weixin.qq.com/cgi-bin/redirect?tid=1601569 0 1 1110914615 sponsors ads Sponsored advertising sponsors to provide information of advertising information Sponsored story classify_zh_CN classify_zh_TW classify_en nickname_zh_CN nickname_zh_TW nickname_en 1700002364 2566 Nike Other cities 1 750 1 Hey, it's your turn today! Yes, you! Immediately find out http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wrylT8DKZaj06bg9sbRzSbw/0 http://mp.weixin.qq.com/tp/ad_detail_info?page_key=5b6cddf2c33149ccf8692fb1a3dde13a63e56cd068fd9d5e65c22f692fb134f3fbc37 fb96e77abbf502ec59ca87ddfc4 #ffffff http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wpEw5ySjbksLJiaAqcdeWicXw/0 750 750 0 0 0 0 41 head figure 2566_2832_41 http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wX2aMkzC0zeoWEEVJRfZWdQ/0 448 750 0 0 0 0 41 1-1 2566 _2833_41 text http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f02016904025348041022c56408ca857868ae7e28 d5ca2457f50204011d47340400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4387102024ef202031e8d7f02030f 42400204045a320a0201000400 1 http://vweixinthumb.tc.qq.com/150/20250/snsvideodownload?filekey=30270201010420301e02020096040253480410ee035de565a944eab f9145f8098ecc7a020231130400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4387102024f1a02031e8d7f02030 F42400204045a320a0201000400 421.875 0 0 0 0 62 750 2566 _2834_62 streaming video http://mmsns.qpic.cn/mmsns/gFuZJlqxR6eX7uHPR8P04tkiakghyIj02xL4nxRaThSt4vDdttU8XZA/0 354 750 0 0 0 0 41 _2835_41 copywriting 2 2566 http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkXXZibicqiaw9t7KMVsWZe0zMg/0 1334 750 0 0 0 0 41 long figure 1 2566_2836_41 http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkIV7oAFquic7wHjBt24qHTUw/0 1334 750 0 0 0 0 41 Figure 2 2566 long _2837_41 http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkx3Abdic8QWHClsasGBdYbRA/0 1334 750 0 0 0 0 41 long figure 3 2566 _2838_41 http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkuouM2ZUaRVPKYN4eDCvAEw/0 1334 750 0 0 0 0 41 long figure 4 2566 _2839_41 http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkGZG8yw8dW0kDhfVEfSMP1g/0 1334 750 0 0 0 41 long figure 5 0 2566 _2840_41 http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fk8g4sjFQnuelkgysLQpVXAw/0 1334 750 0 0 0 41 long figure 6 0 _2841_41 http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkXdbibibUsMwqOt13Wcyqns3w/0 1505, 750, 2566 41 long figure 7 2566 0 0 0 _2842_41 http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dGp4D8cCyJo38N3Oj4R89Dibv6ICjLoMb5qyAosI4ian1A/0, 728, 750 0 40 00 41 picture 3 2566_2843_41 immediately play 30 #000000 http://m.nike.com/cn/zh_cn/c/justdoit/national?cp=cn_brom_080616_u_GEN_AL_OLP_nwc_LM_02_SP_GC 0 2 80 #ffffff #000000 1 0 20 150 150 21 2566 _2844_21 button at http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dGp4D8cCyJo38N3Oj4R89Dd799WvreUsibkibiaEh19p1lQ/0 392, 750, 40 to 50 0 0 41 pictures 4 2566 12334591275321071424 1600004109 | _2845_41 wx0vl72zluinqfpw | | | 0. 1470415303Copy the code

Five, the conclusion

The whole XML is the meta information of a TableView. It can be considered that the AD only supports the display of tableView. That is to say:

The client set a number of templates, tableView each cell is a template, advertisers to combine thisCopy the code

I have to say, it's quite imaginative!

The last button used for the advertiser effect jump is also a cell. According to the XML field, this position will limit the advertiser's play, because the cell background can only be solid color!

Finally, let's take a look at how many combinations of templates are supported in this wave of ads: View images

All of the templates above that start with WCCanvasComponent are supported templates, and most of them can be read literally: it's interesting that videos are both streaming and mini-videos, and there's a WebViewInfo that might indicate that some modules here can load a webpage if necessary...

Six, simple advantages and disadvantages analysis, and Android

Well, the whole analysis is done, and we can be sure of the technical solution adopted by the wechat advertising team.

The advantage of this technical solution is that it is completely controllable. The client can maximize the fluency and performance in the customization process, and the transmission protocol can also be compatible with the existing message mode of wechat. Through module combination, advertisers can also achieve very good customization.

Drawback is that, after all, all function style depends on the client version supports, although there will be a lot of fun style, but after all is limited, ultimately advertisers creativity is limited, but the advertising is limited by the screen width, can show the idea itself is not a lot, WeChat advertising team this scheme can cover almost all the major creative the Lord.

In any case, this kind of advertising is a great invention, and we can be sure that app ads will officially enter the native era!

The forgotten Android

As mentioned above, one of the major advantages of this implementation method is good compatibility, which directly supports the existing wechat message protocol, so the Android side is bound to obtain the advertising meta information is also the XML information transmitted by the message, but the rendering method is not the same. You can guess that there are only some native components in the ListView. However, due to the odd screen and fragmentation of various ROMs, Android will encounter more difficulties in implementing flexible paging and panoramic image display. (There are a lot of things that are not satisfactory)