Bilinen müşteriler için kullanıcı deneyimini özelleştirme

Bilinen müşterileri tanımlamak için Shared Storage iş akışını kullanın.

Shared Storage API, genel amaçlı, siteler arası depolama için bir Privacy Sandbox teklifidir ve birçok olası kullanım alanını destekler. Bilinen müşterileri tanımlama buna örnek verilebilir. Bu özellik, Chrome 104.0.5086.0 ve sonraki sürümlerde test edilebilir.

Kullanıcının sitenize kaydolup kaydolmadığını Shared Storage'da saklayabilir, ardından kullanıcının depolanan durumuna (kullanıcı "bilinen" bir müşteri mi?) göre ayrı bir öğe oluşturabilirsiniz.

Bilinen müşterileri ayarlama

Shared Storage'da bilinen müşterileri tanımlama denemeleri yapmak için Chrome 104.0.5086.0 veya sonraki bir sürümü kullandığınızdan emin olun. chrome://settings/adPrivacy altındaki tüm reklam gizliliği API'lerini etkinleştirin.

Paylaşılan depolama alanını, komut satırında --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames işaretini kullanarak da etkinleştirebilirsiniz.

Kod örneklerini deneme

Kullanıcının farklı bir sitede görülüp görülmediğine bağlı olarak farklı bir öğe oluşturmak isteyebilirsiniz. Örneğin, bir ödeme sağlayıcı, kullanıcının ödeme sağlayıcının sitesine kaydolup kaydolmadığına bağlı olarak "Kaydol" veya "Şimdi satın al" düğmesi oluşturmak isteyebilir. Paylaşılan depolama alanı, kullanıcının durumunu ayarlamak ve kullanıcı deneyimini bu duruma göre özelleştirmek için kullanılabilir.

Bu örnekte:

  • known-customer.js bir çerçeveye yerleştirilmiş. Bu komut dosyası, bir sitede hangi düğmenin gösterileceğine dair seçenekleri belirler: "Kaydol" veya "Şimdi satın al".
  • known-customer-worklet.js, kullanıcının bilinen bir kullanıcı olup olmadığını belirleyen paylaşılan depolama alanı işleyicisidir. Kullanıcı biliniyorsa bilgiler döndürülür. Kullanıcı bilinmiyorsa "Kaydol" düğmesinin gösterilmesi için bu bilgiler döndürülür ve kullanıcı gelecekte bilindiği şekilde işaretlenir.

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.

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?