Skip to main content

Managing Ads

The Ads object

Calling a new OwAd() will return a javascript object which you can use to control the displayed ad.

To prevent ads being called but not shown, use removeAd() on minimizing/hiding and refreshAd() on restoring.

Functions

This object has the following functions you can call on-demand:

FunctionDescription
removeAdRemoves current ad from the DOM
refreshAdRefreshes ad and loads a new one
Note that this will cause the ad to scroll into view if not already visible

Notes

When calling a new OwAd(), please do not use refreshAd(). On minimizing/hiding an OW window with Ads, no need to delete or destroy the owAd object.
Instead, call the removeAd() method.
When the window is restored, call the same owAd instance’s refreshAd() method.

Events

You can use Overwolf ad objects created by calling new OwAd()) to listen to events related to the displayed ad. Registering an event can be done by calling the function addEventListener on the ad object. Like other libraries, the first parameter sent to addEventListener is the name of the event, and the second is a handler function for the event.

The following events are supported:

Event NameFired When
player_loadedAd video player successfully loaded on page*
display_ad_loadedDisplay ad was served instead of a video ad
playAd started playing / Display ad presented
impressionVideo “impression” – Depends on the advertiser, the impression event gets triggered after 0-6 seconds *
completeVideo ad played fully until completed *
errorError occurred while trying to load ad *

* Only relevant for video ads

Showing multiple ads

If you wish to show more than one ad on 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.

Checking the window state change

To check when the window is minimized or restored, you can use the overwolf.windows.onStateChanged event.

Note that the onStateChanged event is being fired for all the declared windows listening to this event (background, in-game, desktop, etc.). Make sure to test the window name/id arguments that are passed to the event to see if the window with the Ad Is the window that triggered the state change.

Otherwise, you might end up with unnecessary wrong calls to the refreshAd() and removeAd().

In-game windows with Ads

As we mentioned above, when you change a window state (minimize, hide, restore), the onStateChanged event is fired. But that is not the case if you minimize the GAME WINDOW itself, Alt+Tab from it, use Win+D to minimize all your open apps, or even click outside of the windowed game.

When your game window loses focus, the in-game window state inside it will not change, and the onStateChanged event will not be fired.

That means if your in-game window contains an Ad, and the containing GAME WINDOW is minimized/restored, you will not be able to know when to call removeAd() and refreshAd().

If you want to handle that scenario, you can listen to onGameInfoUpdated event and stop the ad if gameInfo.isInFocus is false, and refresh it when gameInfo.isInFocus changes to true. (note that LoL might have different behavior, so double-check it).

Ads Type Definitions

Type definitions for the OwAd class and the various interfaces it uses can be found at our types github. Import this file to your app to get autocompletion and type inference with the OwAd.

Sample code for handling ads with minimized/restored window

// define the event handler
function onWindowStateChanged(state) {
console.log(`Window state changed: ${JSON.stringify(state)}`);

if(state) {
// when state changes to minimized, call removeAd()
if (state.window_state === "minimized") {
owAdInstance.removeAd();
}
// when state changes from minimized to normal, call refreshAd()
else if(state.window_previous_state === "minimized" && state.window_state === "normal"){
owAdInstance.refreshAd();
}
}
}

// call the overwolf api
overwolf.windows.onStateChanged.removeListener(onWindowStateChanged);
overwolf.windows.onStateChanged.addListener(onWindowStateChanged);