How Web Tracking Works

Web tracking captures user interactions on a website and transmits that data to an analytics platform for processing. Every analytics tool — GA4, Adobe Analytics, Mixpanel, Pendo — follows the same fundamental pattern: detect an interaction, package the data, and send it to a collection endpoint.

The Request Lifecycle

Every tracked event follows the same flow:

User Action → JavaScript Handler → Data Package → HTTP Request → Collection Server → Processing → Dashboard

Step by step:

1. Page loads — the browser downloads and executes your tracking script (gtag.js, analytics.js, Mixpanel SDK, etc.)
2. Script initializes — sets a first-party cookie (e.g., _ga for GA4) to identify the user across pageviews
3. Event occurs — a pageview fires automatically; other events fire on clicks, scrolls, form submissions, etc.
4. Data is packaged — the script builds a payload with the event name, parameters, timestamp, client ID, and session info
5. HTTP request is sent — the browser fires a GET or POST to the collection endpoint (e.g., https://www.google-analytics.com/g/collect)
6. Server processes — the analytics platform ingests the hit, applies session logic, attribution, and stores it
7. Reports populate — data appears in real-time and standard reports after processing (seconds to hours, depending on the platform)

How JavaScript Tags Work

A tracking "tag" is a JavaScript snippet that runs in the browser. Here's what GA4's gtag.js does under the hood:

// 1. Load the library asynchronously (non-blocking)
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>

// 2. Initialize the data layer and config
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXX');

// What happens internally:
// - gtag('config', ...) sets the _ga cookie if one doesn't exist
// - Fires a page_view event with page_location, page_title, screen_resolution, language
// - Sends a POST to https://www.google-analytics.com/g/collect with the payload

Other platforms work identically — Meta Pixel uses fbq(), Mixpanel uses mixpanel.track(), but the mechanics are the same: JavaScript function → HTTP request → collection server.

Cookies and Identity

Tracking relies on cookies to identify returning users. Without cookies, every pageview looks like a new visitor.

First-Party Cookies (Set by Your Domain)

Third-Party Cookies (Set by Other Domains)

Third-party cookies (e.g., doubleclick.net) are used for cross-site tracking and retargeting. They are blocked by default in Safari (ITP), Firefox (ETP), and will be restricted in Chrome. This is why server-side tracking and first-party data strategies are increasingly important.

Safari ITP Impact

Safari's Intelligent Tracking Prevention caps first-party cookies set via JavaScript to 7 days (or 24 hours if the referring domain is a known tracker). This means a returning Safari user who visits after 7 days looks like a new user in your analytics. Server-side cookie setting bypasses this limitation.

Tracking Methods Compared

What Gets Sent in a Tracking Request

Here's an actual GA4 collection request, decoded:

POST https://www.google-analytics.com/g/collect

Parameters:
  v=2                          // Protocol version
  tid=G-XXXXXXXX              // Measurement ID
  gtm=45je4...                // GTM container hash
  _p=1234567890                // Page load ID (random)
  cid=GA1.1.123456789.1700000000  // Client ID (from _ga cookie)
  sid=1700000000               // Session ID
  sct=1                        // Session count
  seg=1                        // Session engaged
  dl=https://example.com/pricing  // Document location (full URL)
  dr=https://google.com        // Document referrer
  dt=Pricing - Example         // Document title
  en=page_view                 // Event name
  sr=1920x1080                 // Screen resolution
  ul=en-us                     // User language

Every analytics platform sends a similar payload. Meta Pixel sends to facebook.com/tr, Mixpanel to api-js.mixpanel.com/track, etc.

The Data Layer

The data layer is a JavaScript array that acts as a message bus between your website and tag manager:

// Your website pushes structured data
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'T-12345',
    value: 59.99,
    currency: 'USD',
    items: [{ item_id: 'SKU-001', item_name: 'Widget', price: 59.99, quantity: 1 }]
  }
});

// GTM reads the data layer and fires tags based on triggers
// Tag: GA4 Event → fires when event = 'purchase'
// Tag: Meta Pixel Purchase → fires when event = 'purchase'
// Both tags use the same ecommerce data from the data layer

The data layer decouples your website code from your analytics implementation. Developers push events; marketers configure tags in GTM. For a deep dive, see Data Layers.

Where Tracking Breaks

The most common tracking failures and what causes them:

For hands-on debugging, see Debugging GTM and Debugging GA4.

Next Steps

• Data Layers — deep dive into structuring your data layer
• Event Tracking — capture clicks, forms, videos, and custom interactions
• Cross-Domain Tracking — maintain identity across multiple domains
• Server-Side Tracking — bypass ad blockers and control data flow