On this page:

• Overview
• Hardcoding method
• Adserved into GAM
• Adserved into AppNexus, Smart AdServer and others
• Technical restrictions

Overview

Teads worked closely with Google on the AMP Project, sharing our unique expertise in outstream video.

Our inRead player can be integrated within AMP (Accelerated Mobile Pages) environments by either hardcoding our tag within an <amp-ad> element, or through ad servers such as GAM via a conventional script. AMP pages provide users with a better mobile experience, as pages are mobile optimized for faster loading times and easier navigation. 

This is the result of:

• Layout pre-calculation before page loading.

• Access to the Google AMP cache.

• Asynchronous loading of all <scripts>.

Analyses show that AMP pages have, on average, a completion rate 15% higher, a click through rate 200% higher, and increase available inventory by 18% in comparison to mobile web.

Hardcoding method

As we are fully integrated with Google AMP, the Teads AMP tag has the following format when hardcoded:

<amp-ad
width=300
height=1
type="teads"
data-pid="PAGE_ID"
layout="responsive">
</amp-ad>

The only parameter to update is the data-pid="PAGE_ID" field.

AMP Script Parameters:

• width & height = format size – FIXED

• type = "teads" = AMP ID – FIXED

• data-pid = PAGE ID (PID) – MODIFIABLE

• layout = "responsive" = Responsive Template – FIXED

In order to center the player in landscape mode, add the following CSS parameters to the AMP CSS container (amp-custom) :

amp-ad[type="teads"] { margin: auto }

Ad served into GAM

Just like with the hard coding method, you just have to paste the following tag: 

<script type="text/javascript" class="teads" async="true" 
src="//a.teads.tv/page/PAGE_ID/tag"></script>

The only parameter to update is the PAGE_ID section.

Add the following CSS parameter to the AMP CSS container amp:

amp-ad { margin: auto }

The AMP ad-unit should be a 300x1 or a 300x250:

• If the AMP ad-unit serving Teads is a 300x1, use the following parameters:

  • inventory > settings  > sizes  = 300x1

  • orders > line items settings  > inventory sizes = 300x1

  • creatives > settings > target ad unit size = 300x1

    Tag example:

    <amp-ad
    width=300
    height=1
    type="doubleclick"
    data-slot="/example/directory"
    layout="responsive">
    </amp-ad>

• If the AMP ad-unit serving Teads is a 300x250. We must have a 300x250 Passback in place, otherwise, we will leave a 300x250 whitespace behind on a Teads noAd response. In case of Passback:
  • Other sizes can be used but the recommended size with Passback is 300x250,
  • Teads accepts JavaScript Passbacks only,
  • Only compliant AMP ad servers can be used as a Passback.

<amp-consent id="ABC">
  <script type="application/json">
    {
      ...
      "exposesTcfApi": true
      ...
    }
  </script>
</amp-consent>

Ad served into AppNexus, Smart AdServer and others

Just like with the hard coding method, you just have to paste the following tag: 

<script type="text/javascript">
function getAMPiFrame(w) {
      if (w.context && w.context.renderStart) {
          return w
      } else {
          return getAMPiFrame(w.parent)
      }
}

(function (w, p) {
      w._teads_amp = {};
      var js, s = w.document.getElementsByTagName('script')[0];
      js = w.document.createElement('script');
      js.className = 'teads';
      js.async = true;
      js.type = 'text/javascript';
      js.src = '//a.teads.tv/page/' + p + '/tag';
      s.parentNode.insertBefore(js, s);
})(getAMPiFrame(window), PAGE_ID);
</script>

The only parameter to update is the PAGE_ID section.

You should use the following parameters in their ad server manager:

• inventory > settings  > sizes  = 300x1
• orders > line items  settings  > inventory sizes = 300x1
• creatives > settings > target ad unit size = 300x1

AppNexus tag Example:

<amp-ad
width=300
height=1
type="appnexus"
data-code="XXXXX"
data-member="XXXXXXX"
layout="responsive">
</amp-ad>

Technical restrictions

The “amp-ad” component is an iframe inside which Teads can execute codes. This iframe is completely isolated from the publisher page. As a result, Teads has absolutely no access to the publisher content which creates several technical restrictions outlined below:

Slot definition

One of the limits within an AMP environment is the effective sandboxing of all iFrames. This means we are unable to dynamically select the best location for our player and it is up to you, as a publisher, to insert the <amp-ad> element in the correct location on the page where the inRead player should be initialized.

Setting the tag at the right place in the page is crucial for your campaign correct delivery.
AMP blocks the resizing of elements when above the fold (when the user already reached it).

It is problematic on our case because the Teads player starts closed and gets open once we find an ad to display (other partners just let a blank slot open in case of no ad).
If the user gets to the slot quickly, before the ad retrieval process (player still closed), we won't be able to open the player because AMP is blocking it.
This will result in a visual glitch, a 1px loading bar animation.

In order to avoid this limitation, we advise to set the Teads slot down in the page.
This will let more time to retrieve an ad and open the player before the user has reached it.

Fixed dimension

The amp-ad component dimensions are fixed, and must not be modified. The result of this is that the open and collapse animations are not applied: the format will always display at 100% size before the user has scrolled to the slot.

A user can close the player by clicking on the close button and our format will disappear. However, the AMP container (SafeFrame) will not collapse and the AMP container will remain leaving behind white space. This is to keep the article content in place, maintaining accordance with the AMP initiative. 

We recommend running AMP ads without a close button as this will remove the possibility of a User closing the Teads ad leaving white space behind.

Important Settings 

• Only the inRead video landscape and inRead video Square format is available for AMP. No Vertical ads are possible.
• The player doesn't use the open & collapse animations
• The player will always display at 100% size
• There is no full-screen mode
• The audio is muted from the start