Topics API demos

Experiment and learn how topics are inferred from hostnames with minimal setup.

Published on

Implementation status

The Topics API demo provides a look at how topics are inferred from hostnames. You can preview what topics are observed when you visit a demo site, which requires very little setup.

If you want to test the API with your users, sign up for the Relevance and Measurement origin trial.

Our demo is a preview that demonstrates most features of the Topics API, for you to gain familiarity with how the API is implemented.

You can also run the Topics colab to try out the Topics classifier model.

The following video shows how the demo works.

Test with chrome://flags or feature flags

There are two ways to try the Topics API as a single user; you'll need to be running Chrome 101 or above:

  • Enable the API in the chrome://flags/#privacy-sandbox-ads-apis Chrome page:

    Enable the Topics API using the chrome://flags/#privacy-sandbox-ads-apis page
    The chrome://flags/#privacy-sandbox-ads-apis page where you can enable or disable the API. View a larger version
  • Run Chrome from the command line with the following flags:

    --enable-features=BrowsingTopics,PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting

Before starting Chrome using flags, quit any Chrome running processes or use "force quit."

The Topics API demo

The Topics demo shows how to use additional flags to adjust settings, such as epoch length. If you access the Topics API by running Chrome with command-line flags, don't set chrome://flags, as these can override command-line settings.

Run Chromium with flags explains how to set flags when running Chrome and other Chromium-based browsers from the command line, although this demo is specific to Google Chrome.

The Topics API headers demo

The demo at topics-fetch-demo.glitch.me shows how to use fetch() request and response headers to access topics and mark them as observed.

Access the Sec-Browsing-Topics request header

Instead of using document.browsingTopics() from an iframe to view topics for a user, API callers can access observed topics from the Sec-Browsing-Topics request header of a fetch() request that includes {browsingTopics: true} in its options parameter—or from the same header of an XHR request that sets the deprecatedBrowsingTopics attribute to true.

For example:

fetch('https://topics-server.glitch.me', {browsingTopics: true})
.then((response) => {
// Process the response
})

In browsers that support the API, the fetch() request will include a Sec-Browsing-Topics header that lists topics observed for the request URL hostname: in this example, topics-server.glitch.me.

If no topics have been observed for this hostname and this user, the header is included but the value is empty. In other words, the Sec-Browsing-Topics header on a fetch() request only includes topics that have been observed for the current user's browser by a caller whose origin matches the hostname of the request URL. This is the same as if you were calling document.browsingTopics() from an iframe to view observed topics for the current user.

The request header is sent on a request as long as it has the appropriate permission policy is in play, the context is secure, and user settings permit it. Topics are not provided in headers for navigation requests.

The Topics request header looks like this:

Sec-Browsing-Topics: 186;version="chrome.1:1:2206021246";config_version="chrome.1";model_version="2206021246";taxonomy_version="1", 265;version="chrome.1:1:2206021246";config_version="chrome.1";model_version="2206021246";taxonomy_version="1"

This example includes two topics from the Topics taxonomy, 186 and 265, along with each topic's version information.

The fetch() and XHR implementations were first made available in Chrome 111. (Refer to these builds for more information.)

Inclusion of the topics header in XHR requests is only available temporarily, and support will be removed in the future.

Mark topics as observed with Observe-Browsing-Topics

If a request includes a Sec-Browsing-Topics header and the response to that request includes an Observe-Browsing-Topics: ?1 header, then topics from the request header will be marked by the browser as observed. Observed topics are eligible for calculation by the Topics API. This mechanism is designed to match the functionality provided by using the JavaScript API from an iframe.

The screenshot below shows the topics recorded from visiting the sites on the API demo page.

Topics API demo page on glitch.me
The glitch.me demo for trying the API. View a larger version

This list shows the sites you can visit from the demo to record topics of interest. As you can see, the Arts & Entertainment/Humor category in the screenshot is not the topic of one of these websites, so this recorded topic is one that was added as the possible 5 percent random topics.

  • pets-animals-pets-cats.glitch.me
  • cats-cats-cats-cats.glitch.me
  • cats-pets-animals-pets.glitch.me
  • cats-feline-meow-purr-whiskers-pet.glitch.

You can check to see which topics are real and which are random on the Topics State tab of the chrome://topics-internals page. This screenshot shows an example from different browsing sessions.

The Topics state tab provides information on topics observed.
Topics State tab showing real and random topics. View a larger version

Next steps

If you're an ad tech developer, experiment and participate with the Topics API. Read the developer guide for more in-depth resources.

Engage and share feedback

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.