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

共有ストレージ ワークレットを実行して 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);

ユースケース

このセクションでは、Select URL API で利用可能なすべてのユースケースについて説明します。フィードバックや新しいテストケースの検出に応じて、例を追加していきます。

意見交換とフィードバックの提供

Select URL API プロポーザルは現在議論と開発中であり、変更される可能性があります。

Select URL API について、ぜひご意見をお聞かせください。

最新情報を入手する

  • メーリング リスト: メーリング リストに登録すると、Select URL API と Shared Storage API に関する最新情報やお知らせを受け取ることができます。

ご不明な点がある場合