Instructions on how to create interactive ads by integrating your codes into OpenAD Protocol.
Ad rendering and user interaction will notify publishers and/or advertisers upon request. This feature is suitable for providing traditional gaming incentive scenarios to publisher TMAs, such as extra lives for ad viewing.
Interactive ads will be presented in full screen, ads will be displayed for a certain time, and the number of impressions is calculated by CPM.
OpenAD will notify publishers of ad display events,
adResourceLoad, indicates load ad resource from OpenAD platform, false will be returned if there is no resource to be loaded for the publisher slot/zone,
adOpening, indicates the interactive ad is opening,
adOpened, indicates the interactive ad is opened,
adTaskFinished, indicates the interactive ad task is finished, the task is defined by advertiser,
adClosing, indicates the interactive ad is closing,
adClosed, indicates the interactive ad is closed.
adClick, indicates clicked and jumps.
This document provides instructions on how to use OpenAD js SDK to create interactive ads on PC (Desktop Web App), Mobile H5 (Mobile Web App), and TMA (Telegram Mini App).
Step #1. Load SDK
Load the SDK in the body of html, the code is as follows:
The script will pick OpenAD node for your end users, and load proper version of OpenAD SDK for you.
Step #2. Init OpenAD resource for interactive ad
The interactive ads shall be init manually.
Please follow the guideline to add the following js code.
/* ... */
// Create a params object
const adParams = {
version: 'your-app-version', // your app version if there is no data, please leave it blank
TG: true, // If it is required for Telegram TMA application, and the value is true.
};
// Create an adInfo object
const adInfo = {
zoneId : 159, // example zoneId, please check your own code parameters
publisherId: 49, // example publisherId, please check your own code parameters
eventId : 0, // Reserved Parameter
};
// Create a userInfo object. Regardless of whether the user is logged in to your application or not, the following parameters must be send to SDK.
const userInfo = {
// Please add reasonable user IDs for your end users.
// Otherwise, OpenAD statistics may be inaccurate
// which may affect your incentives
userId: string, // user Id, Telegram TMA please leave it blank, webApp if there is no data, please leave it blank
firstName: string, // firstName or userId, Telegram TMA please leave it blank, webApp if there is no data, please leave it blank
lastName: string, // lastName or userId, Telegram TMA please leave it blank, webApp if there is no data, please leave it blank
userName: string, // username or userId, Telegram TMA please leave it blank, webApp if there is no data, please leave it blank
walletType: string, // user wallet type: TON / EVM / TRON / other blockchain project names, if there is no data, please leave it blank
walletAddress: string, // user wallet address, if there is no data, please leave it blank
};
/* ... */
// init/load OpenAD resource manually
window.openADJsSDK.interactive.init({ adParams, adInfo, userInfo }).then(res => {
if(res.code === 0){
// you can callback 'getRender' function, user can load an interactive ad;
}else{
// you can't callback 'getRender' function, user can't load an interactive ad;
}
});
Step #3. Get Ad And Render
// Create a callback object
// view AD steps is [1,2,3,5,6,7], click steps is [1,2,3,6,7,5,4]
const callbackFunc = {
// Indicates load ad resource from OpenAD platform, false will be returned if there is no resource to be loaded for the publisher slot/zone
adResourceLoad: (e) => {
// 'step1', e = ture / false
},
// Indicates the interactive ad is opening
adOpening: (e) => {
// 'step2', e = ture / false
},
// Indicates the interactive ad is opened,
adOpened: (e) => {
// 'step3', e = ture / false
},
// indicates the interactive ad task is finished, the task is defined by publisher
adTaskFinished: (e) => {
// 'step5', e = viewAD / click / close
},
// Indicates the interactive ad is closing
adClosing: (e) => {
// 'step6', e = viewAD / click / close
},
// Indicates the interactive ad is closed
adClosed: (e) => {
// 'step7', e = viewAD / click / close
// If you want to perform different steps based on different shutdown states, please write the code here.
},
// Indicates clicked and jumps
adClick: (e) => {
// 'step4', e = ture / false
},
};
// Call SDK method to get advertising and render data
window.openADJsSDK.interactive.getRender({ adInfo, cb: callbackFunc });
Notices
After executing the init method, determine whether to continue executing the getRender method based on the status of res.code!
Please pay attention to your page flow design, there may be res.code !== 0. In the case of res.code === 0, please execute the getRender method as soon as possible. The data is time-sensitive. After the timeout, the ad delivery will be invalid.
There are 7 callback methods for calling the getRender method, which can be called on demand!
The client must re-execute the init method every time to determine whether the AD can be loaded. Otherwise, the data statistics will only take effect once, and multiple repeated impressions cannot be counted!!!
