Guide
TrainingSupportCommunity

AMP Page mPulse integration

Suggest Edits

Introduction

AMP (Accelerated Mobile Pages) is a way to build web pages for static content that render fast.

AMP has built-in support for collecting Real User Monitoring (commonly called RUM) and sending it to mPulse.

Implementation

Once you have signed up for an mPulse account, you will be given an API key. For information about the API Key, go to the mPulse user guide topic Quick start.

To integrate mPulse into your AMP pages, you must include the following:

  • The required script to enable amp-analytics. The snippet below should appear above the script element that loads the AMP framework. Since the AMP project is undergoing rapid development, version numbers may differ. Refer to the AMP project amp-analytics documentation for the most up to date snippet.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  • amp-analytics element with a vendor type of mpulse. This snippet can appear anywhere in the page, but is most commonly placed near the bottom.
    Example of usage with API key of XXXXX-XXXXX-XXXXX-XXXXX-XXXXX:
<amp-analytics type="mpulse" config="https://c.go-mpulse.net/api/amp-config.json?d=SOURCE_HOST&amp;key=XXXXX-XXXXX-XXXXX-XXXXX-XXXXX"></amp-analytics>

Optional features

Optional parameters that can be sent by the amp-analytics element include Page Groups, A/B Test, Custom Timers, and Custom Metrics. Specifying these parameters differs from that of traditional web pages in that the values need to be output directly in the page (cannot be fetched from JavaScript variables, cookies, XPath, and so on). Note that since these optional parameters are included in the page output, they may be cached by AMP proxy caches and served to multiple visitors.

Page group

A Page Group allows for measurement across pages that belong together. Grouping pages and views in this way helps the site owner to capture and summarize the performance characteristics across the entire group.

It is specified with the page_group parameter. Value must be a valid JSON string.

A/B test

If the site uses A/B Testing, this variable specifies the test bucket the user was in when the beacon was sent.

It is specified with the ab_test parameter. Value must be a valid JSON string.

Custom dimensions

Custom dimensions are non-performance data about the user visit that helps the site owner to categorize page views into useful segments for analysis.

It is specified with the custom_dimension. parameter prefix concatenated with the name of the custom dimension. Multiple custom dimensions may be given. Value must be a valid JSON string, numeric or Boolean.

Custom metrics

Custom metrics are site owner defined values that refer to a business goal, or to Key Performance Indicators (KPIs) such as revenue, conversion, orders per minute, widgets sold, and so on.

It is specified with the custom_metric. parameter prefix concatenated with the name of the custom metric. Multiple custom metrics may be given. Value must be a valid JSON numeric or a string representation of a numeric.

Examples

Example of usage with API key of XXXXX-XXXXX-XXXXX-XXXXX-XXXXX and no optional parameters:

<amp-analytics type="mpulse" config="https://c.go-mpulse.net/api/amp-config.json?d=SOURCE_HOST&amp;key=XXXXX-XXXXX-XXXXX-XXXXX-XXXXX"></amp-analytics>

Example of usage with an optional Page Group parameter:

<amp-analytics type="mpulse" config="https://c.go-mpulse.net/api/amp-config.json?d=SOURCE_HOST&amp;key=XXXXX-XXXXX-XXXXX-XXXXX-XXXXX">
<script type="application/json">
{
  "extraUrlParams": {
    "page_group": "Home"
  }
}
</script>
</amp-analytics>

Example of usage with Page Group, A/B Test, several Custom Metrics and Custom Dimensions optional parameters:

<amp-analytics type="mpulse" config="https://c.go-mpulse.net/api/amp-config.json?d=SOURCE_HOST&amp;key=XXXXX-XXXXX-XXXXX-XXXXX-XXXXX">
<script type="application/json">
{
  "extraUrlParams": {
    "ab_test": "a",
    "page_group": "Home",
    "custom_metric.Cache_Hits": 15,
    "custom_metric.Cache_Misses": "0",
    "custom_metric.SQL_Queries": 2,
    "custom_dimension.Market_Vertical": "Sports",
    "custom_dimension.Page_Language": "English"
  }
}
</script>
</amp-analytics>

Integrations

WordPress

The AMP WordPress plugin from Automattic is an easy way to add AMP to your WordPress site.

To configure [amp-analytics](https://amp.dev/documentation/components/amp-analytics/?referrer=ampproject.org) integration with the plugin, you simply need to add the following to your WordPress template:

add_filter('amp_post_template_analytics', 'my_amp_add_custom_analytics');
function my_amp_add_custom_analytics($analytics) {
    if (!is_array($analytics)) {
        $analytics = array();
    }

    // http://docs.soasta.com/amphtml/
    $analytics['my-mpulse'] = array(
        'type' => 'mpulse',
        'attributes' => array(
            'config' => 'https://c.go-mpulse.net/api/amp-config.json?d=SOURCE_HOST&amp;key=XXXXX-XXXXX-XXXXX-XXXXX-XXXXX'
        ),
        'config_data' => array(),
    );

    return $analytics;
}

Links

AMP Project

AMP Project documentation

amp-analytics

AMP Project Github

Updated over 2 years ago