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:

let owAd = new OwAd(  
  document.getElementById("ad-div"),   // a single ad container in the ad block level container.
  {  
    size: { width: 400, height: 600 },  //the size of the original ad container. Changes dynamically when high impact ads are displayed.
    enableHighImpact: true  
  }  
);
  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. Open your app, then open the developer console (Ctrl + Shift + I).
  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.