Getting started

The most simple and basic usage of this library can be done by adding a few lines of code into your app window’s HTML file:

<div id="ad-div"></div>
<script src="http://content.overwolf.com/libs/ads/1/owads.min.js" async onload="onOwAdReady()"></script>
<script>function onOwAdReady(){new OwAd(document.getElementById("ad-div"))}</script>

This code snippet does the following:

  1. Adds a div to your page with the id ad-div
  2. Loads the Overwolf ads SDK library from Overwolf’s CDN
  3. When the script is loaded properly, creating a new OwAd instance that will tell the script to fetch an ad. The HTML element passed on to this constructor will then be used to display the ad itself

Changes to your app’s manifest.json

The Overwolf Ads Libs uses some Overwolf APIs to improve ad targeting for users. Therefore you should add the following permissions to your app’s manifest.json file:

"permissions": [
         "Extensions",
         "Streaming",
         "Profile",
         "GameInfo"
     ]

Also, in order to get impression tracking to work well, you would also need to enable a work-around that allows requests to Google’s syndication servers. This is done by setting "protocol_override_domains" : {"googlesyndication" : "http"}, under the manifest.json “data” property:

"data": {    
    "protocol_override_domains" : {"googlesyndication" : "http"}
    }

Notes regarding the snippet above:

  • As you can see, the script tag is added with an async attribute. This means that the script is loaded asynchronously and will not interfere with your app or slow down it’s loading time. The downside for this is that the script may take time to load and be ready, and may not be immediately available after being included. To overcome this, we are using the onload attribute and providing it with the name of a function to be called when the script has finished loading. In the above example it is called onOwAdReady.
  • When calling a new OwAd() we provide it with a DOM element. In this example we are getting the instance of the element by calling document.getElementById. However, you may use any other way to get the DOM element. You may use document.querySelector,  jQuery or any other framework you wish. It will work as long as the provided element is an HTML element, and is available at the DOM. If the element does not have an ID, it will automatically be assigned with one.

General Note:

  • Ads will be served to your app only after Overwolf enables it, so please contact us at developers@overwolf.com when your app is ready to show ads.