Menyesuaikan pengalaman pengguna untuk pelanggan yang dikenal

Gunakan worklet Penyimpanan Bersama 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 diketahui, 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 apakah status pengguna yang disimpan (apakah pengguna adalah pelanggan "terkenal").

Menetapkan pelanggan yang dikenal

Untuk bereksperimen dengan mengidentifikasi pelanggan yang diketahui 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 Penyimpanan Bersama 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 dilihat 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 mereka berdasarkan status tersebut.

Dalam contoh ini:

  • known-customer.js disematkan dalam bingkai. Skrip ini menetapkan opsi tombol yang akan ditampilkan di situs, "Daftar" atau "Beli sekarang".
  • known-customer-worklet.js adalah worklet penyimpanan bersama yang menentukan apakah pengguna diketahui. Jika pengguna diketahui, informasi akan ditampilkan. Jika pengguna tidak dikenal, informasi tersebut akan ditampilkan untuk menampilkan tombol "Daftar" dan pengguna akan ditandai sebagai 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);

Kasus penggunaan

Semua kasus penggunaan yang tersedia untuk Select URL API dapat ditemukan di bagian ini. Kami akan terus menambahkan contoh saat menerima masukan dan menemukan kasus pengujian baru.

Berinteraksi dan memberikan masukan

Perhatikan bahwa proposal Select URL API sedang dalam diskusi dan pengembangan aktif serta dapat berubah sewaktu-waktu.

Kami ingin mengetahui pendapat Anda tentang Select URL API.

Mendapatkan Info Terbaru

  • Daftar Email: Berlangganan ke daftar email kami untuk mendapatkan info terbaru dan pengumuman terkait API URL Pilih dan Shared Storage.

Perlu Bantuan?