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
1 |
xmlns:VMAXControl="clr-namespace:VMAXNativeAdHelper.WP8;assembly=VMAXNativeAdHelper.WP8" |
and this is how the controls can be referred to.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<Grid x:Name="MainGrid"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <VMAXControl:InFeedControl Name="InfeedAdControl" Grid.Row="0" FailedToRenderNativeAd="InfeedAdControl_FailedToRenderNativeAd" DidRenderNativeAd="InfeedAdControl_DidRenderNativeAd" Height="Auto"/> <VMAXControl:ContentStreamControl Name="ContentStreamAdControl" Grid.Row="1" FailedToRenderNativeAd="ContentStreamAdControl_FailedToRenderNativeAd" DidRenderNativeAd="ContentStreamAdControl_DidRenderNativeAd" Height="Auto"/> </Grid> |
For code behind access, add the namespace after referring the dll in the project as:
1 |
using VMAXNativeAdHelper.WP8; |
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 Ids. 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 here.
1 2 |
InfeedAdControl.SetContentAndShowNativeAd(adView.NativeAd.GetContent()); ContentAdControl.SetContentAndShowNativeAd(adView.NativeAd.GetContent()); |
Once you call this API with its necessary parameter, the control will be populated with the necessary parameters from the JObject that was provided.
Here is a sample image showing the appearance of the ads:
In-feed ad
Content stream ad
Requesting Native Ads
Native ads are ads which you can customize to match the unique user experience of your app.
Native ads can be requested in the following manner –
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
VMAXAdView adView=new VMAXAdView (); // To initialize the VMAXAdView // To set the mandatory properties and to configure the adView after initialization. adView.AdspotId = "MY_ADSPOT_ID"; // To specify the Adspot Id. Replace “MY_ADSPOT_ID” with your actual Adspot Id. adView.UX= AdUX.Native; // To specify native ads. adView.DidCacheAd +=AdView_AdCached; // add handler for successful callback of caching of native ad. adView.FailedToCacheAd +=DidFailed_CacheAd; // add handler for failure callback of caching of native ad. To request Native ads - adView.CacheAd(); Note : LoadAd() is not allowed for requesting Native ads. Using that will give an error message. The VMAXAdView provides the success and failure callback for Caching of Ads. The success callback can be used to provide the customization logic of the ad Unit. NativeAd is represented by the NativeAd property of the VMAXAdView object that you created which gives you an object of type NativeAd. In case of success it will contain the various elements of the NativeAd. You can extract the values of NativeAd elements by using the GetElementValue(<Predefined constant values>) API of NativeAd class. Predefined Constants are defined in the class- NativeAdConstants. or If you want all the elements in the form of a single JSON object and provide your own parsing logic, you can use the GetContent() API of the NativeAd class, which will return the NativeAd content in the form of JSON. eg. private void AdView_AdCached(object sender, EventArgs e) { var nativeVMAXAdView = sender as VMAXAdView; if (nativeVMAXAdView.NativeAd!=null) { var nativeAd = nativeVMAXAdView.NativeAd; // gets the NativeAd property of the VMAXAdView class. var nativeAdCustomJson = nativeAd.GetContent(); // gets the Native Ad content as a JSON object.You can provide your own custom logic to parse this or fetch values of individual elements as shown below. var buttonLabel = nativeAd.GetElementValue(NativeAdConstants.BUTTON_LABEL); var titleText = nativeAd.GetElementValue(NativeAdConstants.TITLE_TEXT); var imageUrl = nativeAd.GetElementValue(NativeAdConstants.LARGE_IMAGE); var iconUrl = nativeAd.GetElementValue(NativeAdConstants.ICON); var description = nativeAd.GetElementValue(NativeAdConstants.DESCRIPTION); } } Note: On Failure of Cache request the NativeAd property of VMAXAdView object will have the value null. Impression and Click Logging- Impression and Click logging will be done by the application itself. For this, just use the following API - NativeAdHelper.RegisterViewForInteraction(adView, NativeAdGrid, listOfNativeClickableElements ); listOfNativeAdClickableElements is nothing but a list of elements in the rendered native ad which you want to make clickable. To make the entire native ad clickable you can pass this parameter as null. It can be initialised as below: List<UIElement> listOfNativeClickableElements = new List<UIElement>(); listOfNativeClickableElements.Add(description); listOfNativeClickableElements.Add(this); Remember: Only after registering the impression the ad will be considered successfully rendered in application and impression will be recorded. Also, Only after registering the nativeAdView for clicks the clicks on the ad will be recorded. Absence of calling this mandatory API on successful ad rendering will impact revenue so just ensure that you make a call to it as soon as the NativeAd gets loaded. The SDK will automatically prevent a duplicate impression from being recorded for a single request. Note: In cases where you re-use the view to show different ads over time, make sure to call UnRegisterNativeViewForCallToAction() before registering the same view with a different instance of NativeAd. |
See Additional Options for optional callbacks related to Native Ads.
If you wish to customize the controls in their appearance, the following is the list of attributes which you can change:
Properties | Can developer modify |
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.