輪播廣告素材

使用共用儲存空間來判斷使用者在各網站上看到的廣告素材。

Shared Storage API 是適用於一般用途的跨網站儲存空間 Privacy Sandbox 提案，可支援許多可能的用途。其中一個例子是廣告素材輪播，您可以在 Chrome 104.0.5086.0 以上版本中進行測試。

您可以利用廣告素材輪播功能儲存廣告素材 ID、觀看次數和使用者互動等資料，以便判斷使用者在不同網站上看到哪些廣告素材。

執行 Shared Storage 小程式，根據儲存的資料從提供的清單中選取一個網址，然後在圍欄頁框中顯示該廣告素材。可用來選取新廣告或其他內容。

試試廣告素材輪播

如要透過共用儲存空間嘗試廣告素材輪播功能，請確認您使用的是 Chrome 104.0.5086.0 以上版本。啟用 chrome://settings/adPrivacy 下的所有廣告隱私權 API。

您也可以在指令列中使用 --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames 旗標啟用共用儲存空間。

使用程式碼範例進行實驗

廣告客戶或內容製作者想要為廣告活動套用不同策略，並輪播內容或廣告素材來提高成效。共用儲存空間可用來在不同網站中執行不同的旋轉策略，例如依序輪播和平均分配輪播。

在這個例子中：

  • 「creative-rotation.js」已嵌入頁框中。這段指令碼會設定最重要的廣告 ( 權重)，並對工作組進行呼叫，決定要顯示哪些內容。
  • creative-rotation-worklet.js 是共用儲存空間工作組，可決定內容的加權分佈情形，並傳回應顯示的內容。

creative-rotation.js：

// Ad config with the URL of the content, a probability weight for rotation, and the clickthrough rate.
const DEMO_CONTENT_CONFIG = [
  {
    url: 'https://your-server.example/contents/content-1.html',
    weight: 0.7,
  },
  {
    url: 'https://your-server.example/contents/content-2.html',
    weight: 0.2,
  },
  {
    url: 'https://your-server.example/contents/content-3.html',
    weight: 0.1,
  },
];

// Set the mode to sequential and set the starting index to 0.
async function seedStorage() {
  await window.sharedStorage.set('content-rotation-mode', 'sequential', {
    ignoreIfPresent: true,
  });

  await window.sharedStorage.set('content-rotation-index', 0, {
    ignoreIfPresent: true,
  });
}

async function injectAd() {
  // Load the worklet module
  await window.sharedStorage.worklet.addModule('content-rotation-worklet.js');

  // Initially set the storage to sequential mode for the demo
  seedStorage();

  // Run the URL selection operation to determine the next content rendered.
  const urls = DEMO_CONTENT_CONFIG.map(({ url }) => ({ url }));
  const fencedFrameConfig = await window.sharedStorage.selectURL('content-rotation', urls, { 
    data: DEMO_CONTENT_CONFIG,
    resolveToConfig: true
  });

  // Render the opaque URL into a fenced frame
  document.getElementById('content-slot').config = fencedFrameConfig;
}

injectAd();

creative-rotation-worklet.js

class SelectURLOperation {
  async run(urls, data) {
    // Read the rotation mode from Shared Storage
    const rotationMode = await this.sharedStorage.get('content-rotation-mode');

    // Generate a random number to be used for rotation
    const randomNumber = Math.random();

    let index;

    switch (rotationMode) {
      /**
       * Sequential rotation
       * - Rotates the contents in order
       * - Example: A -> B -> C -> A ...
       */
      case 'sequential':
        const currentIndex = await this.sharedStorage.get('creative-rotation-index');
        index = parseInt(currentIndex, 10);
        const nextIndex = (index + 1) % urls.length;

        await this.sharedStorage.set('content-rotation-index', nextIndex);
        break;

      /**
       * Weighted rotation
       * - Rotates the contentswith weighted probability
       * - Example: A=70% / B=20% / C=10%
       */
      case 'weighted-distribution':
        
        // Sum the weights cumulatively, and find the first URL where the
        // sum exceeds the random number. The array is sorted in
        // descending order first.
        let weightSum = 0;
        const { url } = data
          .sort((a, b) => b.weight - a.weight)
          .find(({ weight }) => {
            weightSum += weight;
            return weightSum > randomNumber;
          });

        index = urls.indexOf(url);
        break;

      default:
        index = 0;
    }
    return index;
  }
}

register('content-rotation', SelectURLOperation);

Use cases

These are only some of the possible use cases for Shared Storage. We'll continue to add examples as we receive feedback and discover new use cases.

Content selection

Select and display different content on different websites in fenced frames based on information collected in Shared Storage. The output gate for these use cases is URL selection.

  • Creative rotation: Store data, such as creative ID, view counts, and user interaction, to determine which creative users' see across different sites.
  • A/B testing: You can assign a user to an experiment group, then store that group in Shared Storage to be accessed cross-site.
  • Custom user experiences: Share custom content and calls-to-action based on a user's registration status or other user states

Generate summary reports

Collect information with Shared Storage and generated a noisy, aggregated summary report. The output gate for these use cases is the Private Aggregation API.

  • Unique reach measurement: Many content producers and advertisers want to know how many unique people saw their content. Use Shared Storage to record the first time a user saw your ad, embedded video, or publication, and prevent duplicative counting of that same user on different sites. You can then use the Private Aggregation API to output a summary report for your reach.
  • Demographics measurement: Content producers often want to understand the demographics of their audience. You can use Shared Storage to record user demographic data in a context where you have it, such as your first-party site, and use aggregated reporting to report on it across many other sites, such as embedded content.
  • K+ frequency measurement: Sometimes described as "effective frequency," there is often a minimum number views before a user will recognize or recall certain content (often in the context of advertisement views). You can use Shared Storage to build reports of unique users that have seen a piece of content at least K number of times.

互動及分享意見回饋

共用儲存空間提案正在進行討論，因此可能隨時會有變動 如果您試用這個 API 並有意見，請不吝與我們分享。