How does a tracking cookie work? A step by step example


This page shows you a basic example of a trackingcookie so that you can understand and implement the underlying mechanisms.

These cookies are third-party cookie.

A tracking cookie is also known as:


They are a tracking techniques that allows cross site tracking

These are mainly used for advertising and tracking across the web.

They are sent back at every future HTTP request (fetch) of the third-party resources (image, script,…) to their origin (the third-party server - advertiser).

A Step by Step Example

How do you create a tracking server script?

The tracking resources are implemented with any HTTP server script.

These scripts produce a HTTP response that can send any type of media:

  • javascript
  • image
  • stylesheet

In this example, we use a php script to produce Javascript.

The below code is the content of the tracking.php file located on the server that is fetched in the next step.

The script reads and creates if necessary two third-party cookies:

  • a user id that is set during the first visit
  • a counter that is incremented for each visit

To be able to receive a third-party cookie, you need to set on it the following cookie properties:

Example in php:

$crossSiteCookiesOptions = array (
  // cross-site cookie
  'samesite' => 'none'  // mandatory for cross-site tracking
  'secure' => true, // mandatory for samesite none
  // scope
  'domain' => '', // Third party domain
  'path' => '/tracking/tracking.php',  // Path to the tracking script
  // other
  'httponly' => false, // false or true does not matter as it does not work on cross-request as specified by the standard
  'expires' => time() + 60*60*24*30, /* expire in 30 day */

Identifier and counter cookies

In this part, we read the cookie and create them if they don'exist.

$consumerCookieName = "identifier"; // the name of the cookie
$consumerId = $_COOKIE[$consumerCookieName]??uniqid(); // the value if exists or an uniqid
setcookie($consumerCookieName, $consumerId, $crossSiteCookiesOptions); 
  • Counter incremented for each visit
$counteCookieName = "counter";
$counter = $_COOKIE[$counteCookieName]??0;
setcookie($counteCookieName, $counter, $crossSiteCookiesOptions); 
header("$counteCookieName: $counter"); // to be able to read the value in the browser

Browser Fetch Authorization or CORS

These authorizations are only mandatory if you want to use Javascript to fetch the script.

In our case, we do not, as we are embedding the script with the HTML script tag but if you want to dynamically use them on the browser, this configuration are mandatory.

Example: The CORS headers may be set to allow the browser javascript :

  • to execute on the datacadamia website
  • to read the counter header
Access-Control-Expose-Headers: counter
  • to send cookies on fetch
Access-Control-Allow-Credentials: true

Example in php:

header('Access-Control-Allow-Credentials: true');
header("Access-Control-Expose-Headers: counter");

The produced javascript

We return the following javascript that prints a message generated with:

  • the user id
  • the counter

Example in php:

/** Return Javascript **/
header('content-type: text/javascript');
console.log('Server: Hello User (<?php echo $consumerId ?>), you have fetched this script <?php echo $counter ?> times');

How can you show a javascript file in the URL in place of a Php file

This is just a trick but thanks to URL rewrite, you can redirect/rewrite any URL.

For example with the Apache htaccess configuration file, you can redirect an URL with the path tracking.js to tracking.php

RewriteBase /
RewriteRule ^tracking.js$ tracking.php

We don't do it in our example but most of the server does it.

You think that you fetch a file (image, javascript, stylesheet) but what you fetch, is just a HTTP response that sends back bytes in the body that have a type.

The tracking

The tracking works by just embedding this script in your pages.

Third-party tracking on this site

To insert the third-party cookie, we just need to call the tracking endpoint.


<script type="text/javascript" src=""></script>

Result: (If you refresh this page, the counter will increment)

Third-party tracking on another site


  • Check the previous section console output, there is a Try the code button on the top right corner
  • Click on it

It will bring you to a third editor where the same code will run.

You will see that:

  • the id is the same
  • the counter has been incremented by one.

You should see:

Server: Hello User (your Id), you have fetched this script x+1 times

First Party Tracking

This script works also as first party tracking cookie.

You should see:

Server: Hello User (your Id), you have fetched this script x+1 times

The tracking works with any HTML fetch tag

HTML tags that have an URL as an attribute execute a fetch. It means that you can rewrite the above php script to return:

  • an image
<img href=""/>
  • a stylesheet
<link rel="stylesheet" href=""></script>

This is easier than with a Javascript fetch because the script execution is controlled by the CORS header while HTML tags are not.


A tracking cookie may take the form of a cookie that has always:

  • the same name
  • or another name but always the same value (ie a known id from another application)


Authorization and Blockage

Because they are third-party cookies, they can be blocked via Browser Configuration


In the devtool, you can check the cookie value that is sent and received. See Third-party cookies devtool

Devtool Tracking Cookie Identifier Counter

Discover More
Card Puncher Data Processing
Analytics - (Cross-site | Cross-domain) tracking - Site linking

cross-site tracking is a tracking technique that permits to follow a user across web sites (ie to follow users from site to site) Cross-domain measurement makes it possible for Analytics to see sessions...
Card Puncher Data Processing
How are users/consumers tracked on the internet?

This page shows how tracking works. tracking is the process of following a user. Tracking Cookie: Evercookies, Cookie Syncing - Automatically re-sync unique cookie ID across consumer devices....
Card Puncher Data Processing
Web Analytics - Cookie Identifier

A cookie identifier is a cookie that helps identify a consumer. You can follow users from site to site by merging various cookie identifiers into a profile. They are better known as tracking cookie....
Chrome Cookies
What is a Cookie? (HTTP Set-Cookie Header )

A cookie is: a key-value data with some associated that control how the browser should manage them. set by a HTTP response via the set-cookie header The received cookies by the browser can be...
Chrome Cookie Configuration
What is a Third-party (3P) Cookie and how it works?

Third party Cookies are cookies created by other sites (ie that comes from another domain (ie a third party) than the hosted web page. These sites own some of the content, like ads or images, that you...

Share this page:
Follow us:
Task Runner