Merge branch 'master' into release

3p/integration.js

@@ -45,15 +45,27 @@ register('twitter', twitter);
 
 /**
  * Visible for testing.
- * Draws an ad to the window. Expects the data to include the ad type.
+ * Draws a 3p embed to the window. Expects the data to include the 3p type.
  * @param {!Window} win
  * @param {!Object} data
+ * @param {function(!Object, function(!Object))|undefined} configCallback
+ *     Optional callback that allows user code to manipulate the incoming
+ *     configuration. See
+ *     https://github.com/ampproject/amphtml/issues/1210 for some context
+ *     on this.
  */
-export function draw3p(win, data) {
+export function draw3p(win, data, configCallback) {
   const type = data.type;
-  assert(window.context.location.originValidated != null,
+  assert(win.context.location.originValidated != null,
       'Origin should have been validated');
-  run(type, win, data);
+  if (configCallback) {
+    configCallback(data, data => {
+      assert(data, 'Expected configuration to be passed as first argument');
+      run(type, win, data);
+    });
+  } else {
+    run(type, win, data);
+  }
 };
 
 /**
@@ -85,8 +97,13 @@ function masterSelection(type) {
 
 /**
  * Draws an embed, optionally synchronously, to the DOM.
+ * @param {function(!Object, function(!Object))} opt_configCallback If provided
+ *     will be invoked with two arguments:
+ *     1. The configuration parameters supplied to this embed.
+ *     2. A callback that MUST be called for rendering to proceed. It takes
+ *        no arguments. Configuration is expected to be modified in-place.
  */
-window.draw3p = function() {
+window.draw3p = function(opt_configCallback) {
   const data = parseFragment(location.hash);
   window.context = data._context;
   window.context.location = parseUrl(data._context.location.href);
@@ -104,7 +121,7 @@ window.draw3p = function() {
   // This only actually works for ads.
   window.context.observeIntersection = observeIntersection;
   delete data._context;
-  draw3p(window, data);
+  draw3p(window, data, opt_configCallback);
 };
 
 function triggerNoContentAvailable() {

ads/a9.js

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import {writeScript} from '../src/3p';
+import {writeScript, checkData} from '../src/3p';
 
 /**
  * @param {!Window} global
  * @param {!Object} data
  */
 export function a9(global, data) {
+  checkData(data, ['aax_size', 'aax_pubname', 'aax_src']);
   /*eslint "google-camelcase/google-camelcase": 0*/
   global.aax_size = data.aax_size;
   global.aax_pubname = data.aax_pubname;

ads/adreactor.js

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import {writeScript} from '../src/3p';
+import {writeScript, checkData} from '../src/3p';
 
 /**
  * @param {!Window} global
  * @param {!Object} data
  */
 export function adreactor(global, data) {
+  checkData(data, ['zid', 'pid', 'custom3']);
   const url = 'https://adserver.adreactor.com' +
       '/servlet/view/banner/javascript/zone?' +
       'zid=' + encodeURIComponent(data.zid) +

ads/adsense.js

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import {writeScript} from '../src/3p';
+import {writeScript, checkData} from '../src/3p';
 
 /**
  * @param {!Window} global
  * @param {!Object} data
  */
 export function adsense(global, data) {
+  checkData(data, ['adClient', 'adSlot']);
   /*eslint "google-camelcase/google-camelcase": 0*/
   global.google_page_url = global.context.canonicalUrl;
   const s = document.createElement('script');

ads/doubleclick.js

@@ -14,24 +14,30 @@
  * limitations under the License.
  */
 
-import {loadScript} from '../src/3p';
+import {loadScript, checkData} from '../src/3p';
 
 /**
  * @param {!Window} global
  * @param {!Object} data
  */
 export function doubleclick(global, data) {
+  checkData(data, [
+    'slot', 'targeting', 'categoryExclusion',
+    'tagForChildDirectedTreatment', 'cookieOptions'
+  ]);
   loadScript(global, 'https://www.googletagservices.com/tag/js/gpt.js', () => {
     global.googletag.cmd.push(function() {
+      const googletag = global.googletag;
       const dimensions = [[
         parseInt(data.width, 10),
         parseInt(data.height, 10)
       ]];
+      const pubads = googletag.pubads();
       const slot = googletag.defineSlot(data.slot, dimensions, 'c')
-          .addService(googletag.pubads());
-      googletag.pubads().enableSingleRequest();
-      googletag.pubads().markAsAmp();
-      googletag.pubads().set('page_url', context.canonicalUrl);
+          .addService(pubads);
+      pubads.enableSingleRequest();
+      pubads.markAsAmp();
+      pubads.set('page_url', context.canonicalUrl);
       googletag.enableServices();
 
       if (data.targeting) {
@@ -45,21 +51,24 @@ export function doubleclick(global, data) {
       }
 
       if (data.tagForChildDirectedTreatment != undefined) {
-        googletag.pubads().setTagForChildDirectedTreatment(
+        pubads.setTagForChildDirectedTreatment(
             data.tagForChildDirectedTreatment);
       }
 
       if (data.cookieOptions) {
-        googletag.pubads().setCookieOptions(data.cookieOptions);
+        pubads.setCookieOptions(data.cookieOptions);
       }
 
-      googletag.pubads().addEventListener('slotRenderEnded', function(event) {
+      pubads.addEventListener('slotRenderEnded', function(event) {
         if (event.isEmpty) {
           context.noContentAvailable();
         }
       });
 
-      global.googletag.display('c');
+      const canvas = global.document.getElementById('c');
+      // Exported for testing.
+      c.slot = slot;
+      googletag.display('c');
     });
   });
 }

builtins/amp-ad.js

@@ -20,7 +20,7 @@ import {getIntersectionChangeEntry} from '../src/intersection-observer';
 import {isLayoutSizeDefined} from '../src/layout';
 import {loadPromise} from '../src/event-helper';
 import {registerElement} from '../src/custom-element';
-import {getIframe, listenOnce, postMessage, prefetchBootstrap} from
+import {getIframe, listen, listenOnce, postMessage, prefetchBootstrap} from
     '../src/3p-frame';
 import {adPrefetch, adPreconnect} from '../ads/_prefetch';
 import {timer} from '../src/timer';
@@ -212,7 +212,12 @@ export function installAd(win) {
           this.deferMutate(this.noContentHandler_.bind(this));
         });
         // Triggered by context.observeIntersection(…) inside the ad iframe.
-        listenOnce(this.iframe_, 'send-intersections', () => {
+        // We use listen instead of listenOnce, because a single ad might
+        // have multiple parties wanting to receive viewability data.
+        // The second time this is called, it doesn't do much but it
+        // guarantees that the receiver gets an initial intersection change
+        // record.
+        listen(this.iframe_, 'send-intersections', () => {
           this.startSendingIntersectionChanges_();
         });
       }
@@ -227,7 +232,7 @@ export function installAd(win) {
       // it is visible.
       if (inViewport) {
         this.unlistenViewportChanges_ =
-            this.getViewport().onChanged(this.sendAdIntersection_.bind(this));
+            this.getViewport().onScroll(this.sendAdIntersection_.bind(this));
       } else if (this.unlistenViewportChanges_) {
         this.unlistenViewportChanges_();
         this.unlistenViewportChanges_ = null;
@@ -239,6 +244,8 @@ export function installAd(win) {
      * observing its position in the viewport.
      * Sets a flag, measures the iframe position if necessary and sends
      * one change record to the iframe.
+     * Note that this method may be called more than once if a single ad
+     * has multiple parties interested in viewability data.
      * @private
      */
     startSendingIntersectionChanges_() {

builtins/amp-ad.md

@@ -91,3 +91,21 @@ To enable this, copy the file [remote.html](../3p/remote.html) to your web serve
 ```
 
 The `content` attribute of the meta tag is the absolute URL to your copy of the remote.html file on your web server. This URL must use a "https" schema. It is not allowed to reside on the same origin as your AMP files. E.g. if you host AMP files on "www.example.com", this URL must not be on "www.example.com" but e.g. "something-else.example.com" is OK.
+
+##### Enhance incoming ad configuration
+
+This is completely optional: It is sometimes desired to further process the incoming iframe configuration before drawing the ad using AMP's built-in system.
+
+This is supported by passing a callback to the `draw3p` function call in the [remote.html](../3p/remote.html) file. The callback receives the incoming configuration as first argument and then receives another callback as second argument (Called `done` in the example below). This callback must be called with the updated config in order for ad rendering to proceed.
+
+Example:
+
+```JS
+draw3p(function(config, done) {
+  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
+  // Don't actually call setTimeout here. This should only serve as an
+  // example that is OK to call the done callback asynchronously.
+  setTimeout(function() {
+    done(config);
+  }, 100)
+});

css/amp.css

@@ -104,7 +104,7 @@ i-amp-sizer {
 }
 
 .-amp-unresolved {
-  position: relative !important;
+  position: relative;
   overflow: hidden !important;
 }
 
@@ -116,7 +116,7 @@ i-amp-sizer {
 }
 
 .-amp-notbuilt {
-  position: relative !important;
+  position: relative;
   overflow: hidden !important;
   color: transparent !important;
 }

examples/analytics.amp.html

@@ -22,22 +22,24 @@
 <amp-analytics id="analytics1">
 <script type="application/json">
 {
-  "host": "example.com",
+  "transport": {"beacon": false, "xhrpost": false},
   "requests": {
-    "base": "?domain=${canonicalHost}&path=${canonicalPath}&title=${title}",
+    "base": "https://example.com/?domain=${canonicalHost}&path=${canonicalPath}&title=${title}",
     "event": "${base}&name=${eventName}&type=${eventId}&time=${timestamp}&tz=${timezone}&pid=${pageViewId}&screenSize=${screenWidth}x${screenHeight}"
   },
   "vars": {
     "title": "Example Request"
   },
-  "triggers": [{
-    "on": "visible",
-    "request": "event",
-    "vars": {
-      "eventName": "page-loaded",
-      "eventId": "42"
+  "triggers": {
+    "default pageview": {
+      "on": "visible",
+      "request": "event",
+      "vars": {
+        "eventName": "page-loaded",
+        "eventId": "42"
+      }
     }
-  }]
+  }
 }
 </script>
 </amp-analytics>
@@ -48,33 +50,39 @@
   "vars": {
     "account": "UA-XXXX-Y"
   },
-  "triggers": [{
-    "on": "visible",
-    "request": "pageview",
-    "vars": {
-      "title": "Example Pageview"
+  "triggers": {
+    "default pageview": {
+      "on": "visible",
+      "request": "pageview",
+      "vars": {
+        "title": "Example Pageview"
+      }
+    },
+    "click on #test1 trigger": {
+      "on": "click",
+      "selector": "#test1",
+      "request": "event",
+      "vars": {
+        "eventCategory": "examples",
+        "eventAction": "clicked-test1"
+      }
+    },
+    "click on #top trigger": {
+      "on": "click",
+      "selector": "#top",
+      "request": "event",
+      "vars": {
+        "eventCategory": "examples",
+        "eventAction": "clicked-header"
+      }
     }
-  }, {
-    "on": "click",
-    "selector": "#test1",
-    "request": "event",
-    "vars": {
-      "eventCategory": "examples",
-      "eventAction": "clicked-test1"
-    }
-  }, {
-    "on": "click",
-    "selector": "#top",
-    "request": "event",
-    "vars": {
-      "eventCategory": "examples",
-      "eventAction": "clicked-header"
-    }
-  }]
+  }
 }
 </script>
 </amp-analytics>
 
+<amp-analytics id="analytics3" config="./analytics.config.json"></amp-analytics>
+
 <div class="logo"></div>
 <h1 id="top">AMP Analytics</h1>
 

examples/analytics.config.json

@@ -0,0 +1,15 @@
+{
+  "requests": {
+    "event": "https://example.com?remote-test&title=${title}&r=${random}"
+  },
+  "vars": {
+    "title": "Example Request"
+  },
+  "triggers": {
+    "remote pageview": {
+      "on": "visible",
+      "request": "event"
+    }
+  }
+}
+

examples/brightcove.amp.html

@@ -6,7 +6,7 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-brightcove" src="/dist/v0/amp-brightcove-0.1.max.js"></script>
+  <script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.max.js"></script>
   <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>