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 zone (parent 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 the entire ad zone (parent container) (<div>) of your app's layout.
• Responsive size—adapts to your ad zone (parent container) dynamically.
• Ad event lifecycle—integrate with event listeners to manage UI transitions.

Requirements and implementation details

• Minimum ad zone (parent container) (<div>) of 440x670px. An ad zone (parent container) may contain one or more individual ad containers.

important

• The size of the ad zone (parent container) (<div>) is dynamic and can be changed when an event is received.
• If the ad zone (parent container) (<div>) is smaller than 440x670 px, the high impact ad will not render correctly.

• The rendered height of the high impact ad is responsive and will occupy the entire height of the ad zone (parent container (<div>).
• The rendered width of the high impact ad isn't responsive and is fixed at 440px.
• Make sure the enableHighImpact: true flag is added to only one ad container in an ad zone (parent container) (<div>) .
• If you have multiple ad containers in your ad zone (parent container), or other HTML elements, you must remove them. Use event listeners to restore your standard ads.

Enabling high impact ads

To enable High impact ads:

1. Select any one of your ad containers in your ad zone (parent 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>

2. 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 elements inside the ad zone (parent container) except the ad container with the enableHighImpact: true flag. After removing these elements, the high-impact ad will expand to fill the ad zone’s (parent container) full size.
   • On high-impact-ad-removed:
     • Restore the previously removed ad containers (and any other HTML elements) within the ad zone (parent container). Restoring these elements allows the ad waterfall to resume and display standard ads after the high-impact ad.

Events table

Event name	Description
high-impact-ad-loaded	Triggered when a High Impact creative is loaded.
high-impact-ad-removed	Triggered 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.