Implements amp-analytics variables, csi pings for page load metrics.

ads/google/a4a/google-data-reporter.js

@@ -138,16 +138,11 @@ function setupPageLoadMetricsReporter_(ampElement) {
       win.ampAnalyticsPageLoadMetricsConfig || dict({
       'requests': {
         'fvt': 'https://csi.gstatic.com/csi?s=a4a' +
-          `&c=${correlator}&met.a4a=` +
-          /* TODO(jonkeller): Add remaining metrics commented-out below to cfg
-          'makeBodyVisible.${MBV_VALUE}~' +
-          */
-          'firstVisibleTime.${firstVisibleTime}'
-          /*
-          + 'firstContentfulPaint.${FCP_VALUE}~' +
-          'firstViewportReady.${FVR_VALUE}'
-          */
-        ,
+            `&c=${correlator}&met.a4a=` +
+	    'makeBodyVisible.${makeBodyVisible}~' +
+	    'firstVisibleTime.${firstVisibleTime}~' +
+	    'firstContentfulPaint.${firstContentfulPaint}~' +
+	    'firstViewportReady.${firstViewportReady}',
       },
       'transport': {
         'beacon': false,

extensions/amp-a4a/0.1/a4a-variable-source.js

@@ -65,6 +65,9 @@ const WHITELISTED_VARIABLES = [
   'TOTAL_ENGAGED_TIME',
   'AMP_VERSION',
   'USER_AGENT',
+  'FIRST_CONTENTFUL_PAINT',
+  'FIRST_VIEWPORT_READY',
+  'MAKE_BODY_VISIBLE',
 ];
 
 

extensions/amp-analytics/0.1/sandbox-vars-whitelist.js

@@ -45,4 +45,7 @@ export const SANDBOX_AVAILABLE_VARS = {
   'AMP_VERSION': true,
   'BACKGROUND_STATE': true,
   'USER_AGENT': true,
+  'FIRST_CONTENTFUL_PAINT': true,
+  'FIRST_VIEWPORT_READY': true,
+  'MAKE_BODY_VISIBLE': true,
 };

extensions/amp-analytics/0.1/vendors.js

@@ -48,6 +48,9 @@ export const ANALYTICS_CONFIG = /** @type {!JsonObject} */ ({
       'domainLookupTime': 'DOMAIN_LOOKUP_TIME',
       'domInteractiveTime': 'DOM_INTERACTIVE_TIME',
       'externalReferrer': 'EXTERNAL_REFERRER',
+      'firstContentfulPaint': 'FIRST_CONTENTFUL_PAINT',
+      'firstViewportReady': 'FIRST_VIEWPORT_READY',
+      'makeBodyVisible': 'MAKE_BODY_VISIBLE',
       'navRedirectCount': 'NAV_REDIRECT_COUNT',
       'navTiming': 'NAV_TIMING',
       'navType': 'NAV_TYPE',

src/service/performance-impl.js

@@ -97,6 +97,13 @@ export class Performance {
     /** @private {string} */
     this.ampexp_ = '';
 
+    /** @private {number|null} */
+    this.makeBodyVisible_ = null;
+    /** @private {number|null} */
+    this.firstContentfulPaint_ = null;
+    /** @private {number|null} */
+    this.firstViewportReady_ = null;
+
     // Add RTV version as experiment ID, so we can slice the data by version.
     this.addEnabledExperiment('rtv-' + getMode(this.win).rtvVersion);
     if (isCanary(this.win)) {
@@ -314,6 +321,19 @@ export class Performance {
     if (arguments.length == 1) {
       this.mark(label);
     }
+
+    // Store certain page visibility metrics to be exposed as analytics variables.
+    const storedVal = Math.round(opt_delta != null ? Math.max(opt_delta, 0)
+				 : value - this.initTime_);
+    if (label == 'fcp') {
+      this.firstContentfulPaint_ = storedVal;
+    }
+    if (label == 'pc') {
+      this.firstViewportReady_ = storedVal;
+    }
+    if (label == 'mbv') {
+      this.makeBodyVisible_ = storedVal;
+    }
   }
 
   /**
@@ -439,6 +459,18 @@ export class Performance {
   isPerformanceTrackingOn() {
     return this.isPerformanceTrackingOn_;
   }
+
+  getFirstContentfulPaint() {
+    return this.firstContentfulPaint_;
+  }
+
+  getMakeBodyVisible() {
+    return this.makeBodyVisible_;
+  }
+
+  getFirstViewportReady() {
+    return this.firstViewportReady_;
+  }
 }
 
 

src/service/url-replacements-impl.js

@@ -513,6 +513,18 @@ export class GlobalVariableSource extends VariableSource {
       return this.getStoryValue_(storyVariables => storyVariables.pageId,
           'STORY_PAGE_ID');
     });
+
+    this.setAsync('FIRST_CONTENTFUL_PAINT', () => {
+      return Services.performanceFor(this.ampdoc.win).getFirstContentfulPaint();
+    });
+
+    this.setAsync('FIRST_VIEWPORT_READY', () => {
+      return Services.performanceFor(this.ampdoc.win).getFirstViewportReady();
+    });
+
+    this.setAsync('MAKE_BODY_VISIBLE', () => {
+      return Services.performanceFor(this.ampdoc.win).getMakeBodyVisible();
+    });
   }
 
   /**

test/functional/test-url-replacements.js

@@ -519,6 +519,42 @@ describes.sandboxed('UrlReplacements', {}, () => {
     });
   });
 
+  it('should replace FIRST_CONTENTFUL_PAINT', () => {
+    sandbox.stub(Services, 'performanceFor')
+        .returns({
+          getFirstContentfulPaint() {
+            return 1;
+          },
+        });
+    return expandAsync('FIRST_CONTENTFUL_PAINT').then(res => {
+      expect(res).to.match(/^\d+$/);
+    });
+  });
+
+  it('should replace FIRST_VIEWPORT_READY', () => {
+    sandbox.stub(Services, 'performanceFor')
+        .returns({
+          getFirstViewportReady() {
+            return 1;
+          },
+        });
+    return expandAsync('FIRST_VIEWPORT_READY').then(res => {
+      expect(res).to.match(/^\d+$/);
+    });
+  });
+
+  it('should replace MAKE_BODY_VISIBLE', () => {
+    sandbox.stub(Services, 'performanceFor')
+        .returns({
+          getMakeBodyVisible() {
+            return 1;
+          },
+        });
+    return expandAsync('MAKE_BODY_VISIBLE').then(res => {
+      expect(res).to.match(/^\d+$/);
+    });
+  });
+
   it('should reject protocol changes', () => {
     const win = getFakeWindow();
     const urlReplacements = Services.urlReplacementsForDoc(win.ampdoc);