To increase your website’s responsiveness and the usability of its webpages for mobile device users while analyzing your website visitors and their behaviors, Personalization supports the use of Accelerated Mobile Pages (AMP).

To serve personalized content with AMP, you must use the Using the Personalization APIs or its software development kit (SDK) to create the personalized content and serve the entire webpage to AMP with the personalized content included (as AMP doesn’t support the modification of pages with custom JavaScript).

Enabling AMP

To enable Personalization to use AMP with one of your Drupal websites, complete the following steps:

• Sign in to Personalization using an administrative account.
• Click Configure, and then click Customer Data.
• In the Account ID column, click the subscriber name you want to configure.
• On the Customer Details page, click Add new person identifier type.
• Enter values for the following fields, based on your requirements:
  • Identifier type
  • API identifier name
  • Description
• Select Is this identifier resolvable?.
• Click OK.
• Download, install, and enable the Accelerated Mobile Pages (AMP) module on your Drupal website.

After enabling the module, you must disable New Relic on pages served through Google AMP.

Basic Google AMP cache usage

After you have enabled AMP for your website, you must include HTML code on relevant pages pointing to an AMP proxy for serving content to visitors. To do this, Personalization provides specific support for Google AMP Cache.

To enable webpage analytics, be sure to include the following AMP analytics script in a webpage’s header tag before you include the general AMP script.

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

As an example, you can use code like the following, embedded into a webpage where you want to use AMP to track Page Views:

<amp-analytics type="acquialift" id="acquialift">
<script type="application/json">
{
"vars": {
   "siteId":"my-acquia-lift-site-id",
   "accountId": "MYACCOUNTID",
   "decisionApiUrl": "us-east-1-decisionapi.lift.acquia.com"
}
}
</script>
</amp-analytics>

with the following vars values set to your customer details:

• siteId: Your Personalization Site ID
• MYACCOUNTID: Your Personalization account ID
• decisionApiUrl: Your regional Decision API URL

Example

Use the following example to help you use AMP with your website and its content.

Sending a custom event

The following example configures AMP to use a subscriber-specific event type when the user clicks on an element that’s identified by the CSS ID #test1.

<amp-analytics type="acquialift" id="acquialift">
<script type="application/json">
{
"requests":
   "customEvent": "${basicCapture}&en=${eventName}"
},
"vars": {
   "siteId":"my-acquia-lift-site-id",
   "accountId": "MYACCOUNTID",
   "decisionApiUrl": "us-east-1-decisionapi.lift.acquia.com"
},
"triggers": {
   "pageLoad": {
      "on": "visible",
      "request": "pageview"
   },
   // Sends a Custom event.
   "clickCustomEvent": {
      "on": "click",
      "selector": "#test1",
      "request": "customEvent",
      "vars": {
      "eventName": "MyCustomEventId"
      }
   }
}
}
</script>

Using accelerated mobile pages

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

<amp-analytics type="acquialift" id="acquialift">
<script type="application/json">
{
"vars": {
   "siteId":"my-acquia-lift-site-id",
   "accountId": "MYACCOUNTID",
   "decisionApiUrl": "us-east-1-decisionapi.lift.acquia.com"
}
}
</script>
</amp-analytics>

<amp-analytics type="acquialift" id="acquialift">
<script type="application/json">
{
"requests":
   "customEvent": "${basicCapture}&en=${eventName}"
},
"vars": {
   "siteId":"my-acquia-lift-site-id",
   "accountId": "MYACCOUNTID",
   "decisionApiUrl": "us-east-1-decisionapi.lift.acquia.com"
},
"triggers": {
   "pageLoad": {
      "on": "visible",
      "request": "pageview"
   },
   // Sends a Custom event.
   "clickCustomEvent": {
      "on": "click",
      "selector": "#test1",
      "request": "customEvent",
      "vars": {
      "eventName": "MyCustomEventId"
      }
   }
}
}
</script>