✨ Add support for Mgid Ads in Web Stories (#38588)

* VT-28545 Implement MGID Widget inside AMP Stories * VT-28545 Implement MGID Widget inside AMP Stories * VT-28545 Implement MGID Widget inside AMP Stories. Static screen size * VT-28545 Implement MGID Widget inside AMP Stories. Fix 3p iframe implementation * VT-28545 Implement MGID Widget inside AMP Stories. Fix consents * VT-28545 Implement MGID Widget inside AMP Stories. Tests * VT-28545 Implement MGID Widget inside AMP Stories. Readme * VT-28545 Implement MGID Widget inside AMP Stories. Fix eslint * VT-28545 Implement MGID Widget inside AMP Stories. Fix eslint * VT-28545 Implement MGID Widget inside AMP Stories. Add tests * VT-28545 Implement MGID Widget inside AMP Stories. linter fixes * VT-28545 Implement MGID Widget inside AMP Stories. Fix deps * VT-28545 Implement MGID Widget inside AMP Stories. VT-28613 - remove ref param * VT-28545 Implement MGID Widget inside AMP Stories. VT-28604 - fix pv request * VT-28545 Implement MGID Widget inside AMP Stories. Dismiss capping * VT-28545 Implement MGID Widget inside AMP Stories. VT-28614 Add cxurl and pvid params * VT-28545 Implement MGID Widget inside AMP Stories. VT-28615 fix empty muidn * VT-28545 Implement MGID Widget inside AMP Stories. Fix tests * VT-28545 Implement MGID Widget inside AMP Stories. Fix pr parameter * VT-28545 Implement MGID Widget inside AMP Stories. Fix pr parameter tests * VT-28545 Implement MGID Widget inside AMP Stories. Remove localStorage and sessionStorage usage * VT-28545 Implement MGID Widget inside AMP Stories. Fix pvurl; hasown usage.
ampproject · Feb 3, 2023 · 181dc81 · 181dc81
1 parent a27cd72
commit 181dc81
Show file tree

Hide file tree

Showing 9 changed files with 580 additions and 0 deletions.
diff --git a/ads/_a4a-config.js b/ads/_a4a-config.js
@@ -27,6 +27,7 @@ export function getA4ARegistry() {
       'dianomi': () => true,
       'doubleclick': () => true,
       'fake': () => true,
+      'mgid': (win, adTag) => !adTag.hasAttribute('data-container'),
       'nws': () => true,
       'smartadserver': () => true,
       'valueimpression': () => true,

diff --git a/build-system/compile/bundles.config.extensions.json b/build-system/compile/bundles.config.extensions.json
@@ -113,6 +113,11 @@
     "version": "0.1",
     "latestVersion": "0.1"
   },
+  {
+    "name": "amp-ad-network-mgid-impl",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
   {
     "name": "amp-ad-network-nws-impl",
     "version": "0.1",

diff --git a/build-system/test-configs/dep-check-config.js b/build-system/test-configs/dep-check-config.js
@@ -150,6 +150,7 @@ exports.rules = [
       'extensions/amp-ad-network-valueimpression-impl/0.1/amp-ad-network-valueimpression-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
       'extensions/amp-ad-network-dianomi-impl/0.1/amp-ad-network-dianomi-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
       'extensions/amp-ad-network-smartadserver-impl/0.1/amp-ad-network-smartadserver-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
+      'extensions/amp-ad-network-mgid-impl/0.1/amp-ad-network-mgid-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
 
       // A4A impls importing amp fast fetch header name
       'extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js->extensions/amp-a4a/0.1/signature-verifier.js',

diff --git a/examples/amp-story/mgid.html b/examples/amp-story/mgid.html
@@ -0,0 +1,167 @@
+<!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>
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link rel="canonical" href="mgid.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: CadetBlue;
+    }
+
+    .container {
+      justify-content: center;
+      align-content: center;
+    }
+
+    .num {
+      text-align: center;
+      color: white;
+      font-size: 300px;
+    }
+  </style>
+</head>
+
+<body>
+<amp-story standalone supports-landscape>
+  <amp-story-auto-ads>
+    <script type="application/json">
+      {
+        "ad-attributes": {
+          "type": "mgid",
+          "data-widget": 1392080
+        }
+      }
+    </script>
+
+  </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>