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, 13.4.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>

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

Test-Ad

<script data-o-ads-config="" type="application/json">
	{
		"gpt": {
			"network": 5887,
			"site": "test.5887.origami"
		},
		"dfp_targeting": {
			"testparam": "hello"
		}
	}
</script>
<div data-o-ads-name="test-slot" data-o-ads-formats="MediumRectangle,Rectangle,WideSkyscraper,Leaderboard,SuperLeaderboard,HalfPage,Billboard,Portrait,AdhesionBanner,MicroBar,Button2,Responsive" data-o-ads-targeting="pos=top;"></div>

Test-Ad-Responsive

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

O-ads-embed

Test o-ads-embed

<div data-o-ads-name="top" data-o-ads-targeting="pos=top;" data-o-ads-center="true" data-o-ads-formats-default="Billboard" data-o-ads-formats-small="Billboard" data-o-ads-formats-medium="Leaderboard,Responsive" data-o-ads-formats-large="SuperLeaderboard,Leaderboard,Responsive" data-o-ads-formats-extra="Billboard,SuperLeaderboard,Leaderboard,Responsive" data-sticky-ad="true" aria-hidden="true" data-o-ads-loaded="Billboard">
		<div class="o-ads__outer">
			<div class="o-ads__inner">
				<div style="border: 0pt none;">
					<iframe title="Advertisement" src="http://localhost:8999/demos/local/Local-Creative-Wrapper.html" width="300" height="300">
					</iframe>
				</div>
			</div>
		</div>
	</div>

<div data-o-ads-name="mid" data-o-ads-targeting="pos=mid;" data-o-ads-center="true" data-o-ads-formats-default="Billboard" data-o-ads-formats-small="Billboard" data-o-ads-formats-medium="Leaderboard,Responsive" data-o-ads-formats-large="SuperLeaderboard,Leaderboard,Responsive" data-o-ads-formats-extra="Billboard,SuperLeaderboard,Leaderboard,Responsive" data-sticky-ad="true" aria-hidden="true" data-o-ads-loaded="Billboard">
		<div class="o-ads__outer">
			<div class="o-ads__inner">
				<div style="border: 0pt none;">
					<iframe title="Advertisement" src="http://localhost:8999/demos/local/Local-Creative-Wrapper-With-Collapse.html" width="300" height="300">
					</iframe>
				</div>
			</div>
		</div>
	</div>

InfiniteScrolling-Ad

Infinite Scrolling

<script data-o-ads-config="" type="application/json">
	{
		"gpt": {
			"network": 5887,
			"site": "test.5887.origami",
			"zone": ""
		},
		"lazyLoad": {
			"viewportMargin": "3000px 0px"
		}
	}
</script>
<script>
	let nextSlotId = 0

	// Generate next slot name
	const generateNextSlotName = () =>
		"leaderboard" + ++nextSlotId

	// Create and add fake content
	const addFakeContent = (text) => (parent) => {
		const h2 = document.createElement("H2")
		const textNode = document.createTextNode(text)
		h2.appendChild(textNode)
		parent.appendChild(h2)
	}

	// Create and add an Ad Slot
	const addAdSlot = (slotName, formats) => (parent) => {
		const adSlot = document.createElement('div')
		adSlot.setAttribute('data-o-ads-name', slotName)
		adSlot.setAttribute('data-o-ads-formats', formats)

		parent.appendChild(adSlot)
	}

	const findAdSlotsByName = (slotName) => (parent) =>
		Array.from(parent.querySelectorAll(`div[data-o-ads-name=${slotName}]`)) 

	const initAdSlots = (slots, oAds) =>
		slots.forEach(oAds.slots.initSlot.bind(oAds.slots))

	const createAdSlot = (slotName, formats) => (parentDoc) => {
		addAdSlot(slotName, formats)(parentDoc.body)
		const slots = findAdSlotsByName(slotName)(parentDoc)
		initAdSlots(slots, oAds)
	}

	const moreContent = () => {
		// Generate next slot name
		const slotName = generateNextSlotName()

		// Create a div for the slot
		const slotDiv = document.createElement('div')
		slotDiv.id = slotName // Id must be the same as slotName
		document.body.appendChild(slotDiv)

		// Add some dynamic fake content
		addFakeContent('Dynamic Fake Content 1')(document.body)
		addFakeContent('Dynamic Fake Content 2')(document.body)

		// Create and add the Ad Slot itself
		createAdSlot(slotName, 'Leaderboard')(document)
	}
</script>

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

<!-- Button to load more content dynamically. -->
<button onclick="moreContent()">More Content</button>
Switch component view

GitHub Repository

Install o-ads

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

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

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