OpenWrap now supports delivering ads in the popular open-source AMP webpage format. The sections below describe the three-step process for supporting AMP in OpenWrap.
- Set Up an OpenWrap Profile for AMP
- Configure an <amp-ad> Tag to Use OpenWrap
- Deploying Ads to Your AMP Pages
1. Set Up an OpenWrap Profile for AMP
a. From the main navigation select, Inventory > OpenWrap.
b. Switch to the Profile Management tab, then choose, Create Profile.
c. Enter a Profile Name , set Platform to AMP, then set AdServer to DFP if it's not already set to that value.
d. Select the Partners that apply to this profile. PubMatic appears by default. Find specific partners by entering some or all of a partner name in the Search field. Select partners from the list on the left to add them to the selected partners list on the right.
e. Select Done to save your completed partners list.
2. Configure an <amp-ad> Tag to Use OpenWrap
a. Choose a profile from the Select a profile drop-down list.
b. Copy the code from the editable portion of the Document Layout section .
c. Paste the code into the <body> section of your relevant pages or tag management solution. See section, 3. Deploying Ads to Your AMP Pages.
3. Deploying Ads to Your AMP Pages
You have a couple of methods for adding ads to your AMP pages. Both methods use the <amp-ad> tag to insert an ad. The User Sync method uses an additional <amp-iframe> tag to sync a user cookie. The following sections describe each method:
- User Sync With An <amp-iframe>
- Multiple Slot Sizes Using <amp-ad>
User Sync With An <amp-iframe>
Use this method to add an ad to your AMP page when you want to sync with a user cookie on the client side.
Sample HTML
Insert an initial <amp-ad> tag block within the HTML <body> block to initialize the ad slot (BEGIN AD to END AD below). Follow it with an <amp-iframe> block to sync the cookie (USER SYNC to END USER SYNC below).
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here */
body {
background-color: lightblue;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
.overlay{
display: none;
}
</style>
</head>
<body>
<h1>BEGIN AD</h1>
<amp-ad data-slot="/15671365/AMP_Hack" height="250" type="doubleclick" width="300" rtc-config='{
"vendors": {
"openwrap": {
"PROFILE_ID" : "[profile_id]",
"PUB_ID" : "[publisher_id]"
}
},
"timeoutMillis": 1050
}'>
</amp-ad>
<h1>END AD</h1>
<h2>BEGIN USER SYNC</h2>
<amp-iframe width="1" title="User Sync"
height="1"
sandbox="allow-same-origin allow-forms allow-scripts"
frameborder="0" src="https://ebay.com/LibPages/load-cookie.html?pubid=310&profid=5680&bidders=appnexus,audienceNetwork,pubmatic">
<amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img>
</amp-iframe>
<h2>END USER SYNC</h2>
</body>
</html>
Multiple Slot Sizes Using <amp-ad>
Use this method to support different sizes of ads on your AMP page using the <amp-ad> tag.
Sample HTML
Insert an initial <amp-ad> tag block in the HTML <body> block to initialize the ad slot (BEGIN AD to END AD below). Follow it with another <amp-ad> block to specify multi-size ads (BEGIN MULTI-SIZE-SLOT to END MULTI-SIZE-SLOT below).
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here */
body {
background-color: lightblue;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
.overlay{
display: none;
}
</style>
</head>
<body>
<h1>BEGIN AD</h1>
<amp-ad data-slot="/15671365/AMP_Hack" height="250" type="doubleclick" width="300" rtc-config='{
"vendors": {
"openwrap": {
"PROFILE_ID" : "593",
"PUB_ID" : "5890"
}
},
"timeoutMillis": 1050
}'>
</amp-ad>
<h1>END AD</h1>
<h2>BEGIN MULTI-SIZE-SLOT</h2>
<amp-ad data-slot="/15671365/AMPDemo" height="300"
data-multi-size="300x250,200x200"
type="doubleclick" width="300" rtc-config='{
"vendors": {
"openwrap": {
"PROFILE_ID" : "593",
"PUB_ID" : "5890"
}
},
"timeoutMillis": 1000
}'>
</amp-ad>
<h2>END MULTI-SIZE-SLOT</h2>
</body>
</html>