轮播广告素材

使用共享的存储空间来确定用户在各个网站中看到的广告素材。

Shared Storage API 是 Privacy Sandbox 提案，用于实现通用的跨网站存储，它支持许多可能的使用场景。广告素材轮播就是这样一个例子，可用于在 Chrome 104.0.5086.0 及更高版本中进行测试。

借助广告素材轮播，您可以存储数据（如广告素材 ID、观看次数和用户互动），以确定用户在不同网站中看到了哪些广告素材。

运行共享存储空间 Worklet，根据存储的数据从提供的列表中选择网址，然后在围栏框架中呈现相应广告素材。此按钮可用于选择新广告或其他内容。

尝试广告素材轮播

要尝试使用共享存储空间轮播广告素材，请确保您使用的是 Chrome 104.0.5086.0 或更高版本。然后，在 chrome://flags/#privacy-sandbox-ads-apis 处启用 Privacy Sandbox Ads API 实验标志。

将 Privacy Sandbox 广告 API 实验设为“已启用”，以便使用这些 API

您还可以在命令行中使用 --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames 标志启用共享存储空间。

使用代码示例进行实验

广告客户或内容制作者可能希望对广告系列应用不同的策略，并轮播内容或广告素材以提高效果。共享存储空间可用于跨不同站点运行不同的轮替策略，例如顺序轮替和均匀分布轮替。

在此示例中：

  • creative-rotation.js 嵌入到了框架中。此脚本会设置哪些广告最重要（权重），并调用 Worklet 以确定应显示的内容。
  • creative-rotation-worklet.js 是一个共享存储 Worklet，用于确定应显示的内容和返回的内容的加权分布。

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 时有反馈意见，我们非常期待收到您的宝贵意见。