Using the Native Ad Helper Library

Rất tiếc, mục này chỉ tồn tại ở English. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.

This document will help you utilize a Native Ad Helper Library to render the native ads in a couple of predefined formats.

The VMAX Native Ad Helper Library has been designed to reduce the efforts of the developer in rendering the native ads. The library helps in rendering the native ads in any one of the two formats: In-feed and Content Stream.

Integrating the SDK

Include the <packages> folder in your project’s folder structure if you haven’t done so yet.

Using Project -> Add Reference -> Browse , add the VMAXNativeAdHelper.wp10.dll to your project. It is present in the packages/VMAX folder.

The library internally provides two controls which can be added to the XAML file: InfeedControl and ContentStreamConrtol. You may even create an object of these control in the backend and add it to any one of your grids programmatically. This is how the library can be referred in the XAML file.

For code behind access, add the namespace after referring the dll in the project as follows:

1

using VMAXNativeAdHelper.wp10;

Once the controls have been placed in the xaml, what remains is the actual native ad data to be shown in these controls. You can get the native ad data using the VMAX Windows phone sdk by selecting appropriate Ad UX Types and using proper Adspot Id as shown in the section for requesting native ads here. You should, then, call an API SetContentAndShowNativeAd() on the controls. This API takes JObject (JSON object) as a parameter. (If you do not have a reference to the Newtonsoft.Json library, add it using the nuget package manager.) This JObject, you can obtain from the NativeAd property of the adView. The GetContent() API will return you a JObject from the native ad as shown below.

Once you call this API with its necessary parameter, the control will be populated with the necessary parameters from the JObject that was provided.

Optional Callbacks

DidRenderNativeAd()

This callback can notify you about the successful rendering of the native ad.

FailedToRenderNativeAd()

You can register for an event FailedToRenderNativeAd which in turn will tell you the reason behind the failure in rendering the native ad. One of the reasons can be Empty or Improper JObject being passed to the SetContentAndShowNativeAd() API.

The class NativeAdEventArgs contains a field by name ErrorMessage which can tell you the exact reason for the failure in rendering the native ad.

JSON Details

The VMAX Server gives you a JSON that will appear as shown below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

{

"BUTTON_LABEL":"Install Now",

"ICON_48x48":"sample http image url",

"ICON_80x80":"sample http image url",

"SCREENSHOT_300x250":"sample http image url",

"SPAN_320x50":"sample value",

"LARGE_IMAGE_1200x627":"sample http image url",

"TITLE_TEXT":"Lost Twins - A Surreal Puzz...",

"DESCRIPTION":"Lost Twins is a delightful indie game that is original, beautifully made...",

"PRICE":"Free",

"TOTAL_INSTALLS":"100",

"REVIEW":"sample string",

"RATING":"4.1",

"SIZE":"2MB",

"TOTAL_REVIEWS":"1100",

"PRODUCT_CATEGORY":"Action Games",

"IMPRESSION_URL":"sample http impression url",

"CLICK_URL":”sample http click url”

}

It has several fields out which help in rendering the native ad depending upon the type. The VMAX Sdk also internally gets the same JSON. But it adds more elements to it and creates a new JSON as shown below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

{

"BUTTON_LABEL":"Install Now",

"ICON":"sample http image url",

"ICON_HEIGHT":"48",

"ICON_WIDTH":"48",

"SCREENSHOT":"sample http image url",

"SCREENSHOT_HEIGHT":"800",

"SCREENSHOT_WIDTH":"480",

"SPAN":"sample http image url",

"SPAN_HEIGHT":"480",

"SPAN_WIDTH":"800",

"LARGE_IMAGE":"sample http image url",

"LARGE_IMAGE_HEIGHT":"1200",

"LARGE_IMAGE_WIDTH":"627",

"TITLE_TEXT":"Lost Twins - A Surreal Puzz...",

"DESCRIPTION":"Lost Twins is a delightful indie game that is original, beautifully...",

"PRICE":"Free",

"TOTAL_INSTALLS":"100",

"REVIEW":"sample string",

"RATING":"4.1",

"SIZE":"2MB",

"TOTAL_REVIEWS":"1100",

"PRODUCT_CATEGORY":"Action Games",

"IMPRESSION_URL":"sample http impression url",

"CLICK_URL":"sample http click url"

}

You can pass any of the above mentioned forms of JSON objects (in a JObject format) to the SetContentAndRenderNativeAd() API and the ad will be rendered according to the type of control used (Infeed or Content Stream).

Customizing Native Ads

If you wish to customize the controls in their appearance, the following is the list of attributes which you can change:

Properties

Editable

Background Color

yes

Foreground Color

yes

Border Thickness

yes

Border Brush

yes

Font Family

yes

Font Style

yes

Font Weight

no

Font Stretch

yes

Margin

no (Changes in this attribute may distort the control)

Width

no (Changes in this attribute may distort the control)

Height

no (Changes in this attribute may distort the control)

Horizontal Alignment

yes

Vertical Alignment

yes

Changes in Phone Theme Color

yes

The stars in the rating control take up the color of the theme applied.
*Note- Make sure you add the controls in a grid or any container with Height=”Auto” as shown in the snippets above.