npm install
npm run docs:dev

Practical AdTech: Engineering Notes with Code and Examples

In this repository, I will share my notes and code examples on the practical aspects of AdTech engineering. For the past few years, privacy-preserving technologies have been the focus of the industry, I hope this page will help you understand the basic of those technologies with code examples.

AdTech heavily relies on third-party data of users, and the data is often sensitive. In order to protect the privacy of users, the industry has been working on frameworks to keep the data private from being accessed by others but still serving the ads to the users effectively.

Google had been working on a framework called Privacy Sandbox for years, it is a set of technologies that allows advertisers to serve ads to users without collecting user data. However, in late 2025, they decided to phase out some of the technologies in the framework.

As someone who had been working on AdTech for 4 years, I think it is still important to review those technologies and understand them. Google and some W3C working groups have worked on the design / specs to tackle the privacy problems while keeping the industry moving forward!

Key Concepts of Ad Serving

AdTech is a complex system that involves many components but you can devide them into two parts:

• DSP (Demand Side Platform): server for the advertisers to place bids and serve ads to the users
• SSP (Supply Side Platform): server for the publishers to sell the inventory to the advertisers

Advertisers want to reach the right users with their ads efficiently, and publishers want to sell the inventory to the advertisers at the highest price. Here is the simplified flow of how the ad serving works:

1. User → SSP: After receiving traffic from a user, the publisher sends an ad request to the SSP.
2. SSP → DSPs: The SSP broadcasts this request to multiple DSPs to solicit bids simultaneously.
3. DSPs → SSP → User: Once the SSP collects the bids from each DSP, it chooses the highest one and returns the winning ad to the user.

This entire process is called RTB(Real-Time Bidding), and it is the most common way to serve ads to the users nowadays. Often the ad request has a strict timeout limit, so the ad serving needs to be done in a very short time while choosing the right ad for the user. Also sometimes server can be under high traffic, so it needs to be scalable to handle the traffic.

                                                ┌───────┐
                                          ┌────►│ DSP A │
┌────────┐    Request     ┌───────┐ Bid   │     └───────┘
│  User  │───────────────►│  SSP  │───────┼────►│ DSP B │
│ (Pub)  │◄───────────────│       │◄──────┼─────│       │
└────────┘   Winning Ad   └───────┘ Win   │     ┌───────┐
                                          └────►│ DSP C │
                                                └───────┘

Ad Serving and Cookies

In the previous section, I mentioned that serving ads to the right user is the key. However how do we know which user is the right one? Cookie is one of the ways to retrieve the information. Cookies are small data files that are stored on a user's device by a website. Here is a simple example of how cookie works.

Site A is a news site, when you visit the site, a cookie adtech_uid=sample_cookie is set in your browser. After visiting Site A, you visit Site B, the browser will automatically send the cookie to the server as long as the site is in the same domain.Through this cookie, the server can know that you are the same user who visited Site A.

import http from 'http';

const server = http.createServer((req, res) => {
  const url = new URL(req.url, `http://${req.headers.host}`);

  if (url.pathname === '/site-a') {
    res.writeHead(200, {
      'Content-Type': 'text/html',
      'Set-Cookie': 'adtech_uid=sample_cookie; Path=/; Max-Age=31536000'
    });
    return res.end(`
      <h1>Welcome to Site A (News Site)</h1>
      <p>An AdTech cookie has been silently planted in your browser right now.</p>
    `);
  }

  if (url.pathname === '/site-b') {
    const receivedCookie = req.headers.cookie || "No cookie received 😢";

    res.writeHead(200, { 'Content-Type': 'text/html' });
    return res.end(`
      <h1>Welcome to Site B (Shoe Store)</h1>
      <p>The browser sent this cookie to the server:</p>
      <pre style="background: #eee; padding: 10px; font-weight: bold; color: red;">
        Received Cookie: ${receivedCookie}
      </pre>
    `);
  }

  res.writeHead(404);
  res.end();
});

server.listen(3000, () => {
  console.log('STARTING SERVER ON PORT 3000');
});

After while, the server accumulated the data of each user and can know the user's interest and behavior. So, now when you serve ads to this user, you can serve the ads that are more likely to be interested in.

The example is a bit simplified. In reality, when a user visits a site with a tracking pixel or a script from advertiser, the ad server will set the cookie in the browser. The ad server and the site the user visited are often in different domains, this is called 3rd party cookie. After setting this cookie, the ad server can track the user's behavior and serve ads to the user based on the user's interest and behavior.

Frameworks

Attribution Reporting API

Topics API

Protected Audience API

User Agent Client Hints

CHIPS

Fenced Frames

Storage Access API