User Experience für bekannte Kunden anpassen

Verwenden Sie ein Shared Storage-Worklet, um bekannte Kunden zu identifizieren.

Die Shared Storage API ist ein Privacy Sandbox-Vorschlag für allgemeinen, websiteübergreifenden Speicher, der viele Anwendungsfälle unterstützt. Ein Beispiel ist die Identifizierung bekannter Kunden, die in Chrome 104.0.5086.0 und höher getestet werden kann.

Sie können speichern, ob sich der Nutzer auf Ihrer Website registriert hat, und dann ein separates Element rendern, je nachdem, ob der gespeicherte Status des Nutzers „bekannter Kunde“ ist.

Bekannte Kunden festlegen

Wenn Sie bekannte Kunden in Shared Storage identifizieren möchten, müssen Sie Chrome 104.0.5086.0 oder höher verwenden. Aktivieren Sie unter chrome://settings/adPrivacy alle APIs zum Datenschutz bei Werbung.

Sie können den freigegebenen Speicher auch mit dem Flag --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames in der Befehlszeile aktivieren.

Mit Codebeispielen experimentieren

Sie können ein anderes Element rendern, je nachdem, ob der Nutzer auf einer anderen Website gesehen wurde. Ein Zahlungsanbieter kann beispielsweise die Schaltfläche „Registrieren“ oder „Jetzt kaufen“ je nachdem anzeigen, ob sich der Nutzer auf der Website des Zahlungsanbieters registriert hat. Mit freigegebenen Speichern können Sie den Status des Nutzers festlegen und die Nutzererfahrung entsprechend anpassen.

In diesem Fall gilt Folgendes:

  • known-customer.js ist in einen Frame eingebettet. In diesem Script wird festgelegt, welche Schaltfläche auf einer Website angezeigt werden soll: „Registrieren“ oder „Jetzt kaufen“.
  • known-customer-worklet.js ist das Worklet für den freigegebenen Speicher, mit dem ermittelt wird, ob der Nutzer bekannt ist. Wenn der Nutzer bekannt ist, werden die Informationen zurückgegeben. Wenn der Nutzer unbekannt ist, werden diese Informationen zurückgegeben, um die Schaltfläche „Registrieren“ anzuzeigen. Der Nutzer wird für die Zukunft als bekannt markiert.

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.

Feedback geben und erhalten

Der Vorschlag für die Select URL API befindet sich in der aktiven Diskussion und Entwicklung und kann sich ändern.

Wir würden uns sehr über Ihr Feedback zur Select URL API freuen.

Auf dem Laufenden bleiben

Benötigst du Hilfe?