How does a tracking cookie work? A step by step example
About
This page shows you a basic example of a tracking … cookie so that you can understand and implement the underlying mechanisms.
These cookies are third-party cookie.
A tracking cookie is also known as:
- Evercookie
Usage
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
Cookie Properties: Samesite to None
To be able to receive a third-party cookie, you need to set on it the following cookie properties:
- samesite property to none
- secure to true (This is required with a none samesite)
- path and domain that targets the tracking resource script URI.
Example in php:
$crossSiteCookiesOptions = array (
// cross-site cookie
'samesite' => 'none' // mandatory for cross-site tracking
'secure' => true, // mandatory for samesite none
// scope
'domain' => 'combostrap.com', // 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.
- Cookie Identifier created if not found
$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;
$counter++;
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
Access-Control-Allow-Origin: https://datacadamia.com
- 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-Origin: https://datacadamia.com');
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:
<?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.
Example
<script type="text/javascript" src="https://combostrap.com/tracking/tracking.php"></script>
Result: (If you refresh this page, the counter will increment)
Third-party tracking on another site
Now:
- 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.
- Click directly on the tracking link: https://combostrap.com/tracking/tracking.php
- Refresh the page F5
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="https://combostrap.com/tracking/tracking.png"/>
- a stylesheet
<link rel="stylesheet" href="https://combostrap.com/tracking/tracking.php"></script>
- or use it with any other fetch HTML elements
This is easier than with a Javascript fetch because the script execution is controlled by the CORS header while HTML tags are not.
Format
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)
Browser
Authorization and Blockage
Because they are third-party cookies, they can be blocked via Browser Configuration
DevTool
In the devtool, you can check the cookie value that is sent and received. See Third-party cookies devtool
