Topics API demo

This site provides a basic demo of Topics using the document.browsingTopics() JavaScript API.

An iframe with src=https://topics-demo.glitch.me/observe/index.html (i.e. with the same origin as this page) calls document.browsingTopics(). This iframe is embedded on several sites, to observe topics:

Topics observed will be displayed on this page (see below).

When topics are observed, a fetch() request is made to topics-server.glitch.me, including the parameter {browsingTopics: true}. This causes the request to include observed topics in a sec-browsing-topics header. A request like this would normally be used for ad selection but, for the demo, the server responds with any request headers it receives, so that sec-browsing-topics values can be displayed below.

This demo isn't anything like a real-world implementation: it only serves to show how topics can be included in request headers.

Topics header demo

Topics can also be accessed from HTTP headers for a fetch() request or by adding a browsingtopics attribute to an iframe tag: see topics-fetch-demo.glitch.me.

Using HTTP headers to access Topics is more performant than using the JavaScript API demonstrated here.

Try out the demo

Run Chrome from the command line using the following feature flags:
```
--enable-features=BrowsingTopics,BrowsingTopicsParameters:time_period_per_epoch/15s/max_epoch_introduction_delay/3s,PrivacySandboxAdsAPIsOverride,PrivacySandboxSettings3,OverridePrivacySandboxSettingsLocalTesting
```
Make sure that chrome://flags/#privacy-sandbox-ads-apis is disabled, since the defaults from this will override the command-line flags (in particular, the epoch duration).

This site is awaiting enrollment, so enable chrome://flags/#privacy-sandbox-enrollment-overrides and add the following URLs:

https://topics-server.glitch.me,https://topics-demo.glitch.me,https://pets-animals-pets-cats.glitch.me,https://cats-cats-cats-cats.glitch.me,https://cats-pets-animals-pets.glitch.me,https://topics-fetch-demo.glitch.me,https://tennis-tennis.glitch.me,https://tennis-tennis-tennis.glitch.me,https://baseball-baseball.glitch.me,https://cricket-cricket.glitch.me

Alternatively, include the command line flag --args --disable-features=EnforcePrivacySandboxAttestations
Open this page.
Visit each of the sites listed above in a separate tab.
The most popular topics observed for the most recent three epochs will be displayed below, refreshed every second. The epoch length is set to 15 seconds using the flags above (the default length is one week).

If no topics are displayed, navigate repeatedly to the pages listed above, e.g. by refreshing each page (not hard-refresh).

The list of topics is only updated if there is a change in observed topics.

You may see unexpected results. Topics inference is not deterministic, and there is a 5% chance that a random topic is returned for each epoch.

No topics observed yet: try visiting one of the sites above.

sec-browsing-topics request headers will be displayed here.

Notes

Pages you visit will not affect the topics shown here unless they include the iframe used in this demo.
Don't be surprised if the number of topics returned goes down if you haven't recently visited one of the sites listed above. A maximum of one observed topic is returned for each of the last three epochs, and the epoch length is set to 15 seconds using the flags above (the default is one week).
Topics are inferred from hostname — the explainer details how topics are returned.
Topics are returned in random order.