ampproject · calebcordry · Jul 20, 2021 · Jul 15, 2021 · Jul 16, 2021 · Jul 16, 2021
diff --git a/examples/amp-story/ads/remote.json b/examples/amp-story/ads/remote.json
@@ -0,0 +1,6 @@
+{
+  "ad-attributes": {
+    "type": "doubleclick",
+    "data-slot": "/30497360/a4a/story_360"
+  }
+}
diff --git a/examples/amp-story/story-ad-remote-config.html b/examples/amp-story/story-ad-remote-config.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html amp lang="en">
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
+  <title>AMP Story</title>
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link rel="canonical" href="amp-story.amp.html">
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <link href="https://fonts.googleapis.com/css?family=Lilita+One&display=swap" rel="stylesheet">
+  <style amp-custom>
+    amp-story-page {
+      background: slateblue;
+    }
+    .container {
+      justify-content: center;
+      align-content: center;
+    }
+    .num {
+      text-align: center;
+      color: white;
+      font-size: 300px;
+      font-family: 'Lilita One', cursive;
+    }
+  </style>
+</head>
+<body>
+  <amp-story standalone supports-landscape>
+    <!--
+      This is an example of JSON retrived from a source file.
+    -->
+    <amp-story-auto-ads src="/examples/amp-story/ads/remote.json" >
+    </amp-story-auto-ads>
+    <amp-story-page id="page-1">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">1</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-2">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">2</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-3">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">3</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-4">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">4</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-5">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">5</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-6">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">6</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-7">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">7</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-8">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">8</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-9">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">9</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-10">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">10</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-11">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">11</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-12">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">12</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-13">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">13</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-14">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">14</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-15">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">15</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-16">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">16</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-17">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">17</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-18">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">18</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-19">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">19</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page-20">
+      <amp-story-grid-layer class="container" template="vertical">
+        <p class="num">20</p>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js
@@ -146,8 +146,8 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     return this.ampStory_
       .signals()
       .whenSignal(CommonSignals.INI_LOAD)
+      .then(() => this.handleConfig_())
       .then(() => {
-        this.handleConfig_();
         this.adPageManager_ = new StoryAdPageManager(
           this.ampStory_,
           this.config_
@@ -215,16 +215,22 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
   /**
    * Sets config and installs additional extensions if necessary.
    * @private
+   * @return {Promise}
    */
   handleConfig_() {
-    this.config_ = new StoryAdConfig(this.element).getConfig();
-    if (this.config_['type'] === 'custom') {
-      Services.extensionsFor(this.win)./*OK*/ installExtensionForDoc(
-        this.element.getAmpDoc(),
-        MUSTACHE_TAG,
-        'latest'
-      );
-    }
+    return new StoryAdConfig(this.element, this.win)
+      .getConfig()
+      .then((config) => {
+        this.config_ = config;
+        if (config['type'] === 'custom') {
+          Services.extensionsFor(this.win)./*OK*/ installExtensionForDoc(
+            this.element.getAmpDoc(),
+            MUSTACHE_TAG,
+            'latest'
+          );
+        }
+        return config;
+      });
   }
 
   /**

diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-config.js b/extensions/amp-story-auto-ads/0.1/story-ad-config.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {Services} from '#service';
 import {isJsonScriptTag} from '#core/dom';
 import {isObject} from '#core/types';
 import {parseJson} from '#core/types/object/json';
@@ -41,26 +42,31 @@ const AllowedAdTypes = {
 export class StoryAdConfig {
   /**
    * @param {!Element} element amp-story-auto-ads element.
+   * @param {!Window} win Window element
    */
-  constructor(element) {
+  constructor(element, win) {
     /** @private {!Element} amp-story-auto ads element. */
     this.element_ = element;
+    /** @private {!Window} Window element */
+    this.win_ = win;
   }
 
   /**
    * Validate and sanitize config.
    * @return {!JsonObject}
    */
   getConfig() {
-    const child = this.element_.firstElementChild;
-    userAssert(
-      child && isJsonScriptTag(child),
-      `The ${TAG} should ` +
-        'be inside a <script> tag with type="application/json"'
-    );
-
-    const jsonConfig = parseJson(child.textContent);
+    const configData = this.element_.hasAttribute('src')
+      ? this.getRemoteConfig_()
+      : this.getInlineConfig_(this.element_.firstElementChild);
+    return configData.then((jsonConfig) => this.validateConfig_(jsonConfig));
+  }
 
+  /**
+   * @param {!Element} jsonConfig
+   * @return {!JsonObject}
+   */
+  validateConfig_(jsonConfig) {
     const requiredAttrs = {
       class: 'i-amphtml-story-ad',
       layout: 'fill',
@@ -86,10 +92,40 @@ export class StoryAdConfig {
         delete adAttributes[attr];
       }
     }
-
     return /** @type {!JsonObject} */ ({...adAttributes, ...requiredAttrs});
   }
 
+  /**
+   * @param {!Element} child
+   * @return {!JsonObject}
+   */
+  getInlineConfig_(child) {
+    userAssert(
+      child && isJsonScriptTag(child),
+      `The ${TAG} should ` +
+        'be inside a <script> tag with type="application/json"'
+    );
+    const inlineJSONConfig = parseJson(child.textContent);
+
+    return Promise.resolve(inlineJSONConfig);
+  }
+
+  /**
+   * @return {!JsonObject}
+   */
+  getRemoteConfig_() {
+    return Services.xhrFor(this.win_)
+      .fetchJson(this.element_.getAttribute('src'))
+      .then((response) => response.json())
+      .catch((err) => {
+        user().error(
+          TAG,
+          'error determining if remote config is valid json: bad url or bad json',
+          err
+        );
+      });
+  }
+
   /**
    * Logic specific to each ad type.
    * @param {string} type

diff --git a/extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js b/extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js
@@ -216,7 +216,7 @@ describes.realWin(
         new MockStoryImpl(storyElement);
         addStoryAutoAdsConfig(adElement);
         await autoAds.buildCallback();
-        autoAds.layoutCallback();
+        await autoAds.layoutCallback();
       });
 
       it('should create glassPane', () => {