Skip to main content
Sign in

Search

Publisher Support

AMP v2 Deployment Verification

  • Updated

In this article

We cover the steps required to deploy the AMP SDK to your page.

Overview

Deploying the new AMP SDK consists of deploying the following AMP tags:

  • amp-state
  • amp-analytics
  • amp-script
  • amp-ad

The page needs to have the following AMP JS files in its <head> element:

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Client Prerequisites

Permutive Workspace You should already have a Permutive workspace. If you are not yet a customer, get in touch!
Public API Key You should have a public API key assigned to your Permutive workspace. An API key is automatically created on all new workspaces and can be found in the dashboard. However, we recommend provisioning a separate public API key for each environment.
AMP Namespace Don't hesitate to get in touch with us prior to beginning your AMP deployment and we will assign you a namespace, which is required for deployment.

Where you see <NAMESPACE> , <WORKSPACE_ID> and <API_KEY> in this document, these should be replaced by the corresponding values given to you be Permutive.

Setup

Amp-Analytics

Verify the amp-analytics script is present as stated in the Overview. For example:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Next, verify that the amp-analytics tag is present:

<amp-analytics type="permutive-ampscript">
  <script type="application/json">
    {
      "extraUrlParams": {
        "customProperties": {
          "article": {
            "title": "Custom title",
            "categories": ["sport", "football"]
        }
      }
    }
  </script>
</amp-analytics>
  • The extraUrlParams object is optional and can be used to pass in arbitrary metadata describing the page content. 
  • The customProperties object behaves like the Pageview schema on the Web SDK. Verify this schema is not flattened (a previous version requirement).

SDK Configuration

The SDK configuration is controlled by amp-state. amp-state helps bind state to amp-powered HTML elements on the page. You can specify the SDK configuration that the AMP SDK will use.

<body>
...
<!-- AMP STATE -->
<amp-state id="permutiveConfig">
<script type="application/json">
{
"apiKey": "<API_KEY>",
"projectId": "<WORKSPACE_ID>",
"environment": "production"
...
}
</script>
</amp-state>
...
</body>

Only three parameters are specified in the above example, but any configuration of options can be used, such as cookieExpiry and stateNamespace.

Important: The amp-state tag must have the attribute id=permutiveConfig so the SDK will collect the configuration options.

Replace <API_KEY> and <WORKSPACE_ID> appropriately during installation.

Cohorts

To enable Permutive segmentation and reactions in AMP, three amp-script tags must be added to deploy Permutive's JavaScript code.

The first provides targeting data from localStorage to amp-ad. The second loads the cohort definitions for the SDK to consume. The third loads the Permutive AMP SDK from the CDN.

Make sure to replace <WORKSPACE_ID> where appropriate.

<body>
    ...
    <!-- AMP SCRIPT -->
    <amp-script id="permutiveCachedTargeting" sandboxed script="permutiveCachedTargetingScript"></amp-script>
    <script id="permutiveCachedTargetingScript" type="text/plain" target="amp-script">
      exportFunction('ct', () => {let c = JSON.parse(localStorage.getItem('_pdfps'));let i = localStorage.getItem('permutive-id');return {targeting:{permutive: c ? c : [], puid: i}, ppid: i};})
    </script>

    <amp-script sandboxed script="pamp-json"></amp-script>
  <script id="pamp-json" type="text/plain" target="amp-script">
    fetch('https://cdn.permutive.app/queries/<WORKSPACE_ID>-amp.json').then(r => r.json()).then(d => AMP.setState({permutiveConfig: {ampJson: d}}));
  </script>

    <amp-script id="permutiveSdk" sandboxed src="https://cdn.permutive.app/ampsdk/<WORKSPACE_ID>-ampscript.js">
    </amp-script>
    ...
</body>

Amp Ads

The following script needs to be added to all the amp-ad elements on the page where you want Permutive targeting data to be applied.

<amp-ad width="320" height="50" type="doubleclick" data-slot="/4119129/mobile_ad_banner"
      rtc-config='{"urls": ["amp-script:permutiveCachedTargeting.ct"], "timeoutMillis": 1000}'></amp-ad>

Consent

The AMP component, amp-consent, is responsible for getting user consent. There are three forms of consent:

  • global
  • granular
  • pre-defined

This is dependent on how amp-consent is implemented. The Permutive SDK will not handle determining consent on the page and requires it to be handled via the data-block-on-consent data attribute on the amp-script tag.

Global Consent

<body>
   ...
   <!-- AMP SCRIPT -->
   <amp-script data-block-on-consent id="permutiveSdk" sandboxed src="https://cdn.permutive.app/ampsdk/<WORKSPACE_ID>-ampscript.js" width="5" height="5">
   </amp-script>
   ...
</body>

For global consent, data-block-on-consent must be added to all of our amp-script, amp-state and amp-analytics tags. When consent is given, our script tag will be allowed to execute.

 

Network Call Validation

To begin, you will need to ensure the AMP version of the page is loaded. You can use the AMP Validator extension by Google to assist you. Alternatively, the AMP version of a page can be accessed by adjusting the URL as necessary (i.e. adding ?amp to the end of the URL in some cases).

Important: Ensure that the NAMESPACE value in all network calls is correct and consistent.

1) Events Are Being Tracked

Events should be tracked via a request to https://api.permutive.com/v2.0/events

Screenshot_2022-04-04_at_17.36.29.png

Note: The response should not have any error codes.

2) Cohorts are Enabled

Screenshot_2022-04-04_at_17.41.33.png

3) Ad requests are targeted

Ad requests should be targeted with Permutive cohorts in the scp parameter.

Screenshot_2022-04-04_at_17.42.41.png

Comments

0 comments

Article is closed for comments.