This component is not maintained by the Origami team.

While this component may be used, it is not supported directly by the Origami team. We make no guarantees about the support status, though we will help you if we can.

o-ads

Advertising

active

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>



</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>
Bower Dependencies
ftdomdelegate ^2.0.3
o-viewport >=1.5.0 < 4
o-grid ^4.0.0
o-visual-effects ^2.0.0
o-colors ^4.0.0
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-ads@^9.5.1

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-ads"@"^9.5.1"

For more information see the Origami build process.