Personalizza l'esperienza utente per i clienti noti

Utilizza un worklet Shared Storage per identificare i clienti noti.

L'API Shared Storage è una proposta di Privacy Sandbox per l'archiviazione cross-site per uso generico, che supporta molti possibili casi d'uso. Un esempio è l'identificazione dei clienti noti, che è disponibile per i test in Chrome 104.0.5086.0 e versioni successive.

Puoi memorizzare in Shared Storage se l'utente si è registrato sul tuo sito, quindi visualizzare un elemento separato in base allo stato memorizzato dell'utente (è un cliente "noto").

Impostare i clienti noti

Per sperimentare l'identificazione dei clienti noti in Shared Storage, verifica di utilizzare Chrome 104.0.5086.0 o versioni successive. Abilita tutte le API per la privacy degli annunci in chrome://settings/adPrivacy.

Puoi anche attivare Shared Storage con il flag --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames nella riga di comando.

Sperimenta con esempi di codice

Potresti voler eseguire il rendering di un elemento diverso in base al fatto che l'utente sia stato visto su un altro sito. Ad esempio, un fornitore di servizi di pagamento potrebbe voler visualizzare un pulsante "Registrati" o "Acquista ora" a seconda che l'utente si sia registrato sul sito del fornitore di servizi di pagamento. Lo spazio di archiviazione condiviso può essere utilizzato per impostare lo stato dell'utente e personalizzare la sua esperienza utente in base a questo stato.

In questo esempio:

  • known-customer.js è incorporato in un frame. Questo script imposta le opzioni per il pulsante da visualizzare su un sito: "Registrati" o "Acquista ora".
  • known-customer-worklet.js è il worklet di archiviazione condivisa che determina se l'utente è noto. Se l'utente è noto, le informazioni vengono restituite. Se l'utente è sconosciuto, queste informazioni vengono restituite per visualizzare il pulsante "Registrati" e l'utente viene contrassegnato come noto per il futuro.

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.