thezedwards / shared-storage-demo

Shared storage demo

This demo shows some Shared Storage API use cases.

The following use-cases have been added:

• Frequency capping
• A/B testing
• Creative rotation
• Known customer

Live demo

Visit https://shared-storage-demo.web.app to see the demo.

Enable the flag

To run this demo, follow the instructions for enabling the Privacy Sandbox Ads APIs experiment flag at chrome://flags/#privacy-sandbox-ads-apis.

Local development

Setup HTTPS

The ad rendered in a fenced frame must be served from an HTTPS origin. The ad rendered in a fenced frame must be served from an HTTPS origin, but the Firebase emulator does not support HTTPS localhost. Therefore, we will use nginx to setup a reverse proxy that takes the request at HTTPS 4337 port and proxies it to HTTP 8087.

Generate the certs with mkcert

1. Install mkcert by following the instructions for your operating system.
2. Run mkcert -install.
3. Create a folder to store the certificates in. In this example, we will use mkdir ~/certs.
4. Navigate to the certificate folder: cd ~/certs.
5. Run mkcert localhost.

For an in-depth explanation of this section, see the "How to use HTTPS for local development" article.

Setup reverse proxy with nginx

1. Install nginx (Mac, Linux, Windows).
2. Find the 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).
3. Add the 4437 server block into the http block in the config. Replace [USER-NAME] with the path that your certificate is stored in:

http {
  # HTTPS server
  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:8087/;
      proxy_read_timeout  90;
    }
  }
}

4. Stop the nginx server with nginx -s stop
5. Restart the nginx server with nginx

The above nginx configuration proxies https://localhost:4437 to http://localhost:8087 (Content producer server).

Setup Firebase

• Setup Firebase tools

Setup repository

• git clone https://github.com/googlechromelabs/shared-storage-demo
• cd shared-storage-demo
• npm install

Start emulator

npm run dev

And visit http://localhost:8080 for the main page

Deploy code

npm run deploy