Implementing with AMP

AMP is an open-source HTML framework that provides a straightforward way to create fast and smooth-loading web pages.

Since Adobe Analytics uses a JavaScript library to compile and send an image request, adjustments are required in your implementation to send data to Adobe on pages using AMP.

Determine which method to implement Adobe Analytics on pages using AMP

Adobe has created two methods to implement Adobe Analytics on pages using AMP. Both use the <amp-analytics> HTML tag. See amp-analytics tag on AMP’s documentation for more information.

• Use the "adobeanalytics" tracking template: Construct the Analytics request directly on the page
• Use the "analytics_nativeConfig" tracking template: Use an iframe containing the same AppMeasurement code you deploy on your normal site

The following table compares these two methods:

Weigh the pros and cons within your organization to determine which method you want to use. See AMP examples on Adobe’s GitHub repository for sample code.

Method 1: Use the amp-analytics tag with the “adobeanalytics” template

The "adobeanalytics" tracking template uses the <amp-analytics> HTML tag to construct a tracking request directly. You can specify hit requests that fire on specific page events, like the page becoming visible or on a click. Click events can be customized to apply to certain element IDs or classes by specifying a selector. You can load the template by adding type="adobeanalytics" to the amp-analytics tag.

In the following code example, there are two triggers defined: pageLoad and click. The pageLoad trigger fires when the document becomes visible and includes the pageName variable as defined in the vars section. The second trigger click fires when a button is clicked. eVar1 is set for this event with the value button clicked.

<amp-analytics type="adobeanalytics">
  <script type="application/json">
    {
      "requests": {
        "myClick": "${click}&v1=${eVar1}",
      },
      "vars": {
        "host": "example.data.adobedc.net",
        "reportSuites": "reportSuiteID1,reportSuiteID2",
        "pageName": "Adobe Analytics Using amp-analytics tag"
      },
      "triggers": {
        "pageLoad": {
          "on": "visible",
          "request": "pageview"
        },
        "click": {
          "on": "click",
          "selector": "button",
          "request": "myClick",
          "vars": {
            "eVar1": "button clicked"
          }
        }
      }
    }
  </script>
</amp-analytics>

In the click trigger, you can specify a selector to ensure that whenever the specific DOM element is clicked (in this case, any button), the buttonClick request is fired and is automatically set to denote this hit as a link tracking call.

Additionally, amp-analytics supports a number of variable substitutions so that AMP can provide data values that it is aware of. See variables supported in amp-analytics on GitHub for more information.

Adobe identifies visitors using a built-in AMP function, and sets the cookie adobe_amp_id. This visitor ID is unique to any other ID set by Adobe Analytics (for example, the s_vi cookie). The Adobe Experience Cloud ID Service is not supported using this implementation method.

Using a separate report suite for AMP pages is recommended because of how AMP identifies unique visitors.

This solution requires that the tracking server you specify in the host property matches the tracking server on your main site, so that your existing privacy policy controls are respected. Otherwise, create a separate privacy policy for pages using AMP.

Method 2: Use the amp-analytics tag with the “adobeanalytics_nativeConfig” template

The "adobeanalytics_nativeConfig" tag is easier to implement, as it uses the same tagging methodology you use on your normal web pages. Add the following to your amp-analytics tag:

<amp-analytics type="adobeanalytics_nativeConfig">
  <script type="application/json">
    {
      "requests": {
        "base": "https://${host}",
        "iframeMessage": "${base}/stats.html?campaign=${queryParam(campaign)}&pageURL=${ampdocUrl}&ref=${documentReferrer}"
      },
      "vars": {
        "host": "example.data.adobedc.net"
      },
      "extraUrlParams": {
      "pageName": "Example AMP page",
      "v1": "eVar1 example value"
      }
    }
 </script>
</amp-analytics>

An HTML page hosted on your web servers is also required:

<html>
  <head>
    <title>Stats Example</title>
    <script language="JavaScript" type="text/javascript" src="VisitorAPI.js"></script>
    <script language="JavaScript" type="text/javascript" src="AppMeasurement.js"></script>
  </head>
  <body>
    <script>
      var v_orgId = "INSERT-ORG-ID-HERE";
      var s_account = "examplersid1,examplersid2";
      var s_trackingServer = "example.data.adobedc.net";
      var visitor = Visitor.getInstance(v_orgId);
      visitor.trackingServer = s_trackingServer;
      var s = s_gi(s_account);
      s.account = s_account;
      s.trackingServer = s_trackingServer;
      s.visitorNamespace = s_visitorNamespace;
      s.visitor = visitor;
      s.pageName = s.Util.getQueryParam("pageName");
      s.eVar1 = s.Util.getQueryParam("v1");
      s.campaign = s.Util.getQueryParam("campaign");
      s.pageURL = s.Util.getQueryParam("pageURL");
      s.referrer = s.Util.getQueryParam("ref");
      s.t();
    </script>
  </body>
</html>

This approach sends data to a utility web page through query string parameters added to the iframeMessage request parameter. These query string parameters can be named whatever you like, as long as your stats.html page is configured to collect data from them.

The "adobeanalytics_nativeConfig" template also adds query string parameters based on the variables listed in the extraUrlParams section of the amp-analytics tag. In the above example, the pageName and v1 parameters are included.

Using this method, if a user opts out of tracking on your primary site, they are also opted out of tracking on all your AMPs. Using this utility page also means that AMP can support the Adobe Experience Cloud ID Service. A separate report suite is not required.

Link tracking and video tracking cannot be used with this method. The iframeMessage tag in AMP can only load once per page, so you cannot send any other image requests after the frame loads. This method also requires more processing resources to run, which can impact scrolling performance. This method does not affect page load time, since all resources load asynchronously.

FAQ

Is video tracking available for either method?

No. The AMP standard supports only triggers for “visible”, “click”, and “timer”. It does not yet support explicit triggers for video tracking that the amp-analytics tag can listen to. Also, the "adobeanalytics_nativeConfig" template can only load once, so subsequent image requests after a page loads is not possible.

How can I differentiate AMP visitors from others in my data?

For all AMP pages, the JavaScript Version dimension collects a value similar to AMP vX.X. You can also set a custom dimension to ‘AMP’ so you can segment these visitors.

How does this implementation method compare to Facebook Instant Articles?

Facebook Instant Articles support a similar solution to the "adobeanalytics_nativeConfig" method. The stats.html page for this method can serve your analytics needs for both AMP and FIA simultaneously. For more information on implementing tracking on FIA, see Facebook Instant Articles.

Business.Adobe.com resources

Voice Analytics Contribution Analysis Audience Segmentation Identity Management General Data Protection Regulation Attribution