Merge pull request #48 from GoogleChromeLabs/createWorklet

Add examples of using createWorklet

firebase.json

@@ -70,6 +70,14 @@
             {
               "key": "Supports-Loading-Mode",
               "value": "fenced-frame"
+            },
+            {
+              "key": "Access-Control-Allow-Origin",
+              "value": "*"
+            },
+            {
+              "key": "Shared-Storage-Cross-Origin-Worklet-Allowed",
+              "value": "?1"
             }
           ]
         }

functions/app/helpers/setup-view.js

@@ -25,6 +25,7 @@ module.exports = (app, viewName) => {
     hbs.engine({
       extname: '.hbs',
       layoutsDir: path.join(__dirname + '/../../view'),
+      partialsDir: path.join(__dirname + '/../../view/partials')
     })
   );
 

functions/view/main.hbs

@@ -31,9 +31,16 @@
     <link rel='stylesheet' href='https://unpkg.com/open-props/buttons.min.css' />
     <link rel='stylesheet' href='index.css' />
     <script>
-      function checkSharedStorage() { if (!('sharedStorage' in window)) {
-      document.querySelector('.demo__content').style.display = 'none';
-      document.querySelector('.demo__instructions').style.display = 'inherit'; } }
+      function getContentProducerUrl() {
+        return "{{{contentProducerUrl}}}";
+      }
+      
+      function checkSharedStorage() {
+        if (!('sharedStorage' in window)) {
+          document.querySelector('.demo__content').style.display = 'none';
+          document.querySelector('.demo__instructions').style.display = 'inherit';
+        }
+      }
     </script>
   </head>
 

functions/view/partials/creativeRotationDemoControls.hbs

@@ -0,0 +1,26 @@
+<div class="demo__controls-section">    
+  <fencedframe id="ad-slot" mode="opaque-ads"></fencedframe>
+  <div class="demo__controls">
+    <h5>Demo control</h5>
+    <div class="demo__buttons-container">
+      <button
+        class="mdl-button mdl-js-button mdl-button--raised demo__button"
+        onclick="setRotationMode('sequential')"
+      >
+        Set rotation mode to <br />"Sequential"
+      </button>
+      <button
+        class="mdl-button mdl-js-button mdl-button--raised demo__button"
+        onclick="setRotationMode('even-distribution')"
+      >
+        Set rotation mode to <br />"Even distribution"<br />(~33% / ~33% / ~33%)
+      </button>
+      <button
+        class="mdl-button mdl-js-button mdl-button--raised demo__button"
+        onclick="setRotationMode('weighted-distribution')"
+      >
+        Set rotation mode to <br />"Weighted distribution"<br />(70% / 20% / 10%)
+      </button>
+    </div>
+  </div>
+</div>

functions/view/publisher-a/creative-rotation.hbs

@@ -13,7 +13,7 @@
     <h3>Shared storage - Creative rotation demo</h3>
   </div>
   <div class='demo__content'>
-    <iframe class='demo__dsp-iframe' src='{{{contentProducerUrl}}}/url-selection/creative-rotation.html'></iframe>
+    {{> creativeRotationDemoControls}}
     <card class='demo__description'>
       <h4>Description</h4>
       <p>
@@ -55,6 +55,7 @@
     </p>
   </card>
 </main>
+<script src="{{{contentProducerUrl}}}/url-selection/creative-rotation.js"></script>
 <script defer>
   checkSharedStorage()
 </script>

functions/view/publisher-b/creative-rotation.hbs

@@ -13,7 +13,7 @@
     <h3>Shared storage - Creative rotation demo</h3>
   </div>
   <div class='demo__content'>
-    <iframe class='demo__dsp-iframe' src='{{{contentProducerUrl}}}/url-selection/creative-rotation.html'></iframe>
+    {{> creativeRotationDemoControls}}
     <card class='demo__description'>
       <h4>Description</h4>
       <p>
@@ -55,6 +55,7 @@
     </p>
   </card>
 </main>
+<script src="{{{contentProducerUrl}}}/url-selection/creative-rotation.js"></script>
 <script defer>
   checkSharedStorage()
 </script>

sites/content-producer/url-selection/ab-testing.js

@@ -42,7 +42,9 @@ function getRandomExperiment() {
 
 async function injectAd() {
   // Load the worklet module
-  await window.sharedStorage.worklet.addModule('ab-testing-worklet.js');
+  const abTestingWorklet = await window.sharedStorage.createWorklet(
+    'ab-testing-worklet.js'
+  );
 
   // Set the initial value in the storage to a random experiment group
   window.sharedStorage.set('ab-testing-group', getRandomExperiment(), {
@@ -56,7 +58,7 @@ async function injectAd() {
   const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';
 
   // Run the URL selection operation to select an ad based on the experiment group in shared storage
-  const selectedUrl = await window.sharedStorage.selectURL('ab-testing', urls, {
+  const selectedUrl = await abTestingWorklet.selectURL('ab-testing', urls, {
     data: groups,
     resolveToConfig,
     keepAlive: true,
@@ -71,7 +73,7 @@ async function injectAd() {
   }
 
   // Run the reporting operation
-  await window.sharedStorage.run('experiment-group-reporting')
+  await abTestingWorklet.run('experiment-group-reporting')
 }
 
 injectAd();

sites/content-producer/url-selection/creative-rotation-worklet.js

@@ -16,6 +16,9 @@
 
 class SelectURLOperation {
   async run(urls, data) {
+    // Initially set the storage to sequential mode for the demo
+    await SelectURLOperation.seedStorage();
+
     // Read the rotation mode from Shared Storage
     const rotationMode = await sharedStorage.get('creative-rotation-mode');
 
@@ -77,7 +80,25 @@ class SelectURLOperation {
     console.log(JSON.stringify({ index, randomNumber, rotationMode }));
     return index;
   }
+
+  // Set the mode to sequential and set the starting index to 0.
+  static async seedStorage() {
+    await sharedStorage.set('creative-rotation-mode', 'sequential', {
+      ignoreIfPresent: true,
+    });
+
+    await sharedStorage.set('creative-rotation-index', 0, {
+      ignoreIfPresent: true,
+    });
+  }
+}
+
+class SetRotationModeOperation {
+  async run({ rotationMode }) {
+    await sharedStorage.set('creative-rotation-mode', rotationMode);
+  }
 }
 
 // Register the operation as 'creative-rotation'
 register('creative-rotation', SelectURLOperation);
+register('set-rotation-mode', SetRotationModeOperation);

sites/content-producer/url-selection/creative-rotation.js

@@ -16,49 +16,51 @@
 
 // For demo purposes. The hostname is used to determine the usage of
 // development localhost URL vs production URL
-const contentProducerUrl = window.location.host;
+const contentProducerUrl = window.getContentProducerUrl();
 
 // Ad confg with the URL of the ad, a probability weight for rotation, and the clickthrough rate.
 const DEMO_AD_CONFIG = [
   {
-    url: `https://${contentProducerUrl}/ads/ad-1.html`,
+    url: `${contentProducerUrl}/ads/ad-1.html`,
     weight: 0.7,
   },
   {
-    url: `https://${contentProducerUrl}/ads/ad-2.html`,
+    url: `${contentProducerUrl}/ads/ad-2.html`,
     weight: 0.2,
   },
   {
-    url: `https://${contentProducerUrl}/ads/ad-3.html`,
+    url: `${contentProducerUrl}/ads/ad-3.html`,
     weight: 0.1,
   },
 ];
 
-// Set the mode to sequential and set the starting index to 0.
-async function seedStorage() {
-  await window.sharedStorage.set('creative-rotation-mode', 'sequential', {
-    ignoreIfPresent: true,
-  });
+async function setRotationMode(rotationMode) {
+  // Load the worklet module
+  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
+    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
+    { dataOrigin: 'script-origin' }
+  );
 
-  await window.sharedStorage.set('creative-rotation-index', 0, {
-    ignoreIfPresent: true,
+  await creativeRotationWorklet.run('set-rotation-mode', {
+    data: { rotationMode }
   });
+  console.log(`creative rotation mode set to ${rotationMode}`);
 }
 
 async function injectAd() {
   // Load the worklet module
-  await window.sharedStorage.worklet.addModule('creative-rotation-worklet.js');
-
-  // Initially set the storage to sequential mode for the demo
-  seedStorage();
+  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
+    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
+    { dataOrigin: 'script-origin' }
+  );
 
   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 selectedUrl = await window.sharedStorage.selectURL('creative-rotation', urls, {
+  const selectedUrl = await creativeRotationWorklet.selectURL('creative-rotation', urls, {
     data: DEMO_AD_CONFIG,
     resolveToConfig
   });

sites/publisher-a/index.css

@@ -105,3 +105,51 @@ card {
     background-color: var(--orange-9);
   }
 }
+
+.demo__controls-section {
+  width: 300px;
+}
+#ad-slot {
+  height: 250px;
+  border: none;
+}
+
+#button-slot {
+  height: 100px;
+  border: none;
+}
+
+.demo__card,
+.demo__controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-2);
+  background: var(--surface-3);
+  border: 1px solid var(--surface-1);
+  padding: var(--size-3);
+  margin: var(--size-3) 0;
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-2);
+  margin-top: 0;
+}
+
+.demo__controls h5 {
+  margin-bottom: var(--size-2);
+}
+
+.demo__buttons-container {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+}
+
+.demo__button {
+  zoom: 90%;
+  /* max-width: var(--size-13); */
+  --_bg: linear-gradient(var(--indigo-5), var(--indigo-7));
+  --_border: var(--indigo-6);
+  --_text: var(--indigo-0);
+  --_ink-shadow: 0 1px 0 var(--indigo-9);
+  margin: 5px;
+}