Information for: DEVELOPERS   PARTNERS

Using accelerated mobile pages

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

To serve personalized content with AMP, you must use the Using the Acquia Lift 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 Acquia Lift to use AMP with one of your Drupal websites, complete the following steps:

  1. Sign in to Acquia Lift using an administrative account.
  2. Click Configure, and then click Customer Data.
  3. In the Account ID column, click the subscriber name you want to configure.
  4. On the Customer Details page, click Add new person identifier type.
  5. Enter values for the following fields, based on your requirements:
    • Identifier type
    • API identifier name
    • Description
  6. Select the Is this identifier resolvable? check box.
  7. Click OK.
  8. 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, Acquia Lift 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 Acquia Lift Site ID
  • MYACCOUNTID: Your Acquia Lift 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

This 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>