Standalone Ad

Learn how to create additional content monetization opportunities.

In combination with other OpenWeb engagement products, a Standalone Ad enables you to customize ad opportunities and augment the revenue potential of your content:

  • Create new high-profile ad opportunities of any dimensions
  • Display video and display ads
  • Enforce brand safety
  • Maintain site speed


Requirements

  • Before adding this product to your content, contact your OpenWeb PSM to set up a monetization campaign for your implementation.
  • Standalone Ad requires a space with a minimum width of 300px.


Implementation Options

OpenWeb provides you several approaches to add a Standalone Unit to your site. Each is listed in the following table.

ApproachDescription
StandardEnables manually choosing the location of the Standalone Ad
Dynamic Ad InsertionEnables choosing one or more name <div> elements to use for monetization
AMPEnables adding a Standalone Ad to an AMP page

Standard

When using this implementation method, you can choose the location where the Standalone Ad appears on a page.

To add a Standalone Ad, use the following steps:

  1. Add the Standalone Ad launcher code to the page. Be sure to replace the SPOT_ID placeholder.

    📘

    Since placing the launcher code higher in the page improves ad performance, we recommend adding the following launcher code as high in the page as possible, including in the <head> of a page.

    If you already have an OpenWeb product on the page, the launcher already exists on the page. You do not need to add a separate launcher code or change the existing one. Skip to step 3.

<script 
    async 
    src="https://launcher-sa.spot.im/spot/SPOT_ID"
    data-spotim-module="spotim-launcher"
    data-spotim-autorun="false">
</script>
  1. Replace the SPOT_ID placeholder.
  2. Add the Standalone Ad <div> in a desired page location. Placing the Standalone Ad above the fold of the page is recommended. If you would like to add multiple Standalone Ads to a page, contact your PSM for assistance.
LocationCode
Homepage<div data-openweb-ad="" data-row="1" data-column="1" data-page-type="independent_ad_hp">
Other<div data-openweb-ad data-row="1" data-column="1"></div>

Dynamic Ad Insertion

When using this implementation method, you can choose one or more named <div> elements to use for monetization.

To add a Standalone Ad, use the following steps:

  1. Add the Standalone Ad launcher code to the page. Be sure to replace the SPOT_ID placeholder.

    📘

    Since placing the launcher code higher in the page improves ad performance, we recommend adding the following launcher code as high in the page as possible, including in the <head> of a page.

    If you already have an OpenWeb product on the page, the launcher already exists on the page. You do not need to add a separate launcher code or change the existing one. Skip to step 3.


<script 
    async 
    src="https://launcher-sa.spot.im/spot/SPOT_ID"
    data-spotim-autorun="false"
    data-spotim-module="spotim-launcher">
</script>

  1. Replace the SPOT_ID placeholder.
  2. Define a named <div> in which the ad will serve.
  3. Provide the named <div> information to your PSM.

AMP

When using this implementation method, you can choose the location where Standalone Ad appears on a page.

To add a Standalone Ad, use the following step:

  1. Add the following code in the location where the Standalone Ad should appear.
<amp-layout layout="responsive" width="0" height="0">
</amp-layout> 
<a data-spmark="ad-choice" href="https://dynamic-cdn.spot.im/yad/optout.html" target="_blank">
  <amp-img src="https://publisher-assets.spot.im/yad/ad-choises.png" width="9px" height="9px">
  </amp-img>
</a>
<amp-list width="auto" height="1" layout="fixed-height" items="items" style="text-align:center" src="https://api-2-0.spot.im/v1.0.0/owa-gw/spot/SPOT_ID/amp/recirculation">
  <template type="amp-mustache">
    {{#isDisplay}}
    <amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-slot="{{ code }}" json='{"targeting":{"ampRCSpotId":["SPOT_ID"]}}' rtc-config='{"vendors":{"IndexExchange":{"SITE_ID":site_id}},"timeoutMillis":1000}'>
      <div placeholder="">
      </div>
      <div fallback="">
      </div>
    </amp-ad>
    {{/isDisplay}}{{#isAniviewVideo}}
    <amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-playonview="1" data-pauseonunseen="1" data-publisherid="5e0e296628a061270b21ccab" data-channelid="{{code}}" data-ref1="AV_CDIM1=SPOT_ID&AV_SCHAIN=1.0,1!spotim.market,{{seller_id}},1,,," data-passbackurl="https://play.aniview.com/57b31584f83f1518108b4568/5e71193539e7c102b4435af3/spotimpassback.js">
    </amp-ad>
    {{/isAniviewVideo}}{{#isSRVideo}}
    <amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-blade_player_type="{{type}}" data-blade_player_id="{{code}}" data-blade_api_key="587dfc37febaab0002000001" data-blade_macros="{"sub_id":"spotId=SPOT_ID&source=recirculation_amp"}">
    </amp-ad>
    {{/isSRVideo}}
  </template>
</amp-list>
<amp-layout layout="responsive" width="0" height="0">
</amp-layout>
  1. Replace the SPOT_ID placeholder.
  2. Replace the SITE_ID with value with the value provided by your OpenWeb PSM.


Disabling Ads in OpenWeb

🚧

Partners should only use these methods to block ads during takeovers or sponsorships.


Implementation

OpenWeb offers two approaches to prevent OpenWeb ads from loading on articles: meta tag and JavaScript. Both methods are explained below.

Approach Description
Meta Tag Prevents OpenWeb ads from appearing on a specific page on page load

In the head of the page before the launcher code, add the following meta element.

<meta name="spotim-ads" content="disable-all" />
JavaScript Disables ads after loading the page based on certain conditions or user interactions

After a certain condition or user interaction occurs, call the following JavaScript code.


window.__SPOTIM_ADS_DISABLED__ = true;
window.__SPOTIM_DISABLE_ADS__ && window.__SPOTIM_DISABLE_ADS__();



Validation

After implementing the code to disable ads in OpenWeb, you can use the validate ads are properly blocked.

  1. While on a page with the code to disable ads in OpenWeb, open the browser console.
  2. At the prompt, enter the code for the implementation method used.
    Boolean(document.querySelector('meta[name=spotim-ads][content=disable-all]'));
    
    Boolean(window.__SPOTIM_DISABLE_ADS__);
    
    • If the console returns the value true, ads are disabled.
    • If the console returns the value false, ads are enabled and the code implementation should be reviewed.