Menyesuaikan pengalaman pengguna untuk pelanggan yang dikenal

Gunakan worklet Shared Storage untuk mengidentifikasi pelanggan yang dikenal.

Shared Storage API adalah proposal Privacy Sandbox untuk penyimpanan lintas situs tujuan umum, yang mendukung banyak kemungkinan kasus penggunaan. Salah satu contohnya adalah mengidentifikasi pelanggan yang dikenal, yang tersedia untuk diuji di Chrome 104.0.5086.0 dan yang lebih baru.

Anda dapat menyimpan apakah pengguna telah mendaftar di situs Anda ke Shared Storage, lalu merender elemen terpisah berdasarkan status tersimpan pengguna (apakah pengguna adalah pelanggan "lama").

Menetapkan pelanggan yang dikenal

Untuk bereksperimen dengan mengidentifikasi pelanggan yang dikenal di Shared Storage, pastikan Anda menggunakan Chrome 104.0.5086.0 atau yang lebih baru. Aktifkan semua API privasi Iklan di bagian chrome://settings/adPrivacy.

Anda juga dapat mengaktifkan Shared Storage dengan tanda --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames di command line.

Bereksperimen dengan contoh kode

Anda mungkin ingin merender elemen yang berbeda berdasarkan apakah pengguna terlihat di situs lain. Misalnya, penyedia pembayaran mungkin ingin merender tombol "Daftar" atau "Beli sekarang" berdasarkan apakah pengguna telah mendaftar di situs penyedia pembayaran atau belum. Penyimpanan bersama dapat digunakan untuk menetapkan status pengguna dan menyesuaikan pengalaman pengguna berdasarkan status tersebut.

Dalam contoh ini:

  • known-customer.js disematkan dalam frame. Skrip ini menetapkan opsi tombol mana yang harus ditampilkan di situs, "Daftar" atau "Beli sekarang".
  • known-customer-worklet.js adalah worklet penyimpanan bersama yang menentukan apakah pengguna dikenal. Jika pengguna dikenal, informasi akan ditampilkan. Jika pengguna tidak dikenal, informasi tersebut akan ditampilkan untuk menampilkan tombol "Daftar" dan pengguna akan ditandai sebagai pengguna yang dikenal untuk masa mendatang.

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.

Berinteraksi dan memberikan masukan

Perhatikan bahwa proposal Select URL API sedang dalam tahap pembahasan dan pengembangan yang berlanjut, sehingga dapat berubah sewaktu-waktu.

Kami ingin mendengar pendapat Anda tentang Select URL API.