تجربه کاربری را برای مشتریان شناخته شده سفارشی کنید

از یک کتابچه‌ی کاریِ «ذخیره‌ی مشترک» برای شناسایی مشتریان شناخته‌شده استفاده کنید.

رابط برنامه‌نویسی کاربردی ذخیره‌سازی مشترک (Shared Storage API) یک پیشنهاد Privacy Sandbox برای ذخیره‌سازی چندمنظوره و بین‌سایتی است که از بسیاری از موارد استفاده ممکن پشتیبانی می‌کند. یک مثال، شناسایی مشتریان شناخته‌شده است که برای آزمایش در Chrome 104.0.5086.0 و بالاتر در دسترس است.

شما می‌توانید ذخیره کنید که آیا کاربر در سایت شما ثبت‌نام کرده است یا خیر، آن را در Shared Storage ذخیره کنید، سپس بر اساس وضعیت ذخیره‌شده کاربر (آیا کاربر یک مشتری «شناخته‌شده» است) یک عنصر جداگانه رندر کنید.

مشتریان شناخته شده را تنظیم کنید

برای آزمایش شناسایی مشتریان شناخته‌شده در Shared Storage، تأیید کنید که از Chrome 104.0.5086.0 یا بالاتر استفاده می‌کنید. تمام APIهای حریم خصوصی تبلیغات را در chrome://settings/adPrivacy فعال کنید.

همچنین می‌توانید Shared Storage را با استفاده از پرچم --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames در خط فرمان فعال کنید.

با نمونه کدها آزمایش کنید

ممکن است بخواهید عنصر متفاوتی را بر اساس اینکه کاربر در سایت دیگری دیده شده است یا خیر، نمایش دهید. برای مثال، یک ارائه‌دهنده خدمات پرداخت ممکن است بخواهد دکمه "ثبت نام" یا "همین حالا بخرید" را بر اساس اینکه کاربر در سایت ارائه‌دهنده خدمات پرداخت ثبت نام کرده است یا خیر، نمایش دهد. می‌توان از فضای ذخیره‌سازی مشترک برای تنظیم وضعیت کاربر و سفارشی‌سازی تجربه کاربری او بر اساس آن وضعیت استفاده کرد.

در این مثال:

  • known-customer.js در یک فریم تعبیه شده است. این اسکریپت گزینه‌هایی را برای نمایش دکمه در سایت، «ثبت نام» یا «خرید» تنظیم می‌کند.
  • known-customer-worklet.js یک فایل Worklet ذخیره‌سازی مشترک است که مشخص می‌کند آیا کاربر شناخته شده است یا خیر. اگر کاربر شناخته شده باشد، اطلاعات برگردانده می‌شود. اگر کاربر ناشناخته باشد، آن اطلاعات برای نمایش دکمه "ثبت نام" برگردانده می‌شود و کاربر برای آینده به عنوان شناخته شده علامت گذاری می‌شود.

مشتری شناخته شده.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();

شناخته شده-مشتری-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);

موارد استفاده کنید

همه موارد استفاده موجود برای Select URL API را می‌توانید در این بخش پیدا کنید. با دریافت بازخورد و کشف موارد آزمایشی جدید، به افزودن نمونه‌ها ادامه خواهیم داد.

مشارکت کنید و بازخورد خود را به اشتراک بگذارید

توجه داشته باشید که پیشنهاد Select URL API در حال بحث و توسعه فعال است و ممکن است تغییر کند.

مشتاقانه منتظر شنیدن نظرات شما در مورد Select URL API هستیم.