<script type="text/javascript" src="https://campaigns-assets-vp.daumcdn.net/websdk/vp-latest.min.js"></script>Visit https://www.valuepotion.com/apps and create an app. Then you will be given a clientId. You need that value to initialize the Web SDK.
VP.init({clientId: "xxx"});Parameters for init.
| key | value | type | required |
|---|---|---|---|
| clientId | clientId of the app | string | true |
VP.init({
clientId: "xxx"
});If you have any problem with integrating ads, please contact support@valuepotion.com.
VP.ad(divId, placement, placementWidth, placementHeight, opts);Create an empty element(ex> div), put its id and the Web SDK will load an ad in it.
Ad will be formed as an iframe element and inserted into the element of the id as a child element.
This is a string to distinguish placements where ads display. When you request ads on a certain placement, Valuepotion will automatically detect it in up-to 10 minutes. After that, visit https://www.valuepotion.com/publishers/ad_network_settings/placements and configure settings of ad placements. If you want to display ads to both non-paying users and paying users, just turn on the both checkboxes. About 3 minutes later, you'll be able to see ads on your page.
This means the size of ads to display. Valuepotion supports the following sizes which is a part of standard sizes guided by IAB.
| size |
|---|
| 120x600 |
| 160x600 |
| 200x200 |
| 300x250 |
| 300x600 |
| 320x50 |
| 320x100 |
| 336x280 |
| 468x60 |
| 728x90 |
| 970x90 |
If you want Native Ads dedicated to your service, please contact support@valuepotion.com.
You can omit opts like the following.
VP.ad(divId, placement, placementWidth, placementHeight);You can put forceWidth, hideIframeDuringLoad, callback in opts.
When you want to fully fill the area horizontally, you can do the following.
VP.ad(divId, placement, placementWidth, placementHeight, {forceWidth: "100%"});With the code above, width of iframe will be 100% and remaining area other than 320px will be filled with color of (1, 1) pixel.
If you set hideIframeDuringLoad as true, iframe will be not taking up space during load of ad (default: false).
If you assign a function at callback, the callback function will be executed with the information whether ad is filled or not.
When ad displayed is a text ad, you can define styles at textAdStyle.
var opts = {
callback: function (filled) {
if (filled) {
console.log("ad loaded");
} else {
console.log("no ad");
}
},
textAdStyle: {
"color": "red",
"font-size": "28px",
"font-weight": "bold"
}
}
VP.ad(divId, placement, placementWidth, placementHeight, opts);If you serve video contents and want to put pre-roll, mid-roll or post-roll In-stream Video Ad on your video contents, please refer to this section.
You can use this function only when you use videojs.
VP.videoAd(videoElementId, placement, opts);With the code above, video ad will be attached to the already existing video element.
You can define opts like the following.
| key | value | required | default | | test | Whether or not to display test ads (Boolean) | false | false |
If you want to use full screen interstitial ad, use the following function.
VP.interstitial(placement, opts);opts can be omitted.
VP.interstitial(placement);You can put background or callback in opts.
-
background : Size of interstitial ad is 320x480 and will be located at the center of screen. There will be remaining space and you can specify the color of the space. By default, this Web SDK uses
rgba(0, 0, 0, 0.7). You can put values like#000000orrgba(x, x, x, x). -
callback : You can specify callback function.
opts = {
background: "rgba(0, 0, 0, 0.8)",
callback: function (filled) {
if (filled) {
console.log("ad loaded");
} else {
console.log("no ad");
}
}
}
VP.interstitial(placement, opts);VP.track(params);or
VP.track(params, callback);callback will be executed after sending event to Valuepotion.
VP.track({action: "click_share_button"});or
VP.track({
category: "ui",
action: "click_share_button",
label: "viewer"
})or
VP.track({
category: "ui",
action: "vote",
label: "article-03",
value: 4
})VP.track({
action: "purchase_with_coupon",
revenueAmount: 1,
currency: "USD",
orderId: "xxxxxx",
productId: "xxxxxx"
});You can also put a callback function.
VP.track({
action: "purchase_with_coupon",
revenueAmount: 1,
currency: "USD",
orderId: "xxxxxx",
productId: "xxxxxx"
}, function () {
console.log("purchase done!");
});You can specify user information that can be used to create cohorts. Everything is optional.
VP.setUserAccountType("xxx");
VP.setUserBirth("yyyyMMdd");
VP.setUserFriends(32);
VP.setUserGender("M" or "F");
VP.setUserId("xxx");
VP.setUserLevel(12);
VP.setUserServerId("xxx");If you have a WebView inside your app and want to load this Web SDK inside the WebView, please contact support@valuepotion.com.
You may not be able to see ads when you test in domains like localhost or *.herokuapp.com.
In that case, please put pageUrl parameter to specify your real domain like the following.
VP.init({
clientId: "xxx",
pageUrl: "http://abc.com"
});However, for better efficiency of ads, you must remove that parameter before deployment.
When pageUrl not set, Valuepotion Web SDK gets the url of the current content by location.href, sends it to Valuepotion Ad server and Valuepotion Ad server will analyze the page to choose best ads.
If location.href doesn't represent the real url of the page, for example if ad area is wrapped by iframe, please put real content url at pageUrl so that Valuepotion can analyze correct page.
thanks for my web