기존 고객에 맞게 사용자 환경 맞춤설정

Shared Storage 워크릿을 사용하여 알려진 고객을 식별합니다.

Shared Storage API는 다양한 사용 사례를 지원하는 범용 크로스 사이트 스토리지를 위한 개인 정보 보호 샌드박스 제안입니다. 한 가지 예로 알려진 고객을 식별하는 기능이 있으며, Chrome 104.0.5086.0 이상에서 테스트할 수 있습니다.

사용자가 사이트에 등록했는지 여부를 Shared Storage에 저장한 다음, 사용자의 저장된 상태 (사용자가 '알려진' 고객인지)에 따라 별도의 요소를 렌더링할 수 있습니다.

알려진 고객 설정

공유 스토리지에서 알려진 고객을 식별하는 실험을 하려면 Chrome 104.0.5086.0 이상을 사용하고 있는지 확인하세요. chrome://settings/adPrivacy에서 모든 광고 개인 정보 보호 API를 사용 설정합니다.

명령줄에서 --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames 플래그를 사용하여 공유 스토리지를 사용 설정할 수도 있습니다.

코드 샘플 실험

사용자가 다른 사이트에서 확인되었는지 여부에 따라 다른 요소를 렌더링할 수 있습니다. 예를 들어 결제 제공업체는 사용자가 결제 제공업체의 사이트에 등록했는지 여부에 따라 '등록' 또는 '지금 구매' 버튼을 렌더링할 수 있습니다. 공유 스토리지를 사용하면 사용자의 상태를 설정하고 해당 상태에 따라 사용자 환경을 맞춤설정할 수 있습니다.

예를 들면 다음과 같습니다.

  • known-customer.js이 프레임에 삽입됩니다. 이 스크립트는 사이트에 표시할 버튼('등록' 또는 '지금 구매')의 옵션을 설정합니다.
  • known-customer-worklet.js는 사용자가 알려진 사용자인지 확인하는 공유 스토리지 워클릿입니다. 사용자를 알 수 있는 경우 정보가 반환됩니다. 사용자를 알 수 없는 경우 '등록' 버튼을 표시하기 위해 해당 정보가 반환되고 사용자는 향후를 위해 알려진 것으로 표시됩니다.

known-customer.js

// The first URL for the "register" button is rendered for unknown users.
const BUTTON_URLS = [
  { url: `https://${advertiserUrl}/ads/register-button.html` },
  { url: `https://${advertiserUrl}/ads/buy-now-button.html` },
];

async function injectButton() {
  // Load the worklet module
  await window.sharedStorage.worklet.addModule('known-customer-worklet.js');

  // Set the initial status to unknown ('0' is unknown and '1' is known)
  window.sharedStorage.set('known-customer', 0, {
    ignoreIfPresent: true,
  });

  // Run the URL selection operation to choose the button based on the user status
  const fencedFrameConfig = await window.sharedStorage.selectURL('known-customer', BUTTON_URLS, {
    resolveToConfig: true
  });

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

injectButton();

known-customer-worklet.js

class SelectURLOperation {
  async run(urls) {
    const knownCustomer = await sharedStorage.get('known-customer');

    // '0' is unknown and '1' is known
    return parseInt(knownCustomer);
  }
}

register('known-customer', SelectURLOperation);

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.

참여 및 의견 공유

Select URL API 제안은 현재 활발히 논의되고 개발 중이며 변경될 가능성이 있습니다.

Select URL API에 대한 의견을 기다리고 있습니다.