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

Include the BiddingAndScoringDebugReportingAPI flag to enable the temporary debug loss/win reporting methods.

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.

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