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.

This version of o-ads hasn't been branded yet. Please check the latest version, 18.0.0, as branding is a relatively new addition to our components.

Individual-Ad

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

Responsive-Ad

<script data-o-ads-config type="application/json">
{
	"gpt": {
		"network": 5887,
		"site": "test.5887.origami"
	}
}
</script>
<div data-o-ads-name="responsive" data-o-ads-formats="Responsive"></div>

Individual-Ad-Lazy-Load

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

Individual-Ad-Lazy-Load-Margin

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

Individual-Ad-with-Custom-Targeting-Values

<script async id="moat-ivt" src="https://sejs.moatads.com/financialtimesprebidheader859796398452/yi.js"></script>
<script data-o-ads-config type="application/json">
	{
		"targetingApi": {
			"user": "https://ads-api.ft.com/v1/user",
			"page": "https://ads-api.ft.com/v1/content/047b1294-75a9-11e6-b60a-de4532d5ea35"
		},
		"gpt": {
			"network": 5887,
			"site": "test.5887.origami"
		},
		"dfp_targeting": {
			"pos": "top"
		},
    "krux": {
      "id": "KHUSeE3x"
    },
    "validateAdsTraffic": true
	}
</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

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

Responsive-Positions

<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"></div>
<div data-o-ads-name="responsive-2" data-o-ads-formats-large="HalfPage" data-o-ads-formats-small="MediumRectangle"></div>

Native-Ads

<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%409.3.0%3A%2Fdemos%2Fsrc%2Fdemo.js"></script>
<script src="//registry.origami.ft.com/embedapi?autoload=resize"></script>
</div>

Multiple-Next-Styles

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

Validate-Traffic-Ad

<script data-o-ads-config type="application/json">
	{
		"targetingApi": {
			"user": "https://ads-api.ft.com/v1/user",
			"page": "https://ads-api.ft.com/v1/content/047b1294-75a9-11e6-b60a-de4532d5ea35"
    },
    "validateAdsTraffic": "http://local.ft.com:3002/v1/validate-traffic",
		"gpt": {
			"network": 5887,
			"site": "test.5887.origami"
		},
		"dfp_targeting": {
			"pos": "top"
		},
    "krux": {
      "id": "KHUSeE3x"
    }
	}
</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="leaderboard" data-o-ads-formats="Leaderboard"></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>
Support Status
active
Switch component view

GitHub Repository

Install o-ads

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

If running a Manual Build, run bower install --save "o-ads@^9.3.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