✨ Add a delay fetched fake vendor for test purposes (#30332)

* Add a delay fetched fake vendor for test purposes * review
ampproject · Sep 22, 2020 · 1163e74 · 1163e74
1 parent f40404f
commit 1163e74
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 0 deletions.
diff --git a/3p/integration.js b/3p/integration.js
@@ -142,6 +142,7 @@ import {eplanning} from '../ads/eplanning';
 import {ezoic} from '../ads/ezoic';
 import {f1e} from '../ads/f1e';
 import {f1h} from '../ads/f1h';
+import {fakeDelayed} from '../ads/_fakedelayed_';
 import {felmat} from '../ads/felmat';
 import {firstimpression} from '../ads/firstimpression';
 import {flite} from '../ads/flite';
@@ -368,6 +369,7 @@ init(window);
 
 if (getMode().test || getMode().localDev) {
   register('_ping_', _ping_);
+  register('fake-delayed', fakeDelayed);
 }
 
 // Keep the list in alphabetic order

diff --git a/ads/_config.js b/ads/_config.js
@@ -476,6 +476,10 @@ const adConfig = jsonConfiguration({
 
   'fake': {},
 
+  'fake-delayed': {
+    renderStartImplemented: true,
+  },
+
   'felmat': {
     prefetch: 'https://t.felmat.net/js/fmamp.js',
     renderStartImplemented: true,

diff --git a/ads/_fakedelayed_.js b/ads/_fakedelayed_.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {setStyles} from '../src/style';
+import {validateData, writeScript} from '../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function fakeDelayed(global, data) {
+  validateData(data, ['src', 'bootstrapScript']);
+
+  const iframe = global.document.createElement('iframe');
+  iframe.setAttribute('id', 'creative');
+  iframe.setAttribute('frameborder', '0');
+  iframe.setAttribute('marginheight', '0');
+  iframe.setAttribute('marginwidth', '0');
+  iframe.setAttribute('scrolling', 'no');
+  iframe.setAttribute('src', data['src']);
+  setStyles(iframe, {
+    border: '0 none transparent',
+    position: 'relative',
+    height: '100%',
+    width: '100%',
+  });
+  global.document.getElementById('c').appendChild(iframe);
+
+  writeScript(global, data['bootstrapScript']);
+}
diff --git a/ads/_fakedelayed_.md b/ads/_fakedelayed_.md
@@ -0,0 +1,39 @@
+<!---
+Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS-IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+# fake-delayed
+
+A fake ad type that is used for local development and testing.
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="fake-delayed"
+  data-bootstrap-script="/examples/amp-ad/sticky.js"
+  src="/examples/amp-ad/sticky-creative.html"
+>
+</amp-ad>
+```
+
+## Configuration
+
+### Required parameters
+
+- `src` : The URL of the target creative to be displayed.
+- `data-bootstrap-script` : The URL of a bootstraping JS code to be loaded in iframe s.
diff --git a/examples/amp-ad/sticky-creative.html b/examples/amp-ad/sticky-creative.html
@@ -0,0 +1,6 @@
+<!doctype html><html>
+<head><meta charset=utf-8>
+<meta content=width=device-width,minimum-scale=1,initial-scale=1 name=viewport>
+<body>
+<a href=https://www.google.com><img sid=container alt="AMP Ad" height=250 src=https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg width=300></img></a>
+</body></html>
diff --git a/examples/amp-ad/sticky.html b/examples/amp-ad/sticky.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>Ad examples</title>
+    <link rel="canonical" href="http://nonblocking.io/" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <style amp-custom>
+      .spacer {
+        margin-top: 10px;
+        height: 70vh;
+        width: 100%;
+        background-image: -webkit-linear-gradient(#EEE 50%, white 50%);
+        background-image: linear-gradient(#EEE 50%, white 50%);
+        background-size: 100% 3em;
+      }
+
+      header {
+        position: relative;
+      }
+
+      h1 {
+        margin: 0px 10px;
+      }
+
+      header h1 {
+        position: absolute;
+        top: 20vh;
+        padding: 5px;
+        z-index: 1;
+      }
+
+      header h1 span, .title {
+        background-color: black;
+        color: white;
+        line-height: 1.2em;
+      }
+
+      amp-img img {
+        object-fit: cover;
+      }
+    </style>
+    <script
+      async
+      custom-element="amp-ad"
+      src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
+    ></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+
+  <body>
+    <header>
+      <h1>
+        <span class="title">Lorem Ipsum Dolor Sit Lorem Ipsum<span>
+      </h1>
+      <amp-img height="50vh" layout="fixed-height" src="https://picsum.photos/1600/900?image=1069"></amp-img>
+    </header>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <amp-ad
+      width="0"
+      height="0"
+      id="i-amphtml-demo-id"
+      type="fake-delayed"
+      sticky
+      data-bootstrap-script="/examples/amp-ad/sticky.js"
+      src="/examples/amp-ad/sticky-creative.html"
+    ></amp-ad>
+  </body>
+</html>
diff --git a/examples/amp-ad/sticky.js b/examples/amp-ad/sticky.js
@@ -0,0 +1,14 @@
+window.onload = function () {
+  var iframe = document.querySelector('#creative');
+
+  // Step 1: Once knowing the ad size is 300x250, hide the frame and request to have ad shown
+  iframe.style.top = '250px';
+  iframe.style.transition = '3s';
+  window.context.requestResize(300, 250).then(function() {
+    iframe.style.top = '0px';
+    iframe.addEventListener('transitionend', function () {
+      // Animation ended, now signaling AMP the ad is now interactive
+      window.context.signalInteractive();
+    });
+  });
+};