Optimize Relap widget loading (#38475)

ampproject · Nov 14, 2022 · 714c2f0 · 714c2f0
1 parent f9c1138
commit 714c2f0
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 22 deletions.
diff --git a/ads/vendors/relap.js b/ads/vendors/relap.js
@@ -1,5 +1,7 @@
 import {loadScript, validateData} from '#3p/3p';
 
+import {setStyle} from '#core/dom/style';
+
 /**
  * @param {!Window} global
  * @param {!Object} data
@@ -10,13 +12,6 @@ export function relap(global, data) {
   const urlParam = data['url'] || window.context.canonicalUrl;
 
   if (data['version'] === 'v7') {
-    window.onRelapAPIReady = function (relapAPI) {
-      relapAPI['init']({
-        token: data['token'],
-        url: urlParam,
-      });
-    };
-
     window.onRelapAPIInit = function (relapAPI) {
       relapAPI['addWidget']({
         cfgId: data['anchorid'],
@@ -27,13 +22,21 @@ export function relap(global, data) {
             window.context.renderStart();
           },
           onNoContent: function () {
+            relapAPI['destroy']();
             window.context.noContentAvailable();
           },
         },
       });
     };
 
-    loadScript(global, 'https://relap.io/v7/relap.js');
+    const iframeEl = document.createElement('iframe');
+    setStyle(iframeEl, 'position', 'absolute');
+    setStyle(iframeEl, 'visibility', 'hidden');
+    setStyle(iframeEl, 'left', '-9999px');
+    setStyle(iframeEl, 'top', '-9999px');
+    iframeEl.className = 'relap-runtime-iframe';
+    iframeEl.srcdoc = `<script src="https://relap.io/v7/relap.js" data-relap-token="${data['token']}" data-relap-url="${urlParam}"></script>`;
+    global.document.body.appendChild(iframeEl);
   } else {
     window.relapV6WidgetReady = function () {
       window.context.renderStart();

diff --git a/ads/vendors/relap.md b/ads/vendors/relap.md
@@ -5,12 +5,13 @@
 ```html
 <amp-ad
   width="auto"
-  height="750"
+  height="790"
   type="relap"
   layout="fixed-height"
   data-token="D3UMgQWBqleq1tPW"
-  data-url="http://bigpicture.ru"
-  data-anchorid="i0xMMY1MoliiZWVl"
+  data-url="https://relap.mail.ru/"
+  data-anchorid="-FVV_OEgYpljt7e3"
+  data-version="v7"
 >
 </amp-ad>
 ```

diff --git a/examples/amp-ad/ads.amp.esm.html b/examples/amp-ad/ads.amp.esm.html
@@ -1883,12 +1883,13 @@ <h2>recomAD</h2>
   </amp-ad>
 
   <h2>Relap</h2>
-  <amp-ad width="auto" height="750"
+  <amp-ad width="auto" height="790"
       type="relap"
       layout="fixed-height"
       data-token="D3UMgQWBqleq1tPW"
-      data-url="http://bigpicture.ru"
-      data-anchorid="i0xMMY1MoliiZWVl">
+      data-url="https://relap.mail.ru/"
+      data-anchorid="-FVV_OEgYpljt7e3"
+      data-version="v7">
   </amp-ad>
 
   <h2>Remixd</h2>

diff --git a/examples/amp-ad/ads.amp.html b/examples/amp-ad/ads.amp.html
@@ -1848,8 +1848,8 @@ <h2>Recreativ fixed</h2>
   </amp-ad>
 
   <h2>Relap</h2>
-  <amp-ad width="auto" height="750" type="relap" layout="fixed-height" data-token="D3UMgQWBqleq1tPW"
-    data-url="http://bigpicture.ru" data-anchorid="i0xMMY1MoliiZWVl">
+  <amp-ad width="auto" height="790" type="relap" layout="fixed-height" data-token="D3UMgQWBqleq1tPW"
+    data-url="https://relap.mail.ru/" data-anchorid="-FVV_OEgYpljt7e3" data-version="v7">
   </amp-ad>
 
   <h2>RelapPro</h2>

diff --git a/validator/testdata/feature_tests/ads.html b/validator/testdata/feature_tests/ads.html
@@ -1077,12 +1077,13 @@ <h2>Rambler&Co</h2>
   </amp-ad>
 
   <h2>Relap</h2>
-  <amp-ad width="auto" height="750"
+  <amp-ad width="auto" height="790"
       type="relap"
       layout="fixed-height"
       data-token="D3UMgQWBqleq1tPW"
-      data-url="http://bigpicture.ru"
-      data-anchorid="i0xMMY1MoliiZWVl">
+      data-url="https://relap.mail.ru/"
+      data-anchorid="-FVV_OEgYpljt7e3"
+      data-version="v7">
   </amp-ad>
 
   <h2>Remixd</h2>

diff --git a/validator/testdata/feature_tests/ads.out b/validator/testdata/feature_tests/ads.out
@@ -1078,12 +1078,13 @@ PASS
 |    </amp-ad>
 |
 |    <h2>Relap</h2>
-|    <amp-ad width="auto" height="750"
+|    <amp-ad width="auto" height="790"
 |        type="relap"
 |        layout="fixed-height"
 |        data-token="D3UMgQWBqleq1tPW"
-|        data-url="http://bigpicture.ru"
-|        data-anchorid="i0xMMY1MoliiZWVl">
+|        data-url="https://relap.mail.ru/"
+|        data-anchorid="-FVV_OEgYpljt7e3"
+|        data-version="v7">
 |    </amp-ad>
 |
 |    <h2>Remixd</h2>