Skip to main content

High Impact Ads

High impact ads are bold, attention-grabbing ads designed for maximum visibility. They specifically focus on delivering immersive, interactive content to your users. High impact ads occupy an entire ad block level container (<div>) of the app UI and temporarily hide surrounding content to maximize ad impact. Once the high impact ad has completed, your standard ads will be displayed again.

Key features​

  • High visibility—designed to occupy a full ad block level container (<div>) of your app's layout.
  • Responsive size—adapts to your ad block level container dynamically.
  • Ad event lifecycle—integrate with event listeners to manage UI transitions.

Requirements and implementation details​

  • Minimum ad block level container (<div>) of 440x670px. An ad block level container may contain one or more individual ad containers.
  • The height of the high impact ad is responsive and will occupy the entire height of the ad block level container (<div>).
  • The width isn't responsive and is fixed at 440px.
  • Make sure the enableHighImpact: true flag is added to only one ad container in an ad block level container (<div>) .
  • If you have multiple ad containers in your ad block level container, or other HTML elements, you must remove them. Use event listeners to restore your standard ads (see #2 in Enabling high impact ads).
important

If the minimum ad block level container (<div>) is smaller than 440x670 px, the ad will not render correctly.

Enabling high impact ads​

To enable High impact ads:

  1. Select any one of your ad containers in your ad block level container, and update it with the enableHighImpact: true flag.

Example:

<div id = "ads-container" style="width: 400px; height: 600px; border: 1px solid; background: transparent;" >
  <owadview adstyle='high-impact-ad;'/'>
</div>
  1. Set an event listener to dynamically remove and restore the non-selected ad containers during high impact ad rendering.
    • On high-impact-ad-loaded:
      • Remove all non-selected ad containers (and any other HTML elements) within the ad-level block container. After removing these elements, the high-impact ad will expand to fill the ad block’s full size.
    • On high-impact-ad-removed:
      • Restore the previously removed ad containers (and any other HTML elements) within the ad-level block container. Restoring these elements allows the ad waterfall to resume and display standard ads after the high-impact ad.

Events table​

Event nameDescription
high-impact-ad-loadedTriggered when a High Impact creative is loaded.
high-impact-ad-removedTriggered when the High Impact creative is removed.

How to test High Impact ads​

To test high impact ads:

  1. If your app window was created using webPreferences: {devTools: true}

    1. Use ctrl+Shift+I to enter the console.
    2. Press the Console tab, then paste localStorage.owAdTestAd = true into the console, and press Enter.
    3. Press F5 to refresh the app window.
    4. Ads should appear in your app in the locations you designated.

  2. If you created your own .exe:

    1. Run your app with the --remote-debugging-port=9222 and the --test-ad flags.
    2. Open a browser window and navigate to http://localhost:9222/ to see the debugging console.