This demo shows the simple usage of the Protected Audience API. In this demo, there are 4 actors involved in the process: advertiser, publisher, DSP, and SSP. Each actors interact with one another to render a retargeted ads to the user.
To run the Protected Audience demo locally, the resources from DSP/SSP must be served over HTTPS. Unfortunately, Firebase emulator does not support HTTPS localhost. Therefore, we will setup a reverse proxy with nginx
to serve DSP/SSP resources over HTTPS.
mkcert
]()mkcert
by following the instructions for your operating system.mkcert -install
.mkdir ~/certs
.cd ~/certs
.mkcert localhost
.For an in-depth explanation of this section, please see the "How to use HTTPS for local development" article.
nginx
(Mac, Linux, Windows).nginx
configuration file location based on your operating system (If you used homebrew
on Mac, it is under /Users/[USER-NAME]/homebrew/etc/nginx/nginx.conf
).nginx
, erase the existing content in nginx.conf
and copy-paste the following block into the config. Replace [USER-NAME]
with the path that your certificate is stored in:http {
# DSP proxy
server {
listen 4437 ssl;
ssl_certificate /Users/[USER-NAME]/certs/localhost.pem;
ssl_certificate_key /Users/[USER-NAME]/certs/localhost-key.pem;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:3007/;
proxy_read_timeout 90;
}
}
# SSP proxy
server {
listen 4438 ssl;
ssl_certificate /Users/[USER-NAME]/certs/localhost.pem;
ssl_certificate_key /Users/[USER-NAME]/certs/localhost-key.pem;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:3008;
proxy_read_timeout 90;
}
}
}
nginx
server with nginx -s stop
nginx
server with nginx
The above nginx
configuration proxies https://localhost:4437
to http://localhost:3007
(DSP server) and https://localhost:4438
to http://localhost:3008
(SSP server).
git clone https://github.com/googlechromelabs/protected-audience-demo
cd protected-audience-demo
npm install
npm run dev
And visit http://localhost:3000
for the main page
npm run deploy
/sites/dsp/join-ad-interest-group.js
- DSP resource that adds an interest group for the user./sites/dsp/bid.js
- DSP resource that contains the bidding logic for the auction./sites/ssp/run-auction.js
- SSP resource that executes the in-browser auction./sites/ssp/decision-logic.js
- SSP resource that decides the winner among the bidders.