Implement fenced frame configs

GoogleChromeLabs · May 11, 2023 · b1041b5 · b1041b5
2 parents 9c1b163 + 2121d9f
commit b1041b5
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 18 deletions.
diff --git a/sites/content-producer/url-selection/ab-testing.js b/sites/content-producer/url-selection/ab-testing.js
@@ -52,11 +52,22 @@ async function injectAd() {
   const urls = EXPERIMENT_MAP.map(({ url }) => ({ url }));
   const groups = EXPERIMENT_MAP.map(({ group }) => group);
 
+  // Resolve the selectURL call to a fenced frame config only when it exists on the page
+  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';
+
   // Run the URL selection operation to select an ad based on the experiment group in shared storage
-  const opaqueURL = await window.sharedStorage.selectURL('ab-testing', urls, { data: groups });
+  const selectedUrl = await window.sharedStorage.selectURL('ab-testing', urls, {
+    data: groups,
+    resolveToConfig,
+  });
+
+  const adSlot = document.getElementById('ad-slot');
 
-  // Render the opaque URL into a fenced frame
-  document.getElementById('ad-slot').src = opaqueURL;
+  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
+    adSlot.config = selectedUrl;
+  } else {
+    adSlot.src = selectedUrl;
+  }
 }
 
 injectAd();
diff --git a/sites/content-producer/url-selection/creative-rotation.js b/sites/content-producer/url-selection/creative-rotation.js
@@ -54,11 +54,22 @@ async function injectAd() {
 
   const urls = DEMO_AD_CONFIG.map(({ url }) => ({ url }));
 
+  // Resolve the selectURL call to a fenced frame config only when it exists on the page
+  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';
+
   // Run the URL selection operation to determine the next ad that should be rendered
-  const opaqueURL = await window.sharedStorage.selectURL('creative-rotation', urls, { data: DEMO_AD_CONFIG });
+  const selectedUrl = await window.sharedStorage.selectURL('creative-rotation', urls, {
+    data: DEMO_AD_CONFIG,
+    resolveToConfig
+  });
+
+  const adSlot = document.getElementById('ad-slot');
 
-  // Render the opaque URL into a fenced frame
-  document.getElementById('ad-slot').src = opaqueURL;
+  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
+    adSlot.config = selectedUrl;
+  } else {
+    adSlot.src = selectedUrl;
+  }
 }
 
 injectAd();
diff --git a/sites/content-producer/url-selection/creative-selection-by-frequency.js b/sites/content-producer/url-selection/creative-selection-by-frequency.js
@@ -32,11 +32,21 @@ async function injectAd() {
     ignoreIfPresent: true,
   });
 
+  // Resolve the selectURL call to a fenced frame config only when it exists on the page
+  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';
+
   // Run the URL selection operation to choose an ad based on the frequency cap in shared storage
-  const opaqueURL = await window.sharedStorage.selectURL('creative-selection-by-frequency', AD_URLS);
+  const selectedUrl = await window.sharedStorage.selectURL('creative-selection-by-frequency', AD_URLS, {
+    resolveToConfig
+  });
+
+  const adSlot = document.getElementById('ad-slot');
 
-  // Render the opaque URL into a fenced frame
-  document.getElementById('ad-slot').src = opaqueURL;
+  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
+    adSlot.config = selectedUrl;
+  } else {
+    adSlot.src = selectedUrl;
+  }
 }
 
 injectAd();
diff --git a/sites/content-producer/url-selection/hover-event.js b/sites/content-producer/url-selection/hover-event.js
@@ -31,11 +31,21 @@ async function injectAd() {
   // Load the worklet module
   await window.sharedStorage.worklet.addModule('hover-event-worklet.js');
 
+  // Resolve the selectURL call to a fenced frame config only when it exists on the page
+  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';
+
   // Run the URL selection operation to select an ad based on the experiment group in shared storage
-  const opaqueURL = await window.sharedStorage.selectURL('hover-event', AD_URLS);
+  const selectedUrl = await window.sharedStorage.selectURL('hover-event', AD_URLS, {
+    resolveToConfig,
+  });
+
+  const adSlot = document.getElementById('ad-slot');
 
-  // Render the opaque URL into a fenced frame
-  document.getElementById('ad-slot').src = opaqueURL;
+  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
+    adSlot.config = selectedUrl;
+  } else {
+    adSlot.src = selectedUrl;
+  }
 }
 
 injectAd();
diff --git a/sites/content-producer/url-selection/known-customer.js b/sites/content-producer/url-selection/known-customer.js
@@ -33,11 +33,21 @@ async function injectAd() {
     ignoreIfPresent: true,
   });
 
+  // Resolve the selectURL call to a fenced frame config only when it exists on the page
+  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';
+
   // Run the URL selection operation to choose the button based on the user status
-  const opaqueURL = await window.sharedStorage.selectURL('known-customer', AD_URLS);
+  const selectedUrl = await window.sharedStorage.selectURL('known-customer', AD_URLS, {
+    resolveToConfig,
+  });
+
+  const adSlot = document.getElementById('button-slot');
 
-  // Render the opaque URL into a fenced frame
-  document.getElementById('button-slot').src = opaqueURL;
+  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
+    adSlot.config = selectedUrl;
+  } else {
+    adSlot.src = selectedUrl;
+  }
 }
 
 injectAd();
diff --git a/sites/content-producer/url-selection/top-level-nav.js b/sites/content-producer/url-selection/top-level-nav.js
@@ -27,11 +27,21 @@ async function injectAd() {
   // Load the worklet module
   await window.sharedStorage.worklet.addModule('top-level-nav-worklet.js');
 
+  // Resolve the selectURL call to a fenced frame config only when it exists on the page
+  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';
+
   // Run the URL selection operation to select an ad based on the experiment group in shared storage
-  const opaqueURL = await window.sharedStorage.selectURL('top-level-nav', AD_URLS);
+  const selectedUrl = await window.sharedStorage.selectURL('top-level-nav', AD_URLS, {
+    resolveToConfig,
+  });
+
+  const adSlot = document.getElementById('ad-slot');
 
-  // Render the opaque URL into a fenced frame
-  document.getElementById('ad-slot').src = opaqueURL;
+  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
+    adSlot.config = selectedUrl;
+  } else {
+    adSlot.src = selectedUrl;
+  }
 }
 
 injectAd();