Open primary navigation
Origami Frontend Components & Services

Demos: o-ads

o-ads is not maintained by the Origami team. This means that the Origami team will not necessarily be able to help you with support requests. The people who maintain this component may be able to offer support, but it's not guaranteed.

o-ads hasn't been branded yet, it only supports the master brand. If you would like to discuss having it branded please get in touch with the Origami team.

Simple ad

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami"
    }
  }
</script>

<div
  data-o-ads-name="leaderboard"
  data-o-ads-formats="Leaderboard"
  style="position: absolute; top: px"
></div>

Lazy loaded ad

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami"
    },
    "lazyLoad": {
      "viewportMargin": "0%"
    }
  }
</script>

<div
  data-o-ads-name="leaderboard"
  data-o-ads-formats="Leaderboard"
  data-o-ads-targeting="pos=top"
  style="position: absolute; width: 970px; height: 90px; top: 2000px"
></div>
<div class="header"><span style="line-height: 100px">header</span></div>
<hr size="1" color="#999" noshade />
<div class="navbar"><span style="line-height: 25px">navbar</span></div>
<hr size="1" color="#999" noshade />
<div class="article-title">
  Apple&apos;s UK price rises blamed on Brexit currency shift
</div>
<div class="article-blurb">
  Buying products in the US cheaper after sharp drop in sterling
</div>

Lazy loaded ad with a margin

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami"
    },
    "lazyLoad": {
      "viewportMargin": "3000px 0px"
    }
  }
</script>

<div
  data-o-ads-name="leaderboard"
  data-o-ads-formats="Leaderboard"
  data-o-ads-targeting="pos=top"
  style="position: absolute; width: 970px; height: 90px; top: 2000px"
></div>
<div class="header"><span style="line-height: 100px">header</span></div>
<hr size="1" color="#999" noshade />
<div class="navbar"><span style="line-height: 25px">navbar</span></div>
<hr size="1" color="#999" noshade />
<div class="article-title">
  Apple&apos;s UK price rises blamed on Brexit currency shift
</div>
<div class="article-blurb">
  Buying products in the US cheaper after sharp drop in sterling
</div>

Ad with custom targeting

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami"
    },
    "targeting": {
      "pos": "top",
      "title": "hello world & goodbye!",
      "slv": "anon",
      "auuid": "sample-id"
    }
  }
</script>

<div
  class="o--if-nojs o-ads o-ads--background o-ads--center o-ads--reserve-90 o-ads--transition"
  data-o-ads-name="billboard"
  data-o-ads-formats="Billboard"
></div>
<div class="header"><span style="line-height: 100px">header</span></div>
<hr size="1" color="#999" noshade />
<div class="navbar"><span style="line-height: 25px">navbar</span></div>
<hr size="1" color="#999" noshade />
<div class="article-title">
  Apple&apos;s UK price rises blamed on Brexit currency shift
</div>
<div class="article-blurb">
  Buying products in the US cheaper after sharp drop in sterling
</div>

Master and Companion Ad

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami",
      "zone": "master-companion-test"
    }
  }
</script>

<div data-o-ads-name="leaderboard" data-o-ads-formats="Leaderboard"></div>
<div data-o-ads-name="rectangle" data-o-ads-formats="MediumRectangle"></div>

Ad with responsive positions

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami"
    },
    "responsive": {
      "large": [600, 0],
      "small": [0, 0]
    },
    "slots": {
      "responsive-1": {
        "sizes": {
          "large": [[728, 90]],
          "small": false
        }
      }
    }
  }
</script>
<div data-o-ads-name="responsive-1">
  At the moment, this demo only works in a separate tab. Press the button above.
</div>
<div
  data-o-ads-name="responsive-2"
  data-o-ads-formats-large="HalfPage"
  data-o-ads-formats-small="MediumRectangle"
></div>

Native ad

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami"
    },
    "formats": {
      "PaidPost": {
        "sizes": "fluid"
      }
    }
  }
</script>

<div class="content">
  <div class="story">Story 1</div>
  <div class="story">Story 2</div>
  <div class="story">Story 3</div>
  <div class="story">Story 4</div>
  <div class="story">
    <div
      data-o-ads-name
      data-o-ads-formats="PaidPost"
      data-o-ads-targeting="pos=midriff;"
    ></div>
  </div>
  <div class="story">Story 5</div>

  <script src="//www.ft.com/__origami/service/build/v2/bundles/js?modules=o-ads%4020.0.0-beta.0%3A%2Fdemos%2Fsrc%2Fdemo.js"></script>
  <script src="//registry.origami.ft.com/embedapi?autoload=resize"></script>
</div>

Native Lazy Loading

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami",
      "enableLazyLoad": {
        "fetchMarginPercent": 300,
        "renderMarginPercent": 200
      }
    }
  }
</script>

<!-- 6 viewport tall div to place next slot 6 viewports away. -->
<div style="height: 600vh"></div>
<div id="div-1">
  <div
    id="example-ad-1"
    data-o-ads-name="leaderboard"
    data-o-ads-targeting="pos=top"
    data-o-ads-formats="Leaderboard"
  ></div>
</div>

<!-- 3 viewport tall div to place next slot 9 viewports away. -->
<div style="height: 300vh"></div>
<div id="div-2">
  <div
    id="example-ad-2"
    data-o-ads-name="mid"
    data-o-ads-targeting="pos=mid"
    data-o-ads-formats="MediumRectangle"
  ></div>
</div>

<!-- 6 viewport tall div to place next slot 15 viewports away. -->
<div style="height: 600vh"></div>
<div id="div-3">
  <div
    id="example-ad-3"
    data-o-ads-name="bill"
    data-o-ads-targeting="pos=mid"
    data-o-ads-formats="Billboard"
  ></div>
</div>

SRA - Single Request Architecture

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami",
      "rendering": "sra"
    }
  }
</script>

<!-- 6 viewport tall div to place next slot 6 viewports away. -->
<div style="height: 600vh"></div>
<div id="div-1">
  <div
    id="example-ad-1"
    data-o-ads-name="leaderboard"
    data-o-ads-targeting="pos=top"
    data-o-ads-formats="Leaderboard"
  ></div>
</div>

<!-- 3 viewport tall div to place next slot 9 viewports away. -->
<div style="height: 300vh"></div>
<div id="div-2">
  <div
    id="example-ad-2"
    data-o-ads-name="mid"
    data-o-ads-targeting="pos=mid"
    data-o-ads-formats="MediumRectangle"
  ></div>
</div>

<!-- 6 viewport tall div to place next slot 15 viewports away. -->
<div style="height: 600vh"></div>
<div id="div-3">
  <div
    id="example-ad-3"
    data-o-ads-name="bill"
    data-o-ads-targeting="pos=mid"
    data-o-ads-formats="Billboard"
  ></div>
</div>

Ad with multiple style for ft.com (next)

Open demo in a new tab 
<script data-o-ads-config type="application/json">
  {
    "gpt": {
      "network": 5887,
      "site": "test.5887.origami"
    }
  }
</script>

<div
  class="o--if-nojs o-ads o-ads--background o-ads--center o-ads--reserve-90 o-ads--transition"
  data-o-ads-name="billboard"
  data-o-ads-formats="Billboard"
></div>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-ads

If using the Build Service, add o-ads@^20.0.0-beta.0 to your script and link tags.

If running a Manual Build, run npm install "o-ads@^20.0.0-beta.0".

Help & Support

o-ads is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:

Slack: #advertising-dev
Email: origami.advertising.technology@ft.com