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

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

Shared Storage API, genel amaçlı, siteler arası depolama için bir Özel Korumalı Alan önerisidir ve birçok olası kullanım alanını destekler. Bilinen müşterileri tanımlama, Chrome 104.0.5086.0 ve sonraki sürümlerde test edilebilir.

Kullanıcının sitenize kayıtlı olup olmadığını Shared Storage'da depolayabilir, 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 özelliğini denemek için Chrome 104.0.5086.0 veya sonraki bir sürümü kullandığınızı doğrulayın. chrome://settings/adPrivacy bölümündeki tüm reklam gizliliği API'lerini etkinleştirin.

Paylaşılan Depolama Alanı'nı komut satırındaki --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames işaretini kullanarak da etkinleştirebilirsiniz.

Kod örnekleriyle denemeler yapma

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 kayıtlı olup olmadığına bağlı olarak "Kaydol" veya "Hemen 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ğini ("Kaydol" veya "Hemen satın al") belirler.
  • known-customer-worklet.js, kullanıcının tanınıp tanınmadığını belirleyen Shared Storage işlevidir. Kullanıcı biliniyorsa bilgiler döndürülür. Kullanıcı bilinmiyorsa "Kaydol" düğmesini göstermek için bu bilgiler döndürülür ve kullanıcı gelecekte bilinir olarak 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);

Kullanım alanları

Seçili URL API'si için kullanılabilen tüm kullanım alanlarını bu bölümde bulabilirsiniz. Geri bildirim aldıkça ve yeni test örnekleri keşfettikçe örnekler eklemeye devam edeceğiz.

Etkileşim kurma ve geri bildirim paylaşma

Select URL API teklifinin aktif olarak tartışılıp geliştirildiğini ve bu nedenle değişebileceğini unutmayın.

Select URL API hakkındaki düşüncelerinizi öğrenmek istiyoruz.