जाने-पहचाने ग्राहकों के लिए, उपयोगकर्ता अनुभव को पसंद के मुताबिक बनाना

Shared Storage के वर्कलेट का इस्तेमाल करके, जाने-पहचाने ग्राहकों की पहचान करें.

Shared Storage API, Privacy Sandbox का एक प्रस्ताव है. इसका इस्तेमाल, अलग-अलग कामों के लिए और एक से ज़्यादा साइटों पर डेटा सेव करने के लिए किया जाता है. यह कई तरह के इस्तेमाल के उदाहरणों के साथ काम करता है. इसका एक उदाहरण, जाने-पहचाने ग्राहकों की पहचान करना है. यह सुविधा, Chrome 104.0.5086.0 और इसके बाद के वर्शन में टेस्ट करने के लिए उपलब्ध है.

Shared Storage में यह जानकारी सेव की जा सकती है कि उपयोगकर्ता ने आपकी साइट पर रजिस्टर किया है या नहीं. इसके बाद, उपयोगकर्ता की सेव की गई स्थिति के आधार पर कोई अलग एलिमेंट रेंडर किया जा सकता है. इससे यह पता चलता है कि उपयोगकर्ता "पहचाना गया" ग्राहक है या नहीं.

उन ग्राहकों के लिए कुकी सेट करना जिनकी जानकारी मौजूद है

Shared Storage में, जाने-पहचाने ग्राहकों की पहचान करने के लिए एक्सपेरिमेंट करने से पहले, पक्का करें कि Chrome 104.0.5086.0 या उसके बाद के वर्शन का इस्तेमाल किया जा रहा हो. chrome://settings/adPrivacy में जाकर, विज्ञापन देखने वाले की निजता बनाए रखने से जुड़े सभी एपीआई चालू करें.

कमांड लाइन में --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames फ़्लैग का इस्तेमाल करके भी, शेयर किए गए स्टोरेज की सुविधा चालू की जा सकती है.

कोड सैंपल आज़माएँ

ऐसा हो सकता है कि आपको उपयोगकर्ता के किसी दूसरी साइट पर देखे जाने के आधार पर, कोई दूसरा एलिमेंट रेंडर करना हो. उदाहरण के लिए, पेमेंट की सुविधा देने वाली कंपनी, "रजिस्टर करें" या "अभी खरीदें" बटन को रेंडर करना चाहती है. हालांकि, यह इस बात पर निर्भर करता है कि उपयोगकर्ता ने पेमेंट की सुविधा देने वाली कंपनी की साइट पर रजिस्टर किया है या नहीं. Shared Storage का इस्तेमाल, उपयोगकर्ता का स्टेटस सेट करने के लिए किया जा सकता है. साथ ही, इस स्टेटस के आधार पर उपयोगकर्ता अनुभव को पसंद के मुताबिक बनाया जा सकता है.

इस उदाहरण में:

  • known-customer.js को फ़्रेम में एम्बेड किया गया है. यह स्क्रिप्ट, उन विकल्पों को सेट करती है जिनके लिए किसी साइट पर "रजिस्टर करें" या "अभी खरीदें" बटन दिखाया जाना चाहिए.
  • known-customer-worklet.js, 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 के बारे में आपके सुझाव/राय का इंतज़ार है.