Tracking Pixel Demo

This page includes a tracking pixel — a 1x1 transparent GIF that triggers a request to tracking-pixel.php. Open your browser DevTools Network tab to see the request.

What Is Happening

  1. The page contains an <img> tag pointing to tracking-pixel.php with query parameters.
  2. When the browser renders this page, it requests the image automatically.
  3. The PHP script serves a 1x1 transparent GIF (43 bytes) and logs the request data to pixel-hits.jsonl.
  4. You see nothing on the page — the pixel is invisible — but the server has recorded your visit.

The Pixel Tag

Here is the exact <img> tag embedded in this page:

<img src="tracking-pixel.php?page=/pixel-demo&t=pageview&r=TIMESTAMP"
     width="1" height="1" alt=""
     style="position:absolute;left:-9999px">

The r parameter is a cache-buster — a unique timestamp that prevents the browser from serving a cached version of the pixel. Without it, returning to this page might not generate a new request.

Network Tab View

Try it: Open DevTools (F12), go to the Network tab, and reload this page. Look for the request to tracking-pixel.php. Click on it to inspect the request headers — you will see User-Agent, Referer, Accept-Language, and the query parameters.

Request Log

Checking for pixel request...

noscript Fallback

This page also includes a <noscript> tracking pixel. If JavaScript is disabled in your browser, this fallback image will still fire, and the server will still log the request. The js=0 parameter lets the server know that JavaScript was not available.

<noscript>
  <img src="tracking-pixel.php?page=/pixel-demo&t=pageview&js=0"
       width="1" height="1" alt="">
</noscript>
← Back to Module 03