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 multisites à usage général, qui prend en charge de nombreux cas d'utilisation possibles. Par exemple, l'identification des clients connus, qui est disponible à des fins de test dans Chrome 104.0.5086.0 et versions ultérieures.

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

Définir les clients connus

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

Vous pouvez également activer Shared Storage 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 sur un autre site. Par exemple, un fournisseur de services de paiement peut afficher un bouton "S'inscrire" ou "Acheter maintenant" en fonction de l'état de l'enregistrement de l'utilisateur sur le site du fournisseur. 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é à un frame. Ce script définit les options pour le 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);

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.

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.