[DEPRECATED] FLEDGE demo

This demo is being deprecated and a new Protected Audience demo can be found at https://protected-audience-demo.web.app. The code for the new demo can be found on GitHub at https://github.com/GoogleChromeLabs/protected-audience-demo.

FLEDGE demo

This demo shows a simple example of using FLEDGE to join ad interest groups on two advertiser sites, and then initiate an on-device auction to select an ad for display on a publisher site.

1. Run Chrome from the command line with flags

You will need to use Chrome 96 or above run from the command line with the following flags.

Using <fencedframe> to render ads:

--enable-features=InterestGroupStorage,AdInterestGroupAPI,Fledge,FencedFrames

Using <iframe> to render ads:

--enable-features=InterestGroupStorage,AdInterestGroupAPI,Fledge,AllowURNsInIframes --disable-features=FencedFrames

2. Run the demo

1. Visit both of the demo advertiser sites:

   • Shopping Site
   • Travel Site

   navigator.joinAdInterestGroup() is called on each of these sites, to ask the browser to add an interest group to the groups it is a member of.

   In a real-world implementation, this code is likely to be run by an advertiser's adtech platform or the advertiser itself. In this demo, the code is run from dsp/joinAdInterestGroup.js running in an iframe at dsp/joinAdInterestGroup.html.

2. Visit the demo publisher site:

   • <fencedframe> version

   • <iframe> version

     runAdAuction() is run on the publisher site in a JavaScript worklet to select an ad for display.

     In a real-world implementation, this code is likely to be run by the publisher's adtech platform or the publisher itself. In this demo, the code is run from ssp/runAdAuction.js running in a fencedframe or iframe (depending on which Chrome flags were set) at ssp/ad-tag.html.

Troubleshoot the demo

If the demo doesn't work as expected, make sure of the following:

• You're using Chrome 96 or above.
• You're running Chrome with the correct flags (see above) using one of the methods described on chromium.org
• You don't have chrome://settings/privacySandbox disabled.
• You don't have an ad blocker or a similar app or extension running.
• You're not in Incognito mode.
• You have third-party cookies enabled via Settings → Security and privacy → Cookies, and other site data set to either "Allow all cookies" or "Block third-party cookies in incognito", also accessible via chrome://settings/cookies.

View source code

Code for this demo at github.com/JackJey/fledge-demo.

Find out more

• FLEDGE API developer guide: detailed reference
• The FLEDGE API: a less technical overview
• FLEDGE proposal explainer
• Proposed First FLEDGE Origin Trial Details