Personnaliser l'expérience utilisateur pour les clients connus

Utilisez un worklet Shared Storage pour identifier les clients connus.

L'API Shared Storage est une proposition de la Privacy Sandbox pour le stockage multisite à usage général, qui prend en charge de nombreux cas d'utilisation possibles. Par exemple, l'identification des clients connus, qui est disponible pour les tests dans Chrome 104.0.5086.0 et versions ultérieures.

Vous pouvez stocker dans Shared Storage si l'utilisateur s'est inscrit sur votre site, puis afficher un élément distinct en fonction de l'état stocké de l'utilisateur (est-il un client "connu" ?).

Définir des clients connus

Pour tester l'identification des clients connus dans Shared Storage, vérifiez que vous utilisez Chrome 104.0.5086.0 ou version ultérieure. Activez toutes les API de confidentialité des annonces sous chrome://settings/adPrivacy.

Vous pouvez également activer le stockage partagé avec l'indicateur --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames dans la ligne de commande.

Tester des exemples de code

Vous pouvez afficher un élément différent selon que l'utilisateur a été vu ou non sur un autre site. Par exemple, un fournisseur de paiement peut vouloir afficher un bouton "S'inscrire" ou "Acheter maintenant" selon que l'utilisateur s'est inscrit ou non sur le site du fournisseur de paiement. Le stockage partagé peut être utilisé pour définir l'état de l'utilisateur et personnaliser son expérience en fonction de cet état.

Dans cet exemple :

  • known-customer.js est intégré dans un frame. Ce script définit les options du bouton à afficher sur un site : "S'inscrire" ou "Acheter maintenant".
  • known-customer-worklet.js est le worklet de stockage partagé qui détermine si l'utilisateur est connu. Si l'utilisateur est connu, les informations sont renvoyées. Si l'utilisateur est inconnu, ces informations sont renvoyées pour afficher le bouton "S'inscrire", et l'utilisateur est marqué comme connu pour l'avenir.

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

Cas d'utilisation

Vous trouverez dans cette section tous les cas d'utilisation disponibles pour l'API Select URL. Nous continuerons d'ajouter des exemples à mesure que nous recevrons des commentaires et découvrirons de nouveaux cas de test.

Interagir et envoyer des commentaires

Notez que la proposition d'API Select URL est en cours de discussion et de développement, et qu'elle est susceptible d'être modifiée.

Nous aimerions connaître votre avis sur l'API Select URL.