OpenWrap

Expand all   Collapse all

OpenWrap AMP Support

OpenWrap now supports delivering ads in the open-source AMP webpage format. This guide provides the three step process for supporting AMP in OpenWrap.

Summary of steps:

  1. OpenWrap AMP Support#Create an OpenWrap profile
  2. Configure an <amp-ad> tag 
  3. OpenWrap AMP Support#Deploy ads to your AMP pages

DFP is now called, Google Ad Manager (GAM)…

When you see DFP mentioned in this guide, it is referring to GAM. This will be updated in the Publisher UI in an upcoming release.

Create an OpenWrap profile

  1. Login to the PubMatic UI portal with your account credentials. If you're unsure of your account credentials, contact your account manager for assistance.
  2. From the main navigation, select Inventory > OpenWrap > Profile Management. Click Create Profile. 
  3. Enter a Profile Name, select AMP, then choose DFP from the AdServer menu.
  4. Select a Release Version from the menu. The options are:
    • Stable releases go through planned release cycles and testing. 
    • Nightly releases are purpose-oriented versions of PubMatic's wrapper, such as the inclusion of a requested feature or adapter. Nightly releases must be deployed in accordance with our documentation and consultation with a PubMatic solutions engineer, as needed.
  5. Select your partners. PubMatic always appears by default for Partners. If you want to add more partners, select from the list and click Done.


Set the following:

    • The Auction Timeout (ms) is the time in milliseconds that the ad server will wait for a response before the auction times out. Choose a high number (for example, 10,000 ms or more), if you want to wait to load ads until the user has had a chance to interact with the consent management platform during the first visit to your site.
    • Change the Traffic Allocation (%) for your selected partners if you want something lower than the default of 100%.
    • Set the Bid Adjustment (%) for partners that require a revenue share. For example, if a partner charges 15% revenue share, the Bid Adjustment (%) field should be 15. Use a negative number to boost the bid.
    • You need to select a Path for PubMatic. Partners enabled for Server-side support will have all their bids sent via the server-to-server path.

Select Done to save your partners list.  

Consent Management and Send All Bids settings are not currently supported for AMP using OpenWrap.

Configure an <amp-ad> tag

  1. Choose a profile from the Select a profile drop-down list.
  2. Copy the code from the editable portion of the Document Layout section.

            

Deploy ads to your AMP pages

Place the user sync iframe as high up on page as possible, and above the fold.  AMP will only execute the iframe when the portion of the page it is located on is visible. The iframe doesn't show any content, but it won't execute until its location on the page is viewable.  User sync is important for getting full monetization.

You can deploy ads to your AMP pages to support:

  • Single ad slot size

  • Multiple ad slot sizes

For information on placing <amp-ad> tags in AMP pages, see Google AMP and Monetization and AMP documentation.

Single Ad Slot Size

Use this method to support single size ad units on your AMP page.

Sample HTML

  1. Insert an initial <amp-ad> tag block within the HTML <body> block to initialize the ad slot (BEGIN AD to END AD below).
  2. Follow it with an <amp-iframe> tag block to sync the cookie (USER SYNC to END USER SYNC below).

This sample HTML places the user-sync iframe just under the page header to optimize monetization.

The <amp-iframe> tag block is located in the editable portion of the Document Layout section.

Sample HTML 
<!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>
 
    <h2>BEGIN USER SYNC</h2>
 
     <amp-iframe title="User Sync" width=1 height=1
 
        sandbox="allow-same-origin allow-scripts"
 
        frameborder="0"
 
        src="https://ads.pubmatic.com/AdServer/js/pwtSync/load-cookie.html?pubid=156209&profid=1010&bidders=appnexus,pubmatic,districtm,rubicon">
 
        <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img>
 
    </amp-iframe>
 
  
 
    <h2>END USER SYNC</h2>
 
     
 
    <h1>BEGIN AD</h1>
 
    <amp-ad data-slot="/40619304/OW_AMP_300x250" height="250" type="doubleclick" width="300" rtc-config='{
 
        "vendors": {
 
          "openwrap": {
 
            "PROFILE_ID" : "1010",
 
            "PUB_ID" : "156209"
 
          }
 
        },
 
        "timeoutMillis": 1050
 
    }'>
 
    </amp-ad>
 
    <h1>END AD</h1>
 
</body>
 
</html>
 
<amp-iframe class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout" frameborder="0" height="1" i-amphtml-layout="fixed" sandbox="allow-same-origin allow-scripts" src="https://ads.pubmatic.com/AdServer/js/pwtSync/load-cookie.html?pubid=47471&amp;profid=1131&amp;bidders=appnexus,pubmatic,districtm,rubicon" style="width:1px;height:1px;" title="User Sync" width="1" amp-removed="">
 
 <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout amp-hidden" i-amphtml-layout="fill" layout="fill" placeholder="" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
 
 <i-amphtml-scroll-container class="amp-active"></i-amphtml-scroll-container></amp-iframe>


Multiple Ad Slot Sizes

Use this method to support multiple ad slot sizes on your AMP page.

Sample HTML

  1. Insert an initial <amp-ad> tag block in the HTML <body> block to (BEGIN AD to END AD below).
  2. Follow it with another <amp-ad> block to specify multi-size ads (BEGIN MULTI-SIZE-SLOT to END MULTI-SIZE-SLOT below).
Sample HTML 
<!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>

⇧ Top

Do you have feedback on this document? Let us know: email us.

Table of Contents


PubMatic Website 

PubMatic Privacy Policy

All Rights Reserved Copyright 2020

This website uses cookies for analytics and personalization. Click here to learn more or change your cookie settings. By continuing to browse, you agree to our use of cookies.