Origami Frontend Components & Services

Demos: o-ads active

o-ads is not maintained by the Origami team. While this component may be used, we make no guarantees about the support status, though we will help if we can.

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



</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": true,
		"gpt": {
			"network": 5887,
			"site": "test.5887.origami"
		},
		"dfp_targeting": {
			"pos": "top"
		},
		"krux": {
			"id": "KHUSeE3x"
		}
	}
</script>
<script async id="moat-ivt" src="https://sejs.moatads.com/financialtimesprebidheader859796398452/yi.js"></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>
Switch component view

GitHub Repository

Install o-ads

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

If running a Manual Build, run bower install --save "o-ads@^10.0.1".

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