DM5: Tracking: events, tags and measurement plans
How tracking works
🎯You'll be able to
Explain page tags, pixels, cookies, local storage and client IDs, and the difference between first-party and third-party tracking.
🏠The everyday picture
A museum gives each visitor a numbered sticker at the door. Guards note "sticker 482 entered the textiles room" without knowing the visitor's name. At the end of the day the museum knows which rooms are popular and where people turned back.
📘What it really is
-
A tag is a small script on the page that sends data to an analytics or ad service when something happens: a page loads, a button is pressed, an order is placed.
-
A pixel is an older form: a tiny image request (or a script) whose address carries the data. Ad platforms' "pixels" are usually scripts now.
-
The request: the tag sends an HTTP request with an event name and parameters to a collection endpoint (in MittiMart,
POST /collecton the practice server, which prints it). -
A client ID is a random identifier stored in the browser (a cookie or local storage) so the service can link page views from the same browser. It's not a name, but it is personal data when linked to behaviour (DM4).
-
First-party data is collected by the site itself, on its own domain. Third-party cookies set by other domains are increasingly blocked by browsers, which is one reason shops rely more on first-party measurement and consented data.
-
What tracking can't see: visits without consent, people with blockers, the same person on two devices, and anything that happens offline. Every report is a sample of reality.
📝A worked example
Input: MittiMart's solved tags.js sends this when a product page loads:
{"event": "view_item", "params": {"currency": "INR", "value": 480,
"items": [{"item_id": "kulhad-set", "item_name": "Kulhad set of 6", "price": 480, "quantity": 1}]},
"client_id": "c8k2x1q9m3", "ts": 1793616000000}
Steps:
- Name the parts: event name, parameters, client ID, time.
- Check for personal data: none (no name, email or phone).
- Check the types:
valueandpriceare numbers.
Expected output: an event an analyst can count by product and sum by value, linked to a browser but not to a named person.
🌍Where it's used
- Shops send page views and e-commerce events to an analytics tool.
- Ad platforms use pixels to count conversions from ads.
- Product teams send events from apps through software development kits that work the same way.
📝Case scenario
A shop's analytics showed only 40% of its orders. The tag fired on the thank-you page, but many customers paid through a UPI app and closed the browser before returning to it. The team added a server-side purchase record for reconciliation, and learned to treat analytics purchase counts as a sample.
🖱️Try it
Run npm run serve in the solved state of your Project 1 (or watch the starter), browse MittiMart and read the collect: lines in the
terminal. Success: you can name the event and two parameters in one line.
⚠️Common mistakes
- Treating analytics as complete. Sign: analytics orders compared directly with the bank's. Fix: expect gaps and reconcile.
- Calling a client ID anonymous. Sign: "It's just a random number." Fix: it identifies a browser over time; treat it as personal data.
- Tags no one can read. Sign: obfuscated scripts from unknown vendors. Fix: know what each tag sends (DM3 tag register).
🛠️For your project
Project 1 works on site/js/tags.js (how events are sent) and site/js/shop.js (which events and parameters).
✅Quick check
What does a client ID do?
Show the answer
It links events from the same browser over time, without being a name.
Why are third-party cookies less useful than they were?
Show the answer
Browsers increasingly block them, so tools rely more on first-party data.