تخصيص تجربة المستخدم للعملاء المعروفين

استخدِم Shared Storage worklet لتحديد العملاء المعروفين.

‫Shared Storage API هي اقتراح ضمن "مبادرة حماية الخصوصية" لتوفير مساحة تخزين عامة الأغراض على مستوى المواقع الإلكترونية، وهي تتيح العديد من حالات الاستخدام المحتملة. أحد الأمثلة على ذلك هو تحديد العملاء المعروفين، وهو متاح للاختبار في الإصدار 104.0.5086.0 من Chrome والإصدارات الأحدث.

يمكنك تخزين ما إذا كان المستخدم قد سجّل على موقعك الإلكتروني في Shared Storage، ثم عرض عنصر منفصل استنادًا إلى حالة المستخدم المخزّنة (ما إذا كان المستخدم عميلاً "معروفًا").

ضبط العملاء المعروفين

لتجربة تحديد العملاء المعروفين في Shared Storage، تأكَّد من استخدام الإصدار 104.0.5086.0 من Chrome أو إصدار أحدث. فعِّل جميع واجهات برمجة التطبيقات الخاصة بالخصوصية في عرض الإعلانات ضِمن chrome://settings/adPrivacy.

يمكنك أيضًا تفعيل "مساحة التخزين المشتركة" باستخدام العلامة --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames في سطر الأوامر.

تجربة عيّنات التعليمات البرمجية

قد تحتاج إلى عرض عنصر مختلف استنادًا إلى ما إذا كان المستخدم قد شوهد على موقع إلكتروني آخر. على سبيل المثال، قد يريد مقدّم خدمة الدفع عرض زر "تسجيل" أو "شراء الآن" استنادًا إلى ما إذا كان المستخدم قد سجّل في موقع مقدّم خدمة الدفع. يمكن استخدام مساحة التخزين المشترَكة لضبط حالة المستخدم وتخصيص تجربة المستخدم استنادًا إلى هذه الحالة.

في هذا المثال:

  • known-customer.js مضمّن في إطار. يضبط هذا النص البرمجي الخيارات الخاصة بالزرّ الذي يجب عرضه على الموقع الإلكتروني، أي "تسجيل" أو "شراء الآن".
  • ‫known-customer-worklet.js هي وحدة عمل مساحة التخزين المشترَكة التي تحدّد ما إذا كان المستخدم معروفًا. إذا كان المستخدم معروفًا، يتم عرض المعلومات. إذا كان المستخدم غير معروف، يتم عرض هذه المعلومات لعرض الزر "تسجيل" ويتم تصنيف المستخدم على أنّه معروف في المستقبل.

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.