:: dashboard - jioads sdk for kaiosjioads sdk for kaios 4 step 1: download the sdk 4 step 2: install...

29
JioAds SDK for KaiOS

Upload: others

Post on 09-Aug-2021

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

JioAds SDK for KaiOS

Page 2: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Table Of Contents

JioAds SDK for KaiOS 4

Step 1: Download the SDK 4

Step 2: Install the Plugin 4

Step 3: Integrate using the Plugin 5

Requesting Ads: 5

Native Interstitial 6

Pre-roll Video 6

Rewarded Video 7

Banner and Billboard 7

Customize Ad Markup: 8

Auto Refresh Ad: 9

Pushing Keyword: 9

Click and Close Ad: 9

Supported Ad Formats 11

● Native Ads 11

● VAST Ads 11

APPENDIX A 12

Event Object Definition 12

JioAds Ad Event Callback List 12

Attributes that can be set under <ins> tag 13

Global Ad Settings 14

APPENDIX B 16

Rendition precedence for Native Interstitial Ad Markup 16

Rendition for Native In-Feed 16

Rendition for Native Content Stream 16

Delivering XML Ad Markup 16

APPENDIX C 18

Error Object for onAdError 18

ErrorCode Event Object 18

Using adUXType - Callback Parameter (Only applicable for Interstitial) 19

Using variable Bit-Rate for Audio Ads 19

Page 3: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Using Full-Screen Experience 20

Using Full-Screen Experience for In-Stream Ad Format 20

Setting Video view rotation and Ad timer for In-Stream Ad Format 21

Identify Device Type 21

Spatial Navigation 21

API setNIVideoControlsVisibility 22

Customizing Native Ads (Native Banner / Billboard) 22

Example layout 22

List of Native Elements 23

Requesting VMAP 24

Requesting VMAP through JioAds SDK 24

Sample INS Tag for VMAP 24

Fetch VMAP URL SAMPLE - fetchVMAPURL 25

Callback onVMAPReady 25

Enabling Geolocation 25

Requesting Ad Duration 27

Use the below API to request the video ads of specific duration in seconds. This API is only

available for In-stream videos. 27

Using APIs of Ad Break for External Player 27

Setting Ad Break Duration 28

Viewability 28

Other APIs 28

API VMAX.closeAd 28

API VMAX.updateAdbreakDuration 28

Page 4: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

JioAds SDK for KaiOS This document outlines the method to integrate the JioAds SDK for KaiOS in a privileged

javascript app using the official plugin (Beta Version).

Before commencing the integration, ensure that you have created the necessary adspots on the

JioAds Control Panel.

Step 1: Download the SDK Before proceeding, ensure that you have downloaded the latest version of the JioAds SDK for

KaiOS.

Extract all the files from the SDK archive into a separate folder. Plugin is available at below

location: KaiOSSDK

Extract MOAT-SDK.zip in App's root directory.

Do not use any doctype in your html document: (Refer sample below)

<html lang="en">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-

scale=1.0, maximum-scale=1.0" />

<title>KaiOS Mobile Web Application</title>

<link rel="stylesheet" href="css/common.css" />

<script src="KaiOSSDK/vmaxsdk.js"></script>

</head>

<body>

// Body content goes here

<div>

Hello World!

</div>

</body>

</html>

+ MOAT is Applicable only on Native Interstitial ad-formats.

Step 2: Install the Plugin

Copy the “KaiOSSDK” folder in your app’s root folder and insert the KaiOSSDK/vmaxsdk.js in

your app html as below:

<script type="text/javascript"

src="KaiOSSDK/vmaxsdk.js"></script>

Page 5: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Step 3: Integrate using the Plugin

Copy Paste the below code into your index.html file

<ins class="adsbyvmax" id="[ENTER-UNIQUE-PLACEMENT-HERE]" data-

adspot-key="[ENTER-ADSPOTKEY-HERE]" data-source="[ENTER-PACKAGE-

NAME/APP-IDENTIFIER]"></ins>

Add the below code into your “app.js” file

window.addEventListener('DOMContentLoaded', function () {

var placementId = "unique_ad_5"; //Enter unique placement id

VMAX.cacheAd(placementId);

VMAX.onAdReady = function(placementId, adUXType,

adMetadata) {//onAdReady is callback event dispatched by sdk, if

cacheAd is successful

VMAX.showAd(placementId);

//call this function on 'DOMContentLoaded' is compulsory

console.log(adMetadata);// { isDeeplinking: false }

} //call this function on 'DOMContentLoaded' is compulsory

}

//NOTE: for understanding please go through the app.js given in the SDK download

example/sample_app/js folder

Requesting Ads: Prerequisite to requesting Ads, kindly ensure that your use the below APIs to set the package

name and App version in app.js. Also ensure server side master configurations are in place.

Kindly reach out to JioAds for any support.

VMAX.setAppName("package.name");

VMAX.setAppVersion("version.number");

//Eg.

VMAX.setAppName("com.test");

VMAX.setAppVersion("1.0");

Page 6: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

While a user invokes ”VMAX.cacheAd” ad requests is being cached; wherein “VMAX.showAd”

invocation will render the ad which is obtained from the cache.

Below function can be used to your desired app event to cache or show an Ad.

VMAX.cacheAd(‘<unique_placement_id>’);

VMAX.showAd(‘<unique_placement_id>’);

//NOTE: for details see APPENDIX A

Native Interstitial

1. Add <ins …></ins> with appropriate adspotkey and unique placement id (JioAds ad tag)

2. Attach the below function to your desired app event to cache or show an Interstitial Ad

VMAX.cacheAd(‘<unique_placement_id>’);

VMAX.showAd(‘<unique_placement_id>’);

Pre-roll Video

3. Add <ins …></ins> with appropriate adspotkey and unique placement id (JioAds ad tag)

1. Attach the your media container to JioAds video player for pre-roll experience

// Media Container <div id="container_div">

// Video Player Code goes here

</div>

2. Call Video Player Initialization method before invoking `showAd`:

This Initialize Video Player for Pre-roll video for container ‘<container_id>’; takes

argument ‘<attachEventConf>’ as function name; if app uses any action listener on

‘SoftLeft’ or ‘SoftRight’

// Initialize Video Player

VMAX.setVideoPlayerDetails(‘<container_id>’,

‘<attachEventConf>’);

Page 7: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

3. Attach the below function to your desired app event to cache or show an Ad

VMAX.cacheAd(‘<unique_placement_id>’);

VMAX.showAd(‘<unique_placement_id>’);

Rewarded Video

Rewarded Video are opt-in Video Ads that reward users with virtual currency or premium

content for viewing video trailers. Ads that reward users with virtual currency or premium

content for viewing video trailers. You can use this adspot to show rewarded video ads

that can be used to reward users with in-app currency on view or completing actions.

1. Add <ins …></ins> with appropriate adspotkey and unique placement id (JioAds ad tag)

also add attribute data-rewarded=”true”

<ins class="adsbyvmax" id="[ENTER-UNIQUE-PLACEMENT-HERE]"

data-adspot-key="[ENTER-ADSPOTKEY-HERE]" data-

source="[ENTER-PACKAGE-NAME/APP-IDENTIFIER]"

data-rewarded=”true”// Ensure this flag is set true only

for rewarded video adspots></ins>

2. Attach the below function to your desired app event to cache or show an Rewarded

video Ad

VMAX.cacheAd(‘<unique_placement_id>’);

VMAX.showAd(‘<unique_placement_id>’);

3. You shall get the below call back when the video is complete in order to gratify the user.

VMAX.onAdMediaEnd(‘<unique_placement_id>’,

<true_if_video_playback_is_completed_else_false>, <'reward-

points>);

This callback will be used to return the reward points set at the interface for per Adspot

and App, however the developer can use this callback and choose to gratify the user

with their own custom reward points eg. coins, gems etc within the app.

Banner and Billboard

Page 8: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Native In-Feed (banner) and Native Content Stream (billboard) ad-format mimic the look and

feel of the content stream in which they are placed.

1. Add <ins …></ins> (JioAds ad tag) at appropriate position; where they want AD to be

rendered.

2. Call cacheAd, showAd method on desired app event ad can be rendered. We

recommend it on ‘DomContentLoaded’ event.

document.addEventListener(‘DOMContentLoaded’, function(e){

console.info(‘Starting showAd Event’);

VMAX.showAd(‘<unique_placement_id>’);

});

4. App developer should move focus on active elements (i.e. activeElement) in order to

enable focus.

If ad is focused and an ‘Enter Key’ is pressed, call to action will be performed.

Customize Ad Markup:

It's possible to customise look and feel of Native In-Feed and Native - Content Stream ads as

your per application theme.

You can use definition for below "css classes" in your app; additionally you can also use

placement_id to use "css specificity" order.

Banner

Icon vmax_banner_icon

Title vmax_banner_title

CTA Button vmax_banner_btn

Billboard

Title vmax_billboard_title

Icon vmax_billboard_icon

Image vmax_custom_imagemain

CTA Button vmax_btn_billboard

Examples:

Page 9: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

1. Using simple class name

.vmax_banner_btn {border: 1px solid #999; color: #FFF;

background: #333;}

2. Using class name with placement_id

#unique_ad_5 .vmax_billboard_title {color: #666; font-

weight: bold;}

+ Not applicable for Native In-Feed (banner) and Native Content Stream (billboard) ad-formats.

Auto Refresh Ad:

Use the below attribute to enable automatic ad refresh after ‘x’ seconds. In below case ad will

automatically keep on refreshing itself after every 30 seconds.

<ins class="adsbyvmax" id="[ENTER-UNIQUE-PLACEMENT-HERE]" data-

adspot-key="[ENTER-ADSPOTKEY-HERE]" data-refresh-

after=”30”></ins>

+ Applicable only for Native In-Feed (banner) and Native Content Stream (billboard) ad-formats.

Pushing Keyword:

Use the below attribute to add keyword data that you want JioAds SDK to record.

<ins class="adsbyJioAds" id="[ENTER-UNIQUE-PLACEMENT-HERE]"

data-adspot-key="[ENTER-ADSPOTKEY-HERE]" data-

setKeyword=’{“date”, “today”}’></ins>

Click and Close Ad:

The JioAds SDk will attach click and close events on ‘SoftLeft’ and ‘SoftRight’ keys by default.

Page 10: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

+ Not applicable for Native In-Feed (banner) and Native Content Stream (billboard) ad-formats.

Page 11: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Supported Ad Formats

Currently supported Ad formats are as below:

● Native Ads

○ Interstitial Native Ads

○ Interstitial Native Video Ads with Interstitial Native End Card

○ Native In-Feed (Banner)

○ Native Content Stream (Billboard)

● VAST Ads

○ In-Stream Video Ads

○ Rewarded Video Ads

Page 12: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

APPENDIX A

Below events callbacks can overridden by developers as per their app requirements

Event Object Definition

VMAX Events {

onAdError(placementId, errorObject),

onAdReady(placementId, adUXType),

onAdClose(placementId),

onAdClick(placementId, boolean),

onAdMediaStart(placementId, boolean),

onAdMediaEnd(placementId, boolean, rewardPoints),

onAdRefresh(placementId, boolean),

onAdSkippable(placementId, boolean)

}

JioAds Ad Event Callback List

Callback Values

onAdError Fires when error occurs (Eg: while requesting ad/Caching/Showing)

onAdReady Fires when ad is ready to show (Applicable for all ad formats)

onAdClose Fires on closing the ad (Applicable only for Interstitial)

onAdClick Fires when user interact (Click) with the ad

onAdMediaStart Fires when media play started. (Applicable only for VAST Videos i.e. Interstitial and Pre-roll)

onAdMediaEnd Fires when media ends (Applicable only for VAST Videos i.e. Native Interstitial,Rewarded video and Pre-roll Ads)

onAdRefresh Fires on refreshing the ad (Applicable only for Banner and Billboard)

onAdSkippable Fired for zones where delay timer set or from start of the ad when delay is not set.Verification of onAdSkippable callback [if configured] for video ads.

Page 13: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

VMAX.onVMAPReady Fires when VMAP URL is ready (Applicable for VMAP)

Attributes that can be set under <ins> tag

Attributes for <ins> Values

id Any unique string, without space, for the page

data-adspot-key Adspot key. You can find either in step 3 or in adspot listing page under ID:

data-source App identifier in which you are integrating

JioAds SDK

data-idfa Device IFA/IDFA value

data-all-campaigns 0 - Only telco targeted campaigns will be delivered 1 - All campaigns will be delivered if set to 1

data-refresh-after Refresh the ad after x seconds.

style To be used to apply style / css for ad placement block Eg: text-decoration: none;

Ad View Setting: Keyword data with respect to the adspot; put your App / Page relevant info

data-setSectionCategory Section category of the site. Eg: Headline, Article, Breaking News, Cart, Wishlist

Eg: data-setSectionCategory="12abc"

data-setLanguageOfArticle Language code in ISO

Eg: data-setlanguageOfArticle="Hindi"

data-sim SDK integration Method(sim) used to detect if a iframe(3) or non- iframe(4) approach is implemented. Example: data-sim="frame(3)/noframe(4)"

data-setPageCategory Page category of the site Eg: data-setPageCategory="eng"

data-setKeyword Set Keyword; key:value pair

Page 14: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Eg: data-setKeyword="12abc"

data-setCustomData Custom data in key/value pair JSON format.

Eg: data-setCustomData='{"key1": "Some key value to be sent",

"key2": "Some key2 value to be

sent"}'

Global Ad Settings

Push keyword data to JioAds SDK; put your app and user relevant info; data will be injected and

will be applicable for subsequent cacheAd call.

VmaxUserData Object Definition:

VmaxUserData Methods {

setLoginId(“<login_id_string>”),

setAge(“<age_string>”),

setEmail(“<email_address>”),

setCity(“<city_name>”),

setGender(“<gender_initial>”),

setCustomData(‘<key_value_pair_json>’)

}

VmaxUserData API Details and Examples

setLoginId One can set login id of User Eg: VmaxUserData.setLoginId("mylogini

d");

setAge One can set age of the user

Eg: VmaxUserData.setAge("28");

setEmail One can set email address of the user Eg: VmaxUserData.setEmail("myemail@ya

hoo.com");

setCity One can set user’s current city Eg: VmaxUserData.setCity("Mumbai");

setGender One can set gender of the user

Page 15: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Eg: VmaxUserData.setGender("M");

setPincode One can set the Pincode of the user Eg. VmaxUserData.setPincode("400067")

;

setCustomData One can set users custom data in key/value pair valid JSON format. Eg: VmaxUserData.setCustomData('{"key

1": "Some key value to be sent",

"key2": "Some key2 value to be

sent"}')

Page 16: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

APPENDIX B

Rendition precedence for Native Interstitial Ad Markup

Rendition precedence for Native Interstitial ad-format will be followed in below order:

1. Video element will take priority among all; after video play native interstitial experience

will be shown (similar to end-card) to an end user.

2. Best fit image will be delivered; if any of additional creative element is present (i.e.

240x260)

3. Ad template with any of below available elements:

Icon, Title, Image, Description, CTA from the native json response

a. Ad template image 1200x627; if specified image is present

b. Ad template image 300x250; if specified image is present

Rendition for Native In-Feed

Native elements used for rendition are as below:

● Icon

● Title

● CTA Button

Rendition for Native Content Stream

Native elements used for rendition are as below:

● Icon

● Title

● CTA Button

● Image

Delivering XML Ad Markup

KaiOS SDK has ability to deliver VAST XML Ad Markup for VAST Videos directly, which can be

fed to VAST enabled video player. All events should be handled by app developer.

This call should be used in conjunction with VMAX.cacheAd; if ad is available in cache then it

will deliver the respective VAST XML in the string format else returns null.

VMAX.cacheAd(placementId);

VMAX.onAdReady = function(pId, adUXType) {

var xmlString = VMAX.getAdMarkup(pId);

// Your code goes here

}

Page 17: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

+ Applicable only for In-stream Videos ad-formats.

Page 18: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

APPENDIX C

Error Object for onAdError

You can update your onAdError interface to provide error details by adding Error Object

Parameter.

/**

* Method will be invoked if, Error occured.

* @param {string} placementId - Unique Placement Id for

reference.

* @param {Object} errorObject - Error object returned by Ad

SDK.

*/

VMAX.onAdError(placementId, errorObject) {

console.log(placementId, errorObject);

}

Sample: ErrorObject

{

placementId: "unique_ad_5",

ErrorCode: "1008",

ErrorDescription: "Network error"

}

ErrorCode Event Object

Error Code Error Description

1001 No Fill

1002 Ad request not allowed

1004 Request Timeout

Page 19: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

1006 SDK initialization error

1008 Network error

1009 Mandatory params missing

1010 Rendition error

1011 Parsing error / VAST not parsed

1012 Unknown error

Using adUXType - Callback Parameter (Only applicable for

Interstitial)

Developer can get to know “adUXType” for ad being served; while cacheAd is invoked and ad is

ready to show callback “onAdReady” can return value of adUXType.

Below code snippet exemplify usage of onAdReady with adUXType

VMAX.onAdReady = function(pId, adUXType) {

console.log('Callback onAdReady...', pId, adUXType);

// Use adUXType further in the expressions

};

Parameter adUXType can have one of below value:

● native

● native-image

● native-video

● video

● audio

● html

● image

Using variable Bit-Rate for Audio Ads

VAST XML for audio ad can have media files of multiple bit rates. You need to set a specific bitrate for placement Id. Incase, Audio VAST/DAAST do not contain specified bitrate then it will

Page 20: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

play audio file that has immediate lower bit-rate; if lower bit-rate audio file is not available then, it will play immediate higher bit-rate file.

Below code snippet exemplify usage of setting bit-rate for placement ‘pId’ where ‘bitRateVal’ is integer of bit-rate value to be set.

VMAX.setRequestedBitRate(pId, bitRateVal);

Using Full-Screen Experience

Developer should enable Full-Screen Experience; only if KaiOS App is launched in the

FullScreen Mode. It should be enclosed within on DOMContentLoaded event of app after SDK

is Ready. If not used you could get UX related issues.

Below code snippet will enable configuration to be used with Full-Screen Apps:

VMAX.setFullScreenMode();

Using Full-Screen Experience for In-Stream Ad Format

In-stream always run inside the container specified by the app developer. It tries and fit width of

the Video Ad Player to the width of the container and height in proportion to width.

If developer tries to occupy full-width of the container and video is fullscreen (i.e. 240x320

transcoded to landscape) it will visually give full-screen experience in the landscape mode.

Below interface can be used in conjunction with above to create matching UX and full-screen

action handler experience depending on configuration.

VMAX.enableActionIcons();

Apply Below CSS rules and upload video of appropriate size:

body {

margin: 0;

padding 0;

}

Page 21: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Setting Video view rotation and Ad timer for In-Stream Ad Format

The JioAds SDK allows the developer to rotate the video view and hiding/showing the Ad timer

over the video. These APIs should be used after the placement’s

Below interface can be used in conjunction with above to create matching UX and experience

depending on configuration.

VMAX.rotateInstreamVideo('placement id', Boolean); //Rotates

the default video view to left landscape, Boolean to be set

to true and when unset to be false, by default the video is

is vertical view.

Apply the below API before :

body {

margin: 0;

padding 0;

}

Identify Device Type

App developer must invoke permission for “feature-detection” via app manifest to use this

feature.

"permissions": {

"feature-detection" : {}

},

Spatial Navigation

App developer must invoke permission for management of “spatial navigation” via app manifest

to use spatial-navigation feature for Google ADX. This will enable .

Page 22: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

"permissions": {

"spatialnavigation-app-manage":{},

},

API setNIVideoControlsVisibility

This API Interface setNIVideoControlsVisibility to control visibility of bottom bar for

Video in case of Native Interstitial ad format. It takes boolean true or false as an argument to

either show or hide video control visibility respectively.

VMAX.setNIVideoControlsVisibility(<boolean>);

+All other formats should not be impacted with this api call.

Customizing Native Ads (Native Banner / Billboard)

KaiOSSDK will render native ad in its default layout. Developer can further extend the rendition

and create a customized experience.

Developer can access native elements via data-native-element.

Eg: <span data-native-element="title"></span>

Example layout

<ins id="[ENTER_UNIQUE_ID]" class="adsbyvmax" data-adspot-

key="[ADSPOT_KEY]">

<div id="vmax_page" style=”display:none;”>

<div data-native-element="title"></div>

<div data-native-element ="ctaText"></div>

<div>

<img data-native-element ="customImage" >

</div>

Page 23: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

<div class="header">

<div class="more" data-native-element ="desc"></div>

<div><img data-native-element ="mainImage"></div>

</div>

</div>

</ins>

Note:

● If the Ad has no Custom Markup detected inside <ins> tag; it will render the default

layout for either “Native In-feed” or “Native Content Stream” whatever is applicable. For

more details see Banner and Billboard.

● It is absolutely mandatory to wrap all elements inside html tag and apply css to hide

them. i.e. style=”display:none;”

● It is mandatory to use <div> tag to render text elements and <img> tag to render image

elements i.e. imageIcon, customImage

● To register click event on the entire ad, SDK will wrap the layout within a container which

will be click-enabled i.e anchor tag (if applicable).

● To ensure that the custom layout is properly filled, it is expected that the developer

would set all required ad elements as mandatory at adspot level.

List of Native Elements

Element Class Values

title native_c_title Text for Title. Max 30 chars.

ctaText native_c_btn_txt Text for Call To Action.

desc native_c_desc Description. Max 90 chars.

desc2 native_c_tagline Tagline for ad

rating native_c_rating Rating for app.

downloads native_c_downloads Download count for app.

price native_c_price Price in the default format.

imageIcon native_c_icon Url for image icon. Dimension: 80x80.

Page 24: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

imageMain native_c_imagemain Url for image. Dimension: IAB.

sponsored native_c_sponsored Sponsored text

likes native_c_like like

salePrice native_c_saleprice Price in USD after discount.

phone native_c_phone Phone number.

address native_c_address Address.

customImage native_c_customimage Custom image

Requesting VMAP

The IAB Video Multiple Ad Playlist (VMAP) specification is an XML template that video content

owners can use to describe the structure for ad inventory insertion. In order to effectively

monetize video content with in-stream insertion advertising, video content owners must carefully

manage the structure and use of ad inventory opportunities available within their content.

With VMAP, video content creators can define the following:

● Ad breaks within their content

● Timing for each break

● How many breaks are available

VMAP was designed to be used in conjunction with VAST and is well-suited for video content

creators who have no control over the video player, but want to control the ad experience within

the videos. This method of ad scheduling is supported via VAST of the JW Player.

Requesting VMAP through JioAds SDK

● Sample INS Tag for VMAP

● Fetch VMAP URL - fetchVMAPURL

● Callback onVMAPReady

Sample INS Tag for VMAP

<ins class="adsbyvmax" id="[placementId]"

data-vmap-id="[VMAP-Id from the Jio dashboard]"

data-video-duration="[Enter-Video-duration-of-the-video-

content]"

Page 25: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

data-video-player="JWPlayer" // Content Video Player

data-source="[ENTER-PACKAGE-NAME/APP-IDENTIFIER]"></ins>

Fetch VMAP URL SAMPLE - fetchVMAPURL

Use the below code snippet to fetch VMAP URL:

New interface fetchVMAPURL to be called while developer needs VMAP URL and playback will

be handled by them.

/**

* New interface VMAP URL is ready.

* @param {string} placementId - Ad placement id.

*/

VMAX.fetchVMAPURL(placementId);

Callback onVMAPReady

Callback onVMAPReady will be invoked while VMAP details are ready to be sent and

VMAPObject.getVMAPURL will return URL which is to be used as VMAP URL.

/**

* Callback onVMAPReady will be invoked while VMAP details is

ready.

* @param {string} placementId - Ad placement id.

* @param {object} VMAPObject - VMAP Object

*/

VMAX.onVMAPReady = function(placementId, VMAPObject) {

var url = VMAPObject.getVMAPURL();

};

Enabling Geolocation

Enabling location from the App:

Page 26: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

To target specific location enriched campaigns, the developer needs to invoke the below API

interface in addition to appropriate permissions.

When this API is invoked explicitly, the geolocation metrics are fetched from the platform and

sent in the consecutive Ad requests. Fetching the location values are dependent on the

permission granted by the user.

VmaxUserData.fetchLocation();

App Permissions

"permissions": {

"geolocation": {

"description" : "Used to locate me"

}

}

Enabling location Manually :

This API is to be used if the app already has metrics for location, once set by the developer the

geolocation metrics are stored and sent in the consecutive Ad requests.

VmaxUserData.setLocation ();

Eg. VmaxUserData.setLocation ({

latitude:12.3,

longitude:31.3,

accuracy:1313,

timestamp:1223242// in milliseconds

})

Page 27: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Requesting Ad Duration

Use the below API to request the video ads of specific duration in seconds.

This API is only available for In-stream videos.

VMAX.setRequestedAdDuration(placementId, time_in_seconds);

// placementId - PlacementId for Ins Tag

// time_in_seconds - Ad Break Duration in seconds

Below callbacks are supported for Ad Break

1. VMAX.onAdReady(placementId, adUXType),

2. VMAX.onAdClose(placementId),

3. VMAX.onAdClick(placementId, boolean),

4. VMAX.onAdMediaStart(placementId, boolean),

5. VMAX.onAdMediaEnd(placementId, boolean),

6. VMAX.onAdError(placementId, errorObject),

Note: Any input which is less than or equal to 2 seconds will be ignored.

Using APIs of Ad Break for External Player

The SDK exposes the Ad Media URL and APIs to enable Event Tracking for inStream Ad Break;

So that app developer can use external player to render Content as well as Ads to have smooth

Ad Experience for the end-user.

Prerequisite

1. App developer will call API “setRequestedAdDuration”

2. Configure Custom Ad Break Rendition using new API “setCustomAdBreakRendition”

3. Invoke “cacheAd” interface

4. Once Ad Media Object is ready SDK will send callback registered with config Object

(Custom Renderer).

5. Use APIs to get Metadata from Ad Media Object - AD IS READY TO BE PLAYED

ANYTIME!

6. Call respective Ad Interfaces for tracking on appropriate events / event callbacks

7. Developer call “adClose” API to intimate Ad SDK while playback is done

Page 28: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

Setting Ad Break Duration

Must be called before VMAX.cacheAd

/**

* @param {String} placementId - Ad Placement Id

* @param {Number} adbreakDuration - Ad Break Duration in seconds

**/

VMAX.setRequestedAdDuration(placementId, adbreakDuration);

Viewability

● videoContainerId node must exist in the same document context as KaiOS SDK.

● AD SDK will call respective Viewability Events basis event notification received from

custom player via appropriate Event Interfaces.

Other APIs

API VMAX.closeAd

You must use below API to close Ad Break; which will ensure garbage collection of states or

event tracking set during custom playback.

/**

* @param {String} placementId - Ad Placement Id

**/

VMAX.closeAd(placementId);

API VMAX.updateAdbreakDuration

This API can be only used for Integration without External Players. This interface can be used to

automatically pass the control to an Ad SDK to auto-close Ad Break after a specified time.

/**

* @param {String} placementId - Ad Placement Id

* @param {Number} adbreakDuration - Ad Break Duration in seconds

Page 29: :: DASHBOARD - JioAds SDK for KaiOSJioAds SDK for KaiOS 4 Step 1: Download the SDK 4 Step 2: Install the Plugin 4 Step 3: Integrate using the Plugin 5 Requesting Ads: 5 Native Interstitial

**/

VMAX.updateAdbreakDuration(placementId, adbreakDuration);

Must call this API before “VMAX.showAd”; which will only update timer and will not update ads

already in cache. Hence production ad may cut while playing.