Home > Header Bidding Platform > English > Monetization of AMP pages > AMP Guide 

AMP Guide 

Guide contents / What’s in this guide? 

  1. What is AMP technology?
  2. Why is it essential? 
  3. AMP and digital advertising 
  4. Adtelligent and AMP solutions 
  5. AMP Integration Instructions (Creating a Channel -> Creating a Source -> Connecting Adtelligent Marketplace -> Creating codes for AMP placement)

What is AMP technology?

AMP stands for Accelerated Mobile Pages and was created to improve the usability of the mobile pages. AMP pages restrict HTML/CSS and JavaScript in order to render mobile pages faster. In a nutshell, it is a simplified version of the main website based on the open-source HTML framework that is cached by Google. 

Why is it essential? 

Mobile traffic has already outnumbered the desktop one and according to the numerous studies this tendency is only going to expand in the upcoming years. Under such circumstances, UX becomes a number one priority; companies cannot afford issues during the load of mobile web pages. By implementing AMP, brands can achieve the following targets: 

  • Increase in web traffic 
  • Avoid the issues with slow internet connection 
  • Improve user experience
  • Attract new revenue streams 

AMP and digital advertising 

In the realm of digital advertising AMP is both beneficial and problematic. It helps with conversion rates and attracting new customers, but staggers the content loading and perpetuates under-monetization; there could also be some difficulties with the restricted number of demand partners, cookies syncing and manual adding/removing vendors from the ad list. To squeeze the maximum benefits from the AMP integrations, publishers should:  

  • Ensure the density of ads is sufficient through AMP as well as non-AMP pages
  • Constantly maintain ads views directed to the AMP pages
  • Estimate opportunities with video ads in AMP
  • Discover the RTC* opportunities to enhance the AMP benefits

*RTC stands for Real-Time Config and permits calls for bid requests to 5 different vendors in 1 second as maximum. Upon that, RTC analyzes the bids and communicates the winner to the server. Publishers can also easily set up RTC with just a few lines of code to deal with vendors they prefer.

Adtelligent and AMP solutions 

Adtelligent has developed the necessary tools to enrich AMP functionalities with Header Bidding Wrapper. This is the only way to overcome the AMP limitations and enable adding as many demand partners as needed. Using a header bidding wrapper requires the RTC framework to boost bids and thereby increase competition among demand partners. Fast Fetching is another great feature that allows selecting ad requests from the content and rendering AMP pages only when they are most likely to be viewed by users. Fast Fetching tackles latency, improves viewability, and enhances user experience. In addition, Adtelligent has been able to resolve cookie-syncing issues and as a result, our customers enjoy a smooth transfer of the data between the platforms.

AMP Integration Instructions 

Integrating AMP is easy following our guidelines. You only require four steps:

  1. Creating a Channel 
  2. Creating a Source
  3. Connecting Adtelligent Marketplace 
  4. Creating codes for AMP placement

1. Creating a Channel

You can start by creating a separate channel for each site/publisher according to your management needs:

Go to Channels (1) tab -> Click on the “New Channel” (2) button;

Steps for the new channel setup for AMP integration: 

  1. Enter the Channel Name (1), for example: “AMP for google.com”;
  2. Enter the Channel Description (2). It is an optional field for your convenience;
  3. Enter the Client’s revshare (3);
  4. Set the block list by App names (4) - leave empty;
  5. Set the block list by Bundle Ids (5) - leave empty;
  6. Set the block list by Domains (6) - leave empty ;
  7. AdOps billed (7) - leave empty;
  8. Sellers.json behaviour (8) - pass sellers.json without changes;
  9. API access (9) - here you can provide your publisher with API access to the channel's statistics;
  10. Click on the “Save” (10) button;

2. Creating a Source 

After the channel is created we can proceed to the next step which is creating the source. AMP integration supports only one size in the request. Each ad unit that will go live requires a separate source. 

  1. Click on the “New Source” (1) button; 
  2. Enter the Source Name (2) - for example: “google_AMP_300x250”;
  3. Enter the Source Description (3). It is an optional field for your convenience;
  4. Type of integration (4) - Tag based; 
  5. Environment (5) - Desktop; 
  6. Tag type (6) - Display; 
  7. Display Video Arbitrage (7) - leave empty; 
  8. Sensitive Supply (8) - disabled; 
  9. Enter the source pricing (9). Recommended: Floor price 0.01$;
  10.  Click on the Save (10) button. 

3. Connecting Adtelligent Marketplace 

This step is aimed at those interested in connecting Adtelligent Marketplace to AMP traffic. In this case one should create an Advertiser and a Campaign.

Creating an Advertiser:  

  1. Proceed to Advertiser’s tab and click on the “New Advertiser” (1) button; 
  2. Enter the Advertiser’s name (2) , for example: “Adtelligent Marketplace”; 
  3. Enter the Advertiser’s description (3). It is an optional field for your convenience; 
  4. Global block lists (4) - leave empty; 
  5. Click on the “Create” (5) button.

Creating a Campaign: 

  1. Click on the “New campaign” (1) button; 
  2. Enter the campaign name (2) , for example: “Adtelligent Marketplace”;
  3. Integration type (3) - open RTB; 
  4. Sensitive Demand (4) - disabled; 
  5. Endpoint URL (5) - enter the endpoint received from Adtelligent team;
  6. All other settings - without changes.

After the above mentioned steps you will be able to connect the campaign to your sources in the Source’s settings → Align Demand tab:

Please note that you can use only open RTB demand for AMP integration. 

4. Creating codes for AMP placement

The last step in the AMP integration journey involves creating codes. It consists of two parts: code for AMP Placement and cookie-syncing code. Both should be implemented in the <body> section of the page.

Let’s create a sample of the code for AMP placement. For example, you have a placement in GAM for AMP connection with the next configurations:
Domain: example.com 

Ad unit name: Publisher1_example.com_AMP
Size: 300x250
Publisher’s GAM network ID: 1111111
Source: 576871

Additional sizes (msizes): 300x600,300x50 (should be listed without commas)

The AMP Placement code is:
 

<amp-ad width="300" height="250"
type="doubleclick"
data-slot="/1111111/Publisher1_example.com_AMP"
rtc-config='{
      "urls": [
            "https://ghb.adtelligent.com/amp/?aid=576871&domain=example.com&w=300&h=250&network_code=1111111&msizes=300x600,300x50”
                 ],
            "timeoutMillis": 1000}'>
</amp-ad>

Where:

<amp-ad width="slotWidth" height="slotHeight"
type="doubleclick"
data-slot="/networkid/adUnit_name"
rtc-config='{
            "urls": [
                "https://ghb.adtelligent.com/amp/?aid=source_id&domain=domain&w=slotWidth&h=slotHeight&network_code=networkid&msizes=additionalSizes”
            ],
            "timeoutMillis": 1000}'>
</amp-ad>


Cookie sync code template: 

<!-- code in <head> section -->
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

<!—code in <body> section-->
<amp-iframe width="1" title="User Sync" 
      height="1"
      sandbox="allow-scripts allow-same-origin"
      frameborder="0"
      src="https://s.adtelligent.com/sync.js?aid=sourceid"> 
      <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img> 
</amp-iframe>


For source 576871 cookie sync code is: 

<!-- code in <head> section -->
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

<!—code in <body> section-->
<amp-iframe width="1" title="User Sync"
      height="1"
      sandbox="allow-scripts allow-same-origin"
      frameborder="0"
      src="https://s.adtelligent.com/sync.js?aid=576871">
      <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="  placeholder></amp-img>
</amp-iframe>

As you can see, AMP is not difficult to implement. This technology is already crucial for any business that wants to cover the mobile web market, and the demand for the proper cross-device data handling will only grow in the future. In order to keep up and make user experience as smooth as possible, AMP integration is a must. 

Updated: