From 2121d9f556655e183c8e7000bfb46da3adbd5495 Mon Sep 17 00:00:00 2001 From: kevinkiklee Date: Thu, 11 May 2023 15:49:15 -0400 Subject: [PATCH] Implement fenced frame configs --- .../url-selection/ab-testing.js | 17 ++++++++++++++--- .../url-selection/creative-rotation.js | 17 ++++++++++++++--- .../creative-selection-by-frequency.js | 16 +++++++++++++--- .../url-selection/hover-event.js | 16 +++++++++++++--- .../url-selection/known-customer.js | 16 +++++++++++++--- .../url-selection/top-level-nav.js | 16 +++++++++++++--- 6 files changed, 80 insertions(+), 18 deletions(-) diff --git a/sites/content-producer/url-selection/ab-testing.js b/sites/content-producer/url-selection/ab-testing.js index b5503b8..0f0b113 100644 --- 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 index b531afb..845d90d 100644 --- 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 index 5afc971..5a9d0be 100644 --- 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 index 7f33e57..2060e79 100644 --- 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 index 7bb5e7f..322ea47 100644 --- 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 index 16c5977..4eac7e2 100644 --- 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();