Dostosowywanie interfejsu pod kątem znanych klientów

Użyj workletu Shared Storage, aby identyfikować znanych klientów.

Shared Storage API to propozycja w ramach Piaskownicy prywatności dotycząca ogólnego przeznaczenia pamięci między witrynami, która obsługuje wiele możliwych przypadków użycia. Przykładem jest identyfikowanie znanych klientów, które jest dostępne do testowania w Chrome w wersji 104.0.5086.0 i nowszej.

Możesz zapisać w Shared Storage informację o tym, czy użytkownik zarejestrował się w Twojej witrynie, a następnie renderować osobny element w zależności od tego, czy użytkownik jest „znanym” klientem.

Ustawianie znanych klientów

Aby eksperymentować z identyfikowaniem znanych klientów w interfejsie Shared Storage, upewnij się, że używasz Chrome w wersji 104.0.5086.0 lub nowszej. Włącz wszystkie interfejsy API ochrony prywatności w reklamach w sekcji chrome://settings/adPrivacy.

Pamięć współdzieloną możesz też włączyć za pomocą flagi --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames w wierszu poleceń.

Eksperymentowanie z przykładowymi fragmentami kodu

Możesz chcieć renderować inny element w zależności od tego, czy użytkownik był widziany w innej witrynie. Na przykład dostawca usług płatniczych może chcieć wyświetlać przycisk „Zarejestruj się” lub „Kup teraz” w zależności od tego, czy użytkownik zarejestrował się w jego witrynie. Pamięć współdzielona może służyć do ustawiania stanu użytkownika i dostosowywania do niego wrażeń użytkownika.

W tym przykładzie:

  • known-customer.js jest umieszczony w ramce. Ten skrypt określa, który przycisk powinien być wyświetlany w witrynie: „Zarejestruj się” czy „Kup teraz”.
  • known-customer-worklet.js to element roboczy pamięci współdzielonej, który określa, czy użytkownik jest znany. Jeśli użytkownik jest znany, informacje są zwracane. Jeśli użytkownik jest nieznany, te informacje są zwracane, aby wyświetlić przycisk „Zarejestruj się”, a użytkownik jest oznaczany jako znany na przyszłość.

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

Przypadki użycia

W tej sekcji znajdziesz wszystkie dostępne przypadki użycia interfejsu Select URL API. Będziemy dodawać kolejne przykłady, gdy będziemy otrzymywać opinie i odkrywać nowe przypadki testowe.

Angażowanie się i przesyłanie opinii

Pamiętaj, że propozycja interfejsu Select URL API jest obecnie przedmiotem dyskusji i prac rozwojowych, a jej treść może ulec zmianie.

Chętnie poznamy Twoją opinię o interfejsie Select URL API.