Websites can access a lot of information about visitors using basic technologies of the internet.

👉 View data from your device accessed with only Javascript.

1. Open DevTools on this page.
2. Type window.navigator into the Console and press return to see from where the data (Example 1-1) was captured.

👉 Every web page you view on the internet has access to your IP address.

1. Explore the quiz at geokitten.com
2. Examine the data (Example 1-2) returned from a geolocation API to see what can be learned about you using only your IP address.

This method is easy to spot. When you click an ad or share a website extra URL parameters, like utm_source, utm_campaign, are added to the end of the link. These parameters can pass data about your activity to analytics and advertising tools to track the effectiveness of marketing campaigns.

👉 Examine the two example URLs containing link tracking parameters.

1. Example 2-1 is a common use. Example 2-2 shows how these could share data about you.
2. Find and click on an online ad to see a real one in action.

A tracker is any code that collects data on users. The Ghostery tracker blocker describes 12 categories of trackers, including advertising, analytics, widgets, and telemetry. As you might guess, the most prevalent trackers are built by large ad companies like Google, Facebook, Amazon, and Adobe. While some trackers are necessary to remember your login status, those that collect your data to sell it or manipulate you are most certainly not.

👉 Some trackers are obvious from their visual components, such as the embedded widgets and media on this page (Facebook and X buttons, Youtube video).

1. View the source code of this page with View Source and find the YouTube embed script. Web trackers inject code in the page when it loads so it is hidden unless you use DevTools to see the live code.
2. Now use DevTools to inspect the page and find the iframe added by the YouTube embed script.
3. Continue viewing child elements to see the additional scripts the tracker loads. How many of these are for essential functions (playing video) and how many are tracking or trying to advertise to users? What other categories do you see?

Cookies are used by websites to store information in your browser. Cookies provide essential services, like remembering your identity so websites will remember you are logged in or store your preferences. However, they also let sites track you, even if they only know you by this identifier.

👉 Follow the prompts to view saved cookies

1. Open DevTools > Application and then expand Cookies (under Storage on the left) to see the domains that have set cookies on this page.
2. Select the domain: criticalwebdesign.github.io and look for cookies prefixed with cwd Example 4-1 displays this data (the date, hour, minute, and seconds when you visited this page). Refresh the page to update the date. Try deleting the cookie and reloading the page to see what happens.
3. Set your own cookie by running the code in Example 4-2 in the DevTools console.
4. Visit stickyscreen.org and edit the content in the note. Close the page and open it again to see the text it "remembered" (stored in cookies)

The Web Storage API associates data values with keys (like JSON) to make it easier to retrieve or update data in the browser.

👉 Explore Local Storage data in your browser

1. In DevTools > Application, expand Local Storage.
2. Select the domain: criticalwebdesign.github.com and look for records prefixed with cwd Example 5-1 shows this data (when you visited this page). Refresh the page to update the date. Try deleting the row and reloading the page to see what happens.
3. Set your own items in localStorage by running the code in Example 5-2 in the DevTools console. As with cookies, you can edit or delete the data stored in Local Storage.
4. Check out Wordle to see if you can figure out how it stores your game progress using Local Storage (hint: look for a key named nyt-wordle-moogle).

One data point that can't be directly accessed from your online activity is your identity. When you login to a web service (that presumably knows your name) a unique string of characters called a token is saved inside a cookie in your client. The cookie is sent with every request to that service to identify you and connect your activity across each browser and device. You won't, for example, have to repeatedly enter your name and password across every page of that site, and the site will customize your experience using your activity. Your YouTube recommendations and history (and targeted ads) across devices will be the same. This is called deterministic tracking.

A tracker attempting to collect your data may not know your real name but that won't stop them from creating a profile for you and assigning tracking IDs to match your activity. Whether you are logged in or not, cross-device tracking can connect you to your activity and manipulate your behavior across all your browsers, apps, and devices. For example, if you click a link in an email or webpage with link tracking parameters it can link your profiles, even anonymous profiles, across devices.

1. All other cookies and items in local storage are set by the resources and embedded scripts on the page. Look for the following identifiers in DevTools > Application (for some of these you may need to be logged into that service)
2. Example 6-1: _fbc is the name used by the cookie for the Meta Tracking Pixel (see below) used by Facebook and others to track users across the web.
3. Example 6-2: _ga is an identifier used by Google Analytics to track users.
4. Example 6-3: Explore other identifiers set by X (Twitter) and others in DevTools.

With the web progressively being less accepting of third party cookies, even if you are not logged-into a service and careful about your actions, companies can still use probabilistic tracking to identify you from your anonymous activity. By using browser fingerprinting to consider collections of unique attributes about user devices (like browser version, device type, operating system, IP addresses, browsing patterns, and more) this algorithmically-enhanced method employed by most ad targeting campaigns has "a 97.3 percent chance of accurately identifying users across devices." Much like many other methods listed above, this tactic is invisible, yet requires no cookies or embedded code to identify your activity across the web

👉 Find out how easy it is to track you using only your fingerprint

1. To see your "fingerprint" visit: amiunique.org
2. Learn how to cover your tracks: coveryourtracks.eff.org

You can't see it because it's invisible, but this 1x1 pixel image is one of the sneakiest forms of tracking out there. A Tracking pixels are image files that use request headers to collect data and identify users. They don't need Javascript to run and can even inform marketers when and whether you opened their emails.

👉 Find a tracking pixel in DevTools

1. Right click on the broken image link in Example 8-1 and Open Image in New Tab.
2. Open DevTools > Network, reload the page, and select the first resource.
3. If you are not logged into a Facebook account then click on the Headers tab to see all the data in the header that will be used to "fingerprint" you.
4. If you are logged-into a Facebook account you will also see a Cookies tab with all the data your browser sent with this request. You can confirm it's linked to your identity by copying and pasting the value of the c_user field (your Facebook ID) after https://facebook.com/ in a browser.

It's worth noting here an interesting detail about ad blockers, which usually function by intercepting and preventing requests for ad networks from embedded scripts and resources. To do this they must maintain lists (known as blocklists) in order to know which domains are tracking and trying to manipulate users.

1. The Disconnect browser extension conveniently makes their lists open source. Check out their services and entities files to see if you recognize any of these domains.
2. The Ghostery tracker & ad blocker extension block ads, cookies, popups & other trackers.