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

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.

• Rotate ad creatives: Store data, such as creative ID and user interaction, to determine which creative users' see across different sites.
• Select ad creatives by frequency: Use view count data to determine which creative users' see across different sites.
• Run A/B testing: You can assign a user to an experiment group, then store that group in Shared Storage to be accessed cross-site.
• Customize experience for known customers: Share custom content and calls-to-action based on a user's registration status or other user states.

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.

• Proposal: Review the detailed proposal.
• Discussion: Join the ongoing discussion to ask questions and share your insights.