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.
Generate the certs with mkcert
- Install
mkcert
by following the instructions for your operating system. - Run
mkcert -install
. - Create a folder to store the certificates in. In this example, we will use
mkdir ~/certs
. - Navigate to the certificate folder:
cd ~/certs
. - Run
mkcert localhost
.
For an in-depth explanation of this section, please see the "How to use HTTPS for local development" article.
Setup reverse proxy with nginx
- Install
nginx
(Mac, Linux, Windows). - Find the
nginx
configuration file location based on your operating system (If you usedhomebrew
on Mac, it is under/Users/[USER-NAME]/homebrew/etc/nginx/nginx.conf
). - If you don't have an existing configurations set up in
nginx
, erase the existing content innginx.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;
}
}
}
- Stop the
nginx
server withnginx -s stop
- Restart the
nginx
server withnginx
The above nginx
configuration proxies https://localhost:4437
to http://localhost:3007
(DSP server) and https://localhost:4438
to http://localhost:3008
(SSP server).
- Setup Firebase tools
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
- Buyer's interest group logic -
/sites/dsp/join-ad-interest-group.js
- DSP resource that adds an interest group for the user. - Buyer's bidding logic -
/sites/dsp/bid.js
- DSP resource that contains the bidding logic for the auction. - Seller's auction logic -
/sites/ssp/run-auction.js
- SSP resource that executes the in-browser auction. - Seller's decision logic -
/sites/ssp/decision-logic.js
- SSP resource that decides the winner among the bidders.
- Main - https://protected-audience-demo.web.app/
- Advertiser - https://protected-audience-demo-advertiser.web.app/
- Publisher- https://protected-audience-demo-publisher.web.app/
- DSP - https://protected-audience-demo-dsp.web.app/
- SSP - https://protected-audience-demo-ssp.web.app/
- Main - http://localhost:3000
- Advertiser - http://localhost:3005
- Publisher - http://localhost:3006
- DSP - https://localhost:4437 (via nginx reverse proxy from 8087 to 4437)
- SSP - https://localhost:4438 (via nginx reverse proxy from 8088 to 4438)