Using Accelerated Mobile Pages

To increase both your website's responsiveness and the usability of its webpages for mobile device users (such as those on tablets and phones) while retaining the ability to analyze your website visitors and their behaviors, Acquia Lift supports the use of Accelerated Mobile Pages (AMP).

Enabling AMP

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

  1. Sign in to Profile Manager using an administrative account.
  2. Click Admin > Manage customers.
  3. In the Account ID column, click the customer name you want to configure.
  4. On the customer details page, click the Add new person identifier type link.
  5. Enter values for the following fields, based on your requirements:
    Field Suggested value
    Identifier type AMP or Google AMP
    Description Google Accelerated Mobile Pages (AMP)
    API identifier name amp
  6. Select the Resolvable check box.
  7. Click OK.
  8. Download, install, and enable the Accelerated Mobile Pages (AMP) module on your Drupal website.

Basic Google AMP Cache usage

After you have enabled AMP for your website, you must include HTML code on relevant pages that points to an AMP proxy for serving content to visitors. To accomplish 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 similar to 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

Examples

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

Sending a click-through event when clicking on a specific button

This example configures AMP to use a customer specific event type when the user clicks on an element that is 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>

Sending a custom event

This example configures AMP to use a customer specific event type when the user clicks on an element that is 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>

Contact supportStill need assistance? Contact Acquia Support