SharedStorageOperation

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das SharedStorageOperation-Interface der Shared Storage API stellt die Basisklasse für alle Output-Gate-Operationstypen dar.

Die Output-Gate-Typen sind nachfolgend aufgeführt:

Name	Beschreibung	Definiert durch	Aufgerufen durch
URL-Auswahl	Wird verwendet, um eine URL auszuwählen, die dem Nutzer basierend auf den Shared-Storage-Daten angezeigt werden soll.	[`SharedStorageSelectURLOperation`](/de/docs/Web/API/SharedStorageSelectURLOperation)	[`selectURL()`](/de/docs/Web/API/WindowSharedStorage/selectURL)
Run	Eine generische Möglichkeit, einige Shared-Storage-Daten zu verarbeiten. Wird beispielsweise von der Private Aggregation API verwendet, um Shared-Storage-Daten zu verarbeiten und aggregierte Berichte zu erstellen.	[`SharedStorageRunOperation`](/de/docs/Web/API/SharedStorageRunOperation)	[`run()`](/de/docs/Web/API/WindowSharedStorage/run)

Beispiele

Definition einzelner Operationen

Viele Shared-Storage-Worklet-Modulscripte definieren und registrieren nur eine einzige Operation; Beispiele finden Sie auf den Seiten zu SharedStorageSelectURLOperation und SharedStorageRunOperation.

Definition mehrerer Operationen

In fortgeschritteneren Fällen ist es möglich, mehrere Operationen im selben Shared-Storage-Worklet-Modulskript mit unterschiedlichen Namen zu definieren und zu registrieren. Im folgenden Worklet-Modulskript definieren wir eine URL-Auswahloperation namens SelectURLOperation, die eine URL für A/B-Tests auswählt, und eine Run-Operation namens ExperimentGroupReportingOperation, die einen Histogrammbericht basierend auf der A/B-Testgruppe des Nutzers ausführt:

// ab-testing-worklet.js

class SelectURLOperation {
  async run(urls, data) {
    // Read the user's group from shared storage
    const experimentGroup = await sharedStorage.get("ab-testing-group");

    // Log to console for the demo
    console.log(`urls = ${JSON.stringify(urls)}`);
    console.log(`data = ${JSON.stringify(data)}`);
    console.log(`ab-testing-group in shared storage is ${experimentGroup}`);

    // Return the index of the group
    return data.indexOf(experimentGroup);
  }
}

function getBucketForTestingGroup(testingGroup) {
  switch (testingGroup) {
    case "control":
      return 0;
    case "experiment-a":
      return 1;
    case "experiment-b":
      return 2;
  }
}

class ExperimentGroupReportingOperation {
  async run() {
    const experimentGroup = await sharedStorage.get("ab-testing-group");

    const bucket = BigInt(getBucketForTestingGroup(experimentGroup));
    privateAggregation.contributeToHistogram({ bucket, value: 1 });
  }
}

// Register the operations
register("ab-testing", SelectURLOperation);
register("experiment-group-reporting", ExperimentGroupReportingOperation);

Im Hauptbrowsing-Kontext werden diese Operationen durch selectURL() und run() aufgerufen. Die Operationen, die über diese Methoden aufgerufen werden sollen, werden anhand der Namen ausgewählt, mit denen sie registriert wurden, und sie müssen auch den Strukturen entsprechen, die von den Klassen SharedStorageSelectURLOperation und SharedStorageRunOperation und deren run()-Methoden definiert werden.

// For demo purposes. The hostname is used to determine the usage of
// development localhost URL vs production URL
const contentProducerUrl = window.location.host;

// Map the experiment groups to the URLs
const EXPERIMENT_MAP = [
  {
    group: "control",
    url: `https://${contentProducerUrl}/ads/default-ad.html`,
  },
  {
    group: "experiment-a",
    url: `https://${contentProducerUrl}/ads/experiment-ad-a.html`,
  },
  {
    group: "experiment-b",
    url: `https://${contentProducerUrl}/ads/experiment-ad-b.html`,
  },
];

// Choose a random group for the initial experiment
function getRandomExperiment() {
  const randomIndex = Math.floor(Math.random() * EXPERIMENT_MAP.length);
  return EXPERIMENT_MAP[randomIndex].group;
}

async function injectAd() {
  // Load the worklet module
  await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");

  // Set the initial value in the storage to a random experiment group
  window.sharedStorage.set("ab-testing-group", getRandomExperiment(), {
    ignoreIfPresent: true,
  });

  const urls = EXPERIMENT_MAP.map(({ url }) => ({ url }));
  const groups = EXPERIMENT_MAP.map(({ group }) => group);

  // Resolve the selectURL call to a fenced frame config only when it exists on the page
  const resolveToConfig = typeof window.FencedFrameConfig !== "undefined";

  // Run the URL selection operation to select an ad based on the experiment group in shared storage
  const selectedUrl = await window.sharedStorage.selectURL("ab-testing", urls, {
    data: groups,
    resolveToConfig,
    keepAlive: true,
  });

  const adSlot = document.getElementById("ad-slot");

  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
    adSlot.config = selectedUrl;
  } else {
    adSlot.src = selectedUrl;
  }

  // Run the reporting operation
  await window.sharedStorage.run("experiment-group-reporting");
}

injectAd();

Spezifikationen

Specification
Shared Storage API # sharedstorageoperation

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Shared Storage API