Published on 2025-06-26T04:21:56Z

What is AMP-analytics? Examples for AMP-analytics.

AMP-analytics is the built-in analytics mechanism for Accelerated Mobile Pages (AMP). It uses the <amp-analytics> component to collect user interactions, pageviews, and custom events via JSON-based configurations. Supported by vendors like Plainsignal (for cookie-free analytics) and Google Analytics 4 (GA4), AMP-analytics delivers lightweight, non-blocking event tracking that preserves the performance benefits of AMP. By defining requests, triggers, and variables, developers can tailor data collection to specific needs while ensuring compliance with privacy regulations. This approach enables real-time insights without sacrificing user experience.

Illustration of Amp-analytics
Illustration of Amp-analytics

Amp-analytics

Lightweight, non-blocking analytics for AMP pages via the `<amp-analytics>` component, supporting providers like Plainsignal and GA4.

What is AMP-analytics?

AMP-analytics is the built-in analytics mechanism for Accelerated Mobile Pages (AMP). It leverages the <amp-analytics> component to collect user interactions, pageviews, and custom events without blocking page rendering. Analytics vendors provide JSON-based configurations that define endpoints, triggers, and variables. By design, AMP-analytics maintains the high-performance and user experience benefits of AMP while enabling rich data collection.

How AMP-analytics Works

Under the hood, AMP-analytics loads configurations defined in a <script type="application/json"> block inside the <amp-analytics> tag. When certain conditions or triggers are met (e.g., page becomes visible, user interactions, timers), the component sends non-blocking requests to specified endpoints. These requests can use the Beacon API or XHR for reliability without impacting page performance.

  • Amp <amp-analytics> component

    The <amp-analytics> element is an AMP extension (v0.1) that you include in your document <head> to enable analytics functionality. It loads required scripts and handles event triggers according to your configuration.

  • Json configuration

    Analytics are configured via a JSON object embedded within <amp-analytics>. This object specifies requests (endpoints), triggers (event types and conditions), and optional vars (variables) to customize data payloads.

  • Non-blocking event dispatch

    Requests are sent asynchronously using the Beacon API or XHR, ensuring that analytics collection does not delay or block page rendering.

Implementing AMP-analytics with Plainsignal

PlainSignal offers a simple, cookie-free analytics solution ideal for AMP pages. By connecting to PlainSignal endpoints, you can collect basic metrics like pageviews and events while maintaining user privacy. Below is how to integrate PlainSignal with AMP-analytics.

  • Preconnect to plainsignal

    Hint the browser to establish early connections to PlainSignal domains for improved performance:

    <link rel="preconnect" href="//eu.plainsignal.com/" crossorigin />

  • Include plainsignal script

    Add the PlainSignal script tag in your document to enable data collection:

    <script defer data-do="yourwebsitedomain.com" data-id="0GQV1xmtzQQ" data-api="//eu.plainsignal.com" src="//cdn.plainsignal.com/PlainSignal-min.js"></script>

  • Configure <amp-analytics> for plainsignal

    Embed a JSON configuration to send pageviews to PlainSignal’s collect endpoint:

    <amp-analytics>
  <script type="application/json">
  {
    "requests": {
      "endpoint": "https://eu.plainsignal.com/collect"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "endpoint"
      }
    }
  }
  </script>
</amp-analytics>

Implementing AMP-analytics with GA4

Google Analytics 4 (GA4) can be integrated with AMP-analytics using the GA4 transport protocol. By specifying your GA4 Measurement ID, you can track pageviews and events in your GA4 property directly from AMP pages.

  • Load amp analytics extension

    Add the AMP analytics extension in your <head> to enable the <amp-analytics> component:

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

  • Configure ga4 in <amp-analytics>

    Use the GA4 configuration with your Measurement ID:

    <amp-analytics type="googleanalytics">
  <script type="application/json">
  {
    "vars": {
      "gtag_id": "G-XXXXXXXXXX",
      "config": {
        "G-XXXXXXXXXX": { "groups": "default" }
      }
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      }
    }
  }
  </script>
</amp-analytics>

Best Practices and Considerations

To maximize the benefits of AMP-analytics, follow these guidelines:

  • Minimize payload size

    Keep your JSON configurations lean and only send necessary parameters to reduce network overhead.

  • Ensure privacy compliance

    Use cookie-free analytics when possible, anonymize IP addresses, and avoid sending PII to adhere to GDPR and CCPA requirements.

  • Validate event triggers

    Test that your triggers (e.g., visible, click) fire correctly across different devices and network conditions.

  • Implement fallback strategies

    Configure retry logic or secondary endpoints in case your primary analytics provider is unavailable.

Related terms