Submit Request

How To Integrate Sharethrough on Accelerated Mobile Pages (AMP)

What’s an AMP ad?

The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMPdocuments. It fetches AMP HTML pages, caches them, and improves page performance automatically. → Read On For a guide on AMP here: https://www.ampproject.org/learn/overview/

AMP ads load like all other resources in AMP documents, with a special custom element called <amp-ad>. No ad network provided JavaScript is allowed to run inside the AMP document.

Instead, the AMP will load Sharethrough within an iFrame, which executes the ad network’s JS inside that iFrame sandbox.

PLEASE NOTE: The specification of amp-ad will likely significantly evolve over time. The current Sharethrough approach is designed to bootstrap the format to be able to show ads.

Description	A container to display an ad. AMP documents only support ads served via HTTPS.
Availability	Stable
Required Script	<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Examples	amp-ad.html ads.amp.html

How do I set up an AMP page?

Note: In order to integrate an AMP ad on Sharethrough’s platform, you must already have an AMP-powered page enabled.

→ Read On For a guide on how to set up your AMP page, please refer to the following article: https://www.ampproject.org/docs/get_started/create/basic_markup.html

Which creatives are supported within an AMP page?

AMP pages ONLY support the use of our Website Visit Ads (clickouts). The reason is that the AMP tech prevents opening the card experience (both infographics and CTP videos) and playing instant play videos.

Should I create a new placement to exclusively traffic AMP?

While the same placement could be used for both AMP and desktop/mWeb, Sharethrough recommends creating a unique AMP placement.

Styling and layout on AMP HTML pages is very similar to normal HTML pages – in both cases, you'll use CSS. → Read On from AMP official documentation: https://www.ampproject.org/docs/guides/author-develop/responsive_amp

However, AMP ads are rendered inside an iFrame which prevents the Sharethrough placements from inheriting any styling from the site: therefore the templates for AMP placements need to have all styling information included, which is not the case for standard desktop/mWeb placements.

Native Sharethrough ads collapse - will AMPs do the same?

Due to the iFrame sizing behaviors of <amp-ad> elements, the AMP slot does not collapse in a no-fill situation.

Can I still mediate third party networks in AMPs Placements?

Yes, Sharethrough recommends mediating a network that is compatible serving within an iFrame. Ask your Account Manager for advice.

Is the integration of an AMP placement different from a normal Ad Server integration?

Yes, please follow the steps in this guide to correctly integrate an AMP placement.

_______________________________________________________________________________________

AMP Placement Integration Documentation

_______________________________________________________________________________________

DFP SETUP:

1. Create Ad Unit:

Specify the size and position for all visible AMP elements by providing a width and height attribute. These attributes imply the aspect ratio of the element, which can then scale with the container.

Define the Ad Unit dimensions keeping in mind that the iframe should leave the necessary space for all the elements of a native template (title, thumbnail, advertiser): e.g. 350x400px.

Set the layout to responsive. This sizes the element to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes. → Read On from AMP official documentation: https://www.ampproject.org/docs/guides/author-develop/responsive_amp

2. Create Line Item:

To access Programmatic inventory, add the following Creative tag (type: Third Party) on a lower-priority Line Item than your Direct Sell tags:

<div data-str-native-key="%%PATTERN:strnativekey%%" style="display: none;"></div>

<script type="text/javascript" src="//native.sharethrough.com/assets/sfp.js"></script>

(To deliver a Direct Sell campaign, add the Creative or Campaign key to above tag. Please read more here.)

PLEASE NOTE: Since AMP is rendered within iframe, the core tech sfp.js must be trafficked WITHIN THE AD UNIT, and not in the <head> of the page.

WEB PAGE SETUP:

1. Add the AMP ad tag to the <body> of the page you mean to traffic AMP to:

Here is an example of Sharethrough AMP ad tag:

<amp-ad width=320 height=60

layout="responsive"

type="sharethrough"

data-pkey="c0fa8367">

</amp-ad>

→ Please note that all AMP ad tags must have a defined width and height, type, and data-pkey.

1/a. There is also the option to traffic an AMP ad from Doubleclick:

However, you must create the Doubleclick ad as a line item within the Doubleclick platform before being able to access it from your local HTML page.

Here is an example of a AMP Sharethrough tag via Doubleclick:

<amp-ad width=586 height=88

layout="responsive"

type="doubleclick"

data-slot="/11935007/Sharethrough-Testing/AMP_Ad_Unit"

json='{"targeting":{"strnativekey":"c0fa8367"}}'>

</amp-ad>

The 'json='{"targeting"...' line allows you to traffic your standard Web DFP creatives to your AMP pages.

FINAL STEPS:

1. Verify Integration

Navigate to your test page with any device (e.g. mobile, tablet, desktop) and look for Sharethrough's default template.

Example of a working AMP page trafficking Sharethrough ads:

The following is an example of the full HTML (amp.html) page as shown in our test page. The items in bold is our amp-ad tag being placed on the page:

<!doctype html>

<html class='ui-mobile' >

<head>

<link rel="canonical" href="amp.html" />

<meta content='Atlantic Mobile' itemprop='name'>

<meta charset='utf-8'>

<meta content='width=device-width, initial-scale=1' name='viewport'>

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>

<meta content='Atlantic Mobile' name='title'>

<meta content='noindex, nofollow' name='robots'>

<script async src="https://cdn.ampproject.org/v0.js"></script>

</head>

<body class='mobile mobile-index homepage mobile-homepage ui-mobile-viewport ui-overlay-c'>

<div>Programmatic - AMP ad with type "Sharethrough"</div>

<amp-ad width=320 height=60

layout="responsive"

type="sharethrough"

data-pkey="c0fa8367">

</amp-ad>

<div>Direct sell - AMP ad with type "Doubleclick"</div>

<amp-ad width=586 height=88

type="doubleclick"

data-slot="/11935007/Sharethrough-Testing/AMP_Ad_Unit"

json='{"targeting":{"strnativekey":"c0fa8367"}}'>

</amp-ad>

</body>

</html>

ENCOUNTERING ISSUES?

Please reach out to productsupport@sharethrough.com for assistance.

Was this article helpful?

0 out of 0 found this helpful

Category

Resources

About Us

Contact