Introduction

The AMP environment is very different to traditional web pages - in order to keep pages fast and efficient, restrictions are imposed on JavaScript execution and as a result typical data collection and targeting methods don't work. To provide the best of Permutive in the AMP environment, we've built an AMP integration on top of AMP components.

Our integration ensures that Permutive's core functionality is supported in the AMP environment, including data collection, real-time segmentation and targeting via the DoubleClick ad-server. This enables our customers to take advantage of Permutive's real-time capabilities on AMP pages.

Data Collection

To enable data collection, we've built a custom plugin for the amp-analytics  component. Analytics is an extension to AMP, and must be enabled for your AMP pages. Instructions for enabling amp-analytics  can be found here.

Once enabled on your page, the next step is to include Permutive's amp-analytics configuration in the body of your page. 

<amp-analytics config="https://amp.permutive.com/amp-analytics.json">
  <script type="application/json">
    {
      "vars": {
        "identity": "${clientId(_ga)}",
        "key": "PERMUTIVE_API_KEY"
      },
      "extraUrlParams": {
         ...
      }
    }
  </script>
</amp-analytics>


Be sure to replace PERMUTIVE_API_KEY with your public Permutive API key. The extraUrlParams  object can be used to pass in arbitrary properties about your AMP page. These properties are included in the events sent into Permutive, so you should ensure that the properties you send in match up with your Permutive event schemas. If you want to send in a list property, you must suffix your property name with !list  and pass in a comma-separated string as the property value. Every property name should be prefixed by properties.. Here's an example of what extraUrlParams  might look like:

"extraUrlParams": {
  "properties.article.title": "Elon Musk Builds Space Colony on Mars",
  "properties.article.author": "Hari Seldon",
  "properties.article.categories!list": "travel,finance"
}

Once your amp-analytics configuration is live on a test page, you should contact us, and we can ensure that data is being collected correctly. You should see Pageview and PageviewEngagement events being collected on your AMP pages.

Targeting

Whenever you serve ads via the amp-ad element, the AMP runtime loads an iframe from a different origin than the AMP document, and the iframe is able to execute JavaScript, call the ad-server and render an ad. The amp-ad  implementation provides a page remote.html, which contains code to facilitate loading the iframe used to serve ads. 

Although the ads render in isolated iframes and no third-party JavaScript is executed on the AMP document itself, AMP does provide the capability of modifying the ad configuration, such as appending targeting data. To achieve this, you must host a modified version of remote.html which will be used whenever ads are served on AMP pages. This must be hosted on a different domain from the AMP page itself. This is typically hosted on a subdomain, for example amp.<your-site>.com .

Permutive provides a modified version of remote.html which will append real-time targeting data to ad-server requests, enabling you to take advantage of Permutive's real-time capabilities in the AMP environment. Our modified remote.html can be obtained here - you just need to replace PROJECT_ID and API_KEY  with your Permutive project ID and public API key respectively.

Once your remote.html is ready to go, add the iframe to your AMP document:

<meta name="amp-3p-iframe-src" content="https://amp.publisher.com/remote.html">

That's it - you should now be serving AMP ads targeted via Permutive.

Permutive will typically append targeting to ad requests within a fraction of a second, however our implementation of remote.html enforces a maximum timeout to ensure that ads are served even if Permutive fails to load in time. By default this timeout is set to two seconds. Note that if this timeout is reached, old (cached) Permutive targeting data from the user's previous visits will still be appended to the ad request, if available.

If you are already hosting your own version of remote.html, please get in touch and we will advise on the best way to integrate with your existing setup.

Limitations

Permutive capabilities are more limited in AMP compared to other environments, however our integration ensures that Permutive's core functionality is supported, including data collection, real-time segmentation and targeting via the DoubleClick ad-server. 

Current limitations include:

  • As we are unable to execute JavaScript on the page, we are unable to interact with custom elements and detect interactions (e.g. the user hovering their mouse over a dialog on the page). However, amp-analytics is fairly powerful, and we are able to collect data on anything supported by amp-analytics triggers
  • AMP does not let us manipulate the page in any way - for example our Permutive overlay reactions will not work in the AMP environment.
  • Some of our integrations will not be enabled on AMP pages, simply because they don't make sense or are unable to operate in the AMP environment. 
  • Only the doubleclick  ad type is supported right now, for real-time targeting. We can consider support for other ad types if requested.

Did this answer your question?