להתאים אישית את חוויית המשתמש ללקוחות מוכרים

אפשר להשתמש ב-worklet של Shared Storage כדי לזהות לקוחות מוכרים.

‫Shared Storage API הוא הצעה של ארגז החול לפרטיות לאחסון כללי בין אתרים, שתומך בהרבה תרחישי שימוש אפשריים. דוגמה אחת היא זיהוי לקוחות מוכרים, שאפשר לבדוק ב-Chrome 104.0.5086.0 ואילך.

אתם יכולים לאחסן ב-Shared Storage את המידע אם המשתמש נרשם באתר שלכם, ואז להציג רכיב נפרד בהתאם לסטטוס המאוחסן של המשתמש (האם המשתמש הוא לקוח מוכר).

הגדרת לקוחות מוכרים

כדי להתנסות בזיהוי לקוחות מוכרים ב-Shared Storage, צריך לוודא שאתם משתמשים בגרסה Chrome 104.0.5086.0 ואילך. מפעילים את כל ממשקי ה-API לשמירה על פרטיות בפרסום בקטע chrome://settings/adPrivacy.

אפשר גם להפעיל את האחסון המשותף באמצעות הדגל --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames בשורת הפקודה.

התנסות בדוגמאות קוד

יכול להיות שתרצו להציג רכיב שונה בהתאם לשאלה אם המשתמש נצפה באתר אחר. לדוגמה, ספק תשלומים עשוי לרצות להציג לחצן 'הרשמה' או 'קנייה עכשיו' בהתאם לשאלה אם המשתמש נרשם באתר של ספק התשלומים. אפשר להשתמש באחסון משותף כדי להגדיר את הסטטוס של המשתמש ולהתאים אישית את חוויית המשתמש על סמך הסטטוס הזה.

בדוגמה הזו:

  • ‫known-customer.js מוטמע במסגרת. הסקריפט הזה מגדיר את האפשרויות לגבי הלחצן שיוצג באתר: 'הרשמה' או 'קנייה עכשיו'.
  • ‫known-customer-worklet.js הוא ה-worklet של Shared Storage שקובע אם המשתמש מוכר. אם המשתמש מוכר, המידע מוחזר. אם המשתמש לא מוכר, המידע הזה מוחזר כדי להציג את הלחצן 'הרשמה', והמשתמש מסומן כמוכר לעתיד.

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);

תרחישים לדוגמה

בקטע הזה מפורטים כל תרחישי השימוש הזמינים של Select URL API. נמשיך להוסיף דוגמאות ככל שנקבל משוב ונמצא תרחישי בדיקה חדשים.

השתתפות ושיתוף משוב

שימו לב שההצעה לגבי Select URL API נמצאת כרגע בתהליכי דיון ופיתוח, ויכול להיות שהיא תשתנה.

נשמח לשמוע מה דעתכם על Select URL API.