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 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.

note
  • High impact ad creatives are not guaranteed and are served only when supported by active demand partner campaigns.
  • High impact ad campaigns may be enabled or disabled dynamically, support for this creative type must always remain enabled on the app side.

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.

Ad zone (parent container)​

Your app will need to have an ad zone (parent container) (<div>). This is an area of your app that is designated for ads. You can add one or more individual ad containers of smaller sizes to the ad zone.

note

The ad zone (parent container) needs to take up the entire height of your app window and stretch dynamically if the app window size changes.

Ad zone Requirements​

  • Minimum ad zone (parent container) (<div>) of 440x670px. In the ad zone (parent container) you can add one or more individual ad containers of smaller sizes.

    • Width—fixed at 440px.
    • Height:
      • Responsive to the app window height.
      • Minimum height: 670px.

  • You must have at least one ad container inside of the ad zone (parent container). For more information, see Ad sizes.

  • If you have multiple ad containers in your ad zone (parent container) ONLY one is eligible for high impact ads.

  • The ad zone (parent container) should stretch vertically with the app window.

    Example css

    #ads-parent {
    width: 440px;
    min-height: 670px;
    height: 100vh; /* or app window height */
    display: flex;
    flex-direction: column;
    }
    important
    • If the ad zone (parent container) (<div>) is smaller than 440x670 px, the high impact ad will not render correctly.

  • 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 and their respective sizes.

Enabling high impact ads​

To enable High impact ads:

  1. Select any one of your ad containers in your ad zone (parent container), and add adstyle="high-impact-ad;".

Example of two ad containers in an ad zone

<div id="ads-parent">

  <div id="ads-container-large" style="width: 400px; height: 600px;">
  <owadview adstyle="high-impact-ad;"></owadview>
  </div>

  <div id="ads-container-small" style="width: 400px; height: 60px;">
  <owadview></owadview>
  </div>

</div>

  1. Set an event listener to dynamically remove the non-selected ad containers when the high-impact-ad-loaded event is received. Change the height and width to 100% so it dynamically fits the ad zone (parent container).
<div id="ads-parent">

  <div id="ads-container-large" style="width: 100%; height: 100%;">
    <owadview adstyle="high-impact-ad;"></owadview>
  </div>

<!-- the small ads-container must be hidden or removed -->

</div>
  1. Set an event listener for the high-impact-ad-removed event and restore the previously removed ad containers (and any other HTML elements) within the ad zone (parent container). Make sure to restore all the ad containers and their original sizes.
<div id="ads-parent">

  <div id="ads-container-large" style="width: 400px; height: 600px;">
  <owadview adstyle="high-impact-ad;"></owadview>
  </div>

  <div id="ads-container-small" style="width: 400px; height: 60px;">
  <owadview></owadview>
  </div>

</div>
Complete Example
<html>

<head>
  <style>
    /* Parent container that holds both ads */
    #ads-parent {
      width: 440px;
      min-height: 670px;
      height: 100vh;
      /* App or viewport height */
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Large ad container – default size */
    #ads-container-large {
      width: 400px;
      height: 600px;
    }

    /* Small ad container – default size */
    #ads-container-small {
      width: 400px;
      height: 60px;
    }

    /* When high-impact is active, the large container fills all space */
    #ads-container-large.high-impact-loaded {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>

  <div id="ads-parent">
    <div id="ads-container-large">
      <!-- High-impact eligible owadview -->
      <owadview id="hi-eligible-webview" adstyle="high-impact-ad;"></owadview>
    </div>

    <div id="ads-container-small">
      <!-- Standard owadview -->
      <owadview></owadview>
    </div>
  </div>

  <script>
    (function () {
      // Cache DOM references once
      const largeContainer = document.getElementById("ads-container-large");
      const smallContainer = document.getElementById("ads-container-small");
      const highImpactWebview = document.getElementById("hi-eligible-webview");

      // Store parent so the small ad can be restored later
      let smallContainerParent = smallContainer.parentNode;


      function onHighImpactLoaded() {
        // Expand the large container
        largeContainer.classList.add("high-impact-loaded");

        // Remove the small ad from the DOM entirely
        if (smallContainer.parentNode) {
          smallContainer.remove();
        }
      }


      function onHighImpactRemoved() {
        // Restore original large container size
        largeContainer.classList.remove("high-impact-loaded");

        // Re-attach the small ad to its original parent
        if (!smallContainer.parentNode) {
          smallContainerParent.appendChild(smallContainer);
        }
      }

      // High-impact state is controlled ONLY by events
      // emitted from the high-impact-eligible owadview

      // Fired when the high-impact ad is fully loaded
      highImpactWebview.addEventListener("high-impact-ad-loaded",onHighImpactLoaded);
      
      // Fired when the high-impact ad is closed or removed
      highImpactWebview.addEventListener("high-impact-ad-removed",onHighImpactRemoved);
    
 	})();
  </script>

</body>

</html>
note

If no High-Impact creative is available, the high-impact-ad-loaded event will never fire, and the app must remain in the default layout without applying any layout changes.

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.