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

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');

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