フリークエンシーでクリエイティブを選択する

共有ストレージ ワークレットを実行して URL を選択し、フェンス付きフレームでレンダリングします。

Shared Storage API はプライバシー さまざまな用途をサポートする汎用のクロスサイト ストレージ向けのサンドボックス案 見ていきましょう。その一例がフリークエンシー制御で、 Chrome ベータ版 104.0.5086.0 以降でテストできます。

ワークレット スクリプトを実行して、保存されている URL のリストに基づいて、 その URL をフェンス付きフレームでレンダリングします。これを使用して フリークエンシーの上限に達したとき。

フリークエンシー別のクリエイティブの選択をテスト

共有ストレージとフェンス付きフレームでフリークエンシーによるクリエイティブの選択をテストするには、次の要件を満たしていることを確認してください。 Chrome 104.0.5086.0 以降を使用する。chrome://settings/adPrivacy で、すべての広告プライバシー API を有効にします。

コマンドラインで --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames フラグを使用して共有ストレージを有効にすることもできます。

コードサンプルでテストする

不透明な URL を選択して作成するには、ワークレット モジュールを登録して、 使用されますワークレット クラスは、最大 8 つの URL のリストを受け取り、 選択された URL のインデックスを返します。

クライアントが sharedStorage.selectURL() を呼び出すと、ワークレットは が実行され、フェンス付きフレームにレンダリングされる不透明な URL が返されます。

たとえば、ユーザーがこれまでに見た頻度に応じて、別の広告やコンテンツを選択してレンダリングするとします。ユーザーがコンテンツを閲覧した回数をカウントし、その値を共有ストレージに保存できます。一度保存すると、共有ストレージの値はさまざまなオリジンで利用できるようになります。

次に、共有ストレージ ワークレットが共有ストレージ内の値を読み取り、ビューを追加するたびにカウンタをインクリメントします。カウントが事前定義された上限に達していない場合は、レンダリングするコンテンツが返されます（インデックス 1）。そうでない場合は、デフォルトの URL が返されます（インデックス 0）。

この例では、次のようになります。

  • creative-selection-by-frequencyjs は、コンテンツ プロデューサーまたは広告主の iframe を介して読み込まれ、 共有ストレージ ワークレットを読み込み、返された opaque をレンダリングする フェンス付きフレームに変換できます。
  • creative-selection-by-frequency-worklet.js は、以下を読み取る共有ストレージ ワークレットです。 コンテンツまたは広告クリエイティブにどの URL が返されるかを判断します。

creative-selection-by-frequency.js

// The first URL is the default content or ad to be rendered when the frequency limits reached.
const CONTENT_URLS = [
  { url: `https://${contentProducerUrl}/default-content.html` },
  { url: `https://${contentProducerUrl}/example-content.html` },
];

async function injectAd() {
  // Load the worklet module.
  await window.sharedStorage.worklet.addModule('creative-selection-by-frequency-worklet.js');

  // Set the initial frequency count
  window.sharedStorage.set('frequency-count', 0, {
    ignoreIfPresent: true,
  });

  // Run the URL selection operation to choose an ad based on the frequency count in shared storage.
  const fencedFrameConfig = await window.sharedStorage.selectURL('creative-selection-by-frequency', CONTENT_URLS, {
    resolveToConfig: true
  });

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

injectAd();

creative-selection-by-frequency-worklet.js

const FREQUENCY_LIMIT = 5;

class CreativeSelectionByFrequencyOperation {
  async run(urls, data) {
    // Read the current frequency limit in shared storage
    const count = parseInt(await sharedStorage.get('frequency-count'));

    // Check if the frequency limit has been reached.
    if (count === FREQUENCY_LIMIT) {
      console.log('Frequency limit has been reached, and the default content will be rendered.');
      return 0;
    }

    // Set the new frequency count in shared storage
    await sharedStorage.set('frequency-count', count + 1);
    return 1;
  }
}

// Register the operation as 'creative-selection-by-frequency'.
register('creative-selection-by-frequency', CreativeSelectionByFrequencyOperation);

Use cases

All available use cases for Select URL API can be found in this section. We'll continue to add examples as we receive feedback and discover new test cases.

Engage and share feedback

Note that the Select URL API proposal is under active discussion and development and subject to change.

We're eager to hear your thoughts on the Select URL API.

Stay Informed

  • Mailing List: Subscribe to our mailing list for the latest updates and announcements related to the Select URL and Shared Storage APIs.

Need Help?