MONITORING AMP (Accelerated Mobile Pages) USING REAL USER

  • 2 minute(s) read
Prev Next

Introduction

AMP (Accelerated Mobile Pages) is a light-weight, open-source web framework originally  developed by Google, focusing on optimizing webpage performance. AMP is a subset of HTML, which is the main language for webpage content design. As such, AMP has some restrictions in terms of HTML tag usage. AMP is a framework built for reducing web content size (Total Downloaded Bytes). Hence, script and CSS file declarations are restricted.

The AMP framework mostly resolves the issue of render and parser blocking, as JS and CSS requests are not directly declared in AMP webpages. Since direct declaration of scripts is not supported, a Catchpoint RUM tag (JavaScript) cannot be declared on the HTML page. One way of capturing and sending RUM data for AMP sites is to contribute Catchpoint RUM to the Google AMP Project.

In this article we will discuss in detail how to implement Catchpoint RUM for AMP websites by directly adding the code snippet in the page.

Prerequisites

• Fully qualified AMP sites.

Implementation

Here's a simple example that tracks page views. Every time a page is visible, the trigger event fires, and sends the page view data to Catchpoint Servers.

The code snippet below must be added to all AMP web page for which you want to capture real user data. Simply paste this code immedately after the <body> tag.

<amp-analytics>
 <script type="application/json">
 {
 "requests": {
 "endpoint": "https://r.3gl.net/hawklogserver/r.p",
 "pageview": "https://r.3gl.net/hawklogserver/r.p?data= \"v\":2, \"y\":\"load\", \"ui\":${userID}, \"si\":${sessionID}, \"pi\":${pageId}, \"di\":${appId}, \"pc\":1, \"dn\":${dns}, \"fc\":7, \"wt\":${wait}, \"ld\":${load}, \"de\":${domInteractive}, \"dl\":${domLoaded}, \"rp\":1338, \"dc\":${docComplete}, \"cl\":${contentLoad}, \"rd\":${redirect}, \"jsc\":0, \"dh\":${documentHeight}, \"dw\":${documentWidth}, \"rf\":\"${domain}\", \"cv\":${isConversion}, \"rv\":${revenue}, \"ri\":${revenue_items}}"
 },
 "triggers": {
 "trackPageview": {
 "on": "visible",
 "request": "pageview"
 }
 },
 "vars": {
 "dns": "${navTiming(domainLookupStart,domainLookupEnd)}",
 "contentLoad": "${navTiming(responseStart,domComplete)}",
 "docComplete": "${navTiming(navigationStart,loadEventStart)}",
 "domInteractive": "${navTiming(requestStart,domInteractive)}",
 "domLoaded": "${navTiming(requestStart,domContentLoadedEventEnd)}",
 "connect": "${navTiming(connectStart,connectEnd)}",
 "load": "${navTiming(responseStart,responseEnd)}",
 "response": "${navTiming(navigationStart,responseEnd)}",
 "wait": "${navTiming(requestStart,responseStart)}",
 "ssl": "${navTiming(secureConnectionStart,connectEnd)}",
 "redirect" : "${redirectTime}",
 "documentWidth" : "${screenWidth}",
 "documentHeight" : "${screenHeight}",
 "revenue_items": "0",
 "revenue": "0",
 "isConversion": 0,
 "sessionID": "1063256495",
 "userID": "45773988",
 "pageId":"${pageViewId}",
 "domain":"${ampdocUrl}",
 "appId":"<app_id_here>"
 }
}
</script>
</amp-analytics>

Note: sessionID and userID are set to static values in this example, but you can use macros to dynamically generate unique values.

Code Description:

  • <amp-analytics> This tag enables capturing performance of an AMP webpage and measurement of user interactions.
  • vars  The vars configuration object defines new key-value pairs or overrides existing variables, which can then be referenced in request values.
  • Custom Metrics (revenue_items, revenue, isConversion) Values can be passed to these variables. Values can be passed directly to the object; RProfileris not required for AMP pages.  Value for isConversion will be 0 or 1 (1 if yes, 0 if no).
  • appId (Required Field) Catchpoint APP ID associated with the account. Under Settings >Apps section, as highlighted below. Copy the App ID from the portal and replace in the above code snippet under vars. For example: <"appId":"568">

amp.png

Results

You can verify whether the data is actually being sent to Catchpoint by opening a page for which amp-analytics is enabled, right-clicking the page and choosing Inspect, and then going to the Network tab.

You should see a post request to the following url:  https://r.3gl.net/hawklogserver/r.p, as in the screenshot below:
AMP_2.jpg

Real user data on the portal

AMP_2.jpg