Ads SDK API Overview
The Ads SDK works by creating simple, Managed Ads Containers, which are then controlled by the SDK, with minimal intervention from the app.
Creating a Managed Ads Container
- Overwolf Platform
- Overwolf Electron
The app must first set up the Ads SDK. This will then define the OwAd
variable,
which can then be instantiated. Instantiating an OwAd
will link it to a specific DOM element,
which will then become a Managed Ads Container.
If you wish to show more than one ad in your app, you can easily do so by creating multiple instances
of OwAd
. Just make sure you pass a different container element for each instance,
and that you properly comply with our acceptable Ads policy.
Setting up the Ads SDK
In order to use the Ads SDK within an Overwolf app, you must first fetch it from a constant endpoint - https://content.overwolf.com/libs/ads/latest/owads.min.js
.
Attached is a short example snippet that fetches the SDK, as well as setting up a basic OwAd
instance:
<script src="https://content.overwolf.com/libs/ads/latest/owads.min.js" async onerror="onAdsSDKNotLoaded()" onload="onAdsSDKReady()"></script>
<script>
// Reached if the SDK's script failed to load (took too long, couldn't be found, etc)
function onAdsSDKNotLoaded() {
// If this happens, it is up to the app to decide how to proceed.
console.error("Couldn't load owads.min.js!");
}
function onAdsSDKReady() {
if (!OwAd) {
// Reached if the SDK's script failed to properly load.
// If this happens, it is up to the app to decide how to proceed.
// onAdsSDKNotLoaded();
return;
}
// Reached if the script loaded properly.
// You can now create however many ad containers you need for this window, granted that they follow the implementation guidelines.
let adContainer = new OwAd(document.getElementById(/*Insert ad container Id here*/), {/*Mandatory Ad settings*/});
}
</script>
Notes regarding the snippet above
-
As you can see, the script tag is added with an
async
attribute. This is because the script should be loaded asynchronously, so that it will not interfere with the rest of the page's loading. The downside to this approach, is that the script may take time to load and be ready.
To overcome this, you should use theonload
andonerror
callbacks from the script tag, to be notified as soon as the load succeeded/failed. -
When creating a new
OwAd
, we provide it with two parameters: A DOM element, and the required Ad settings. In this example we are getting the instance of the element by callingdocument.getElementById()
. However, you may use any other way to get the DOM element. You may usedocument.querySelector
, jQuery, or any other method you wish - as long as the provided element is an HTML element available at the DOM, it will work.
If the Ad container did not already have an element ID defined, it will automatically be assigned one.
Changes to your app’s manifest.json file
Required permissions
The Overwolf Advertising library uses Overwolf APIs to improve ad targeting for users. Therefore, you need to add the following permissions to your app’s permissions array:
"permissions": ["Extensions", "Streaming", "Profile", "GameInfo"]
The Ads SDK comes built into the ow-electron package. As such, the app only needs
to create an <owadview/>
component, which then acts as a managed Ad container.
If you wish to show more than one ad in your app, you can easily do so by creating multiple instances
of the <owadview/>
component. Just make sure that you properly comply with our acceptable Ads policy.