The script will pick OpenAD node for your end users, and load proper version of OpenAD SDK for you.
Step #2. Add DOM placeholder for Ad banner
<body>
<!-- code before banner -->
<div class="openADJsSDKBanner #your_style_class"
publisherld="49"
zoneld="158">
</div>
<!-- code after banner -->
</body>
zoneld="1", 1 is a demo zoneld, please use your own "zoneId" publisherld="56", 56 is a demo publisherld, please use your own "publisherld" feel free to define your own banner style
OpenAD SDK will get ad banner for your end users and has it rendered in the DOM placeholder.
In traditional web applications, you can see OpenAD banner been rendered.
!!! OpenAD only support ONE DOM placeholder in one web page.
Enjoy the OpenAD ecosystem !!!
Step #3. Init OpenAD Resource
In most SPA (single page application) web frameworks, DOM objects are rendered dynamically. Thus, the ad banner shall be init manually, the init js call will render ad banners to predefined DOM placeholder.
Please follow the guideline to add the following js code.
Please organize the data according to the following 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 : 158, // 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.bridge.init({ adParams, adInfo, userInfo });
/* ... */
Explicit Call Functions
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.
2. Get Ad Info
// // Ad resource object structure, banner
// resource = {
// type : 'banner',
// resource_url : string, // resource url
// width : int, // resource width
// height : int, // resource height
// resource_id : int // resource ID
//};
// Create userInfo and adParams object,
// which should be sent to the SDK to identify a logged in user.
// for detail, please view 'Step #3'.
const adParams = {...}
const userInfo = {...}
// Create an adInfo object
const adInfo = {
zoneId : 158, // example zoneId, please check your own code parameters
publisherId: 49, // example publisherId, please check your own code parameters
eventId : 0, // Reserved Parameter
};
// Call SDK method to get advertising data
const res = await window.openADJsSDK.bridge.get({ adParams, userInfo, adInfo });
if ( res.code === 0 ) {
const resource = res.data;
// After getting the data, you can render it on the page
// you can add multiple ad banners
}else{
// We recommend not throwing an error
}
3. Log User View
When the page loads the ad resources and users can see the ads, please execute the following SDK method.
const res = await window.openADJsSDK.bridge.log(adInfo);
if ( res.code === 0 ) {
// Callback log info successful
}else{
// We recommend not throwing an error
}
4. Log User Click
When users click on the ad, please execute the following SDK method:
window.openADJsSDK.bridge.click(adInfo);
SDK will open a new app by the above function;
No Callback, if you want to do sth, you should use yourself functions or methods;
