If you have ever been to the doctor’s office, then you can understand the concept of web cookies.
You have probably heard about cookies in the news, whether it was related to the recent Facebook Ads scandal here in the United States, or GDPR regulations in Europe.
Let’s get one thing out of the way quickly: cookies are not a good name for these little snippets of text that get stored in your browser. In fact, they are a terrible name. Apparently, the name originates from the fable of Hansel and Gretel, although I have no idea if that is an urban legend or not.
Also, here is a quick example of cookies in action if you are looking for some context. Let’s say that you type amazon.com into your browser, and when the page loads, you are automatically logged in. Cookies allow that to happen.
Notice how you didn’t take any action on the site itself, but Amazon already knew something about you. This is because there is a small piece of text that gets stored in your browser when you create an account on Amazon.
After thinking about this experience for awhile, I realized that it was similar to the experience of visiting a doctor, dentist or other health professional. So, if you have ever visited a health professional (I hope you have, then you can understand cookies).
In this example, you are actually going to be the parent that is taking your child to an appointment. You will see why in a moment.
In order to understand this full tutorial, you need to know the difference between front-end and back-end. Check out my tutorial on the subject here if you need a refresher. Let’s jump in.
Note: this tutorial uses interactive images. If you see an image with a bar in the middle, you can drag it to reveal two versions of the image.
Understanding the Basics of Cookies
Imagine that you are in charge of taking your son or daughter to their annual doctor’s checkup. This is not your first one. In the past, you picked a doctor that you trusted and now you return to that doctor every year.
When you visit the office on that day, you check in with a secretary, who verifies your identity and send you and your child into a room. When the doctor shows up, he or she already has a copy of your medical history, and begins reviewing it with both of you.
In our example, the website is kind of like the doctor. He or she sees many patients, and must be able to react quickly to give each one a great experience.
The assistant is like the server. He or she prepares the doctor to give a great experience.
And your child is like the browser. He or she visits specific sites, or health practitioners. Your child also sees a dentist and an optometrist, which we will cover in a little bit. The doctor must see many children, or in technical terms, receives many visits from browsers around the world.
Let’s take a moment and imagine that initial communication between you and the assistant did not happen. Instead, you just strolled into the doctor’s office and were forced to recount your child’s health history. That would be a terrible experience for you, the visitor, for two reasons:
- You can’t perfectly recall your child’s health history in a way that is meaningful to a doctor. You might have some memory, but they need the actual specific conditions over time.
- This would take WAY too long for you.
Instead, there needs to be a system to rapidly deliver the right information to the doctor so you have a great experience when you visit. From a technical perspective, this is why we need cookies. Web developers want to give users a great experience as soon as they hit the page, and they just need a small hint to customize the experience for each returning visitor. That is the value of having a local cookie.
So, a cookie is a short piece of text that is stored in web visitor’s browser. If you are visiting a shopping site, it might contain a user ID that will allow the site to instantly log you in. You received that user ID when you created an account for the first time, and it was then stored in your browser by Amazon’s servers. Similarly, a doctor’s office will tie your child’s medical policy number to a specific account in their system.
Let’s align these two processes.
- You enter the doctor’s office and check in with the receptionist. The receptionist asks for your child’s medical ID.
- You enter an exam room with your child, and the doctor arrives with your child’s health history
- You are able to add on to your child’s health history since the doctor can quickly catch up with past notes. You resume as if the doctor just saw your child yesterday, when in reality, he/she has no memory of your last appointment from the previous year.
From a technical view:
- You type in Amazon.com. This means you are sending an HTTP request to the amazon.com servers.
- The servers read your cookie, and prepare a customized page that will allow you to be automatically logged in.
- The page is served to you, the visitor. You are already logged in and can resume shopping from where you left off.
You might want to check out my guide to web servers if you want to learn a little more about the path of an HTTP request.
Here’s an example of a cookie.
The Relationship Between Browsers and Cookies
So far, we have been discussing one site within one browser. Cookies are stored at the browser level, so if you visit Amazon.com in both Firefox and Chrome, you will need a separate cookie for each browser. First of all, multiple cookies in the same browser is kind of like the separate accounts that your child maintains with different health practitioners.
For example, your child likely has a separate medical, dental and eye policy for each doctor that he or she sees. Each website uses its own cookie system, so this aligns with the 1:1 ratio of insurance policy to doctor.
What about multiple browsers? Well, imagine that you have multiple kids. Each one has a separate policy ID for all three types of medical insurance. They all maintain separate histories, although they could be using the same doctors. So, if you have 2 kids using the same three doctors, that means 6 different policy IDs and 6 different cookies.
What Happens When You Change Cookie Preferences
First of all, there is no universal cookie protocol. Each site uses their own data categorization system, so cookies are not shared between sites, except in the case of retargeting. So, it is unlike a social security number, where one number unlocks multiple types of personal data. Similarly, your medical history is not automatically shared among practitioners unless you grant permission.
Let’s say that you want to prevent all cookies from being stored in your browser. You can do this by changing a setting in Chrome or Firefox. Websites will not remember you, and you will not receive retargeted ads. However, you will need to manually log in to each site where you have an account. In our analogy, this is kind of like strolling directly into the exam room with your child, and then explaining your child’s health history to the doctor. It is not being stored anywhere, which is great if you are sensitive about privacy. But, you will not get the same seamless experience.
Using Tracking Pixels for Retargeting
So far, the relationship between the web server and cookie is 1:1. But, sites can also share your information with third-party ad networks. For example, let’s say you are shopping for rollerblades. You leave coolrollerblades.com without buying anything. But, coolrollerblades.com uses the Facebook Ads tracking pixel. So, when you visit Facebook the next time, you see an ad for rollerblades. How can this happen?
Let’s imagine that your child visits the dentist’s office, and gets the news that many children get: she is going to need braces! Your doctor has taken an x-ray of your teeth, and is going to send them to the local orthodontist so you can speak to an expert. Here are the steps that would need to happen in this process:
- The doctor sends your x-rays to the assistant at the orthodontist’s office so he/she can create a file for you.
- You visit the orthodontist’s office and let the assistant know that your dentist referred you.
- The assistant gets your x-rays to the orthodontist so he/she can discuss with you as you meet.
After that initial step, you received a new unique identifier- an account with the orthodontist’s office. That is the cookie in this case. So, the tracking pixel communicates back to the third party ad network servers, and then gives you a cookie so that you can be later identified when you arrive at that third party site (Facebook, in this case).
Let’s walk through those steps from the tech side.
- You visit a specific page on coolrollerblades.com with the Facebook Ads tracking pixel. It sends the data to the Facebook servers, which also updates the cookie in your browser that you initially received from Facebook.
- You visit Facebook.com at a later point
- You see an ad for rollerblades, since Facebook connected the visit to coolrollerblades.com to your browser cookie when you typed in the page.
Most of the ad networks use real-time bidding to determine if an ad will be shown or not, but that is a topic for another tutorial. For now, assume that coolrollerblades.com won the auction.
So, tracking pixels add another dimension to this system by allowing a page load on one site to communicate data to servers from a third party. They also update the cookie in the user’s browser connected to that ad network. This one-time link is important because once the user visits another site connected to the ad network, the cookie will be again linked to the data collected from the pixel.
For a more technical explanation , check out this Quora answer.
A Brief Note on Motives Behind Cookies
Here’s one area where cookies and doctor’s visits are pretty different. Most people would say that an annual doctor’s visit for a child is an unquestionably good thing. Unless you do not trust modern medicine, it’s an easy way to get your child in front of an expert at least once a year.
On the other hand, there is a little more debate around the privacy issues that come along with cookies. Most people are comfortable with a site that simply uses your info to load your account in your browser of choice. But, especially after the Facebook Ads crisis stemming from the 2016 US Presidential Election, some people have become uncomfortable with retargeting. They don’t want ad networks to track them on many sites across the Internet. I am going to stay out of the privacy debate, but instead wanted to offer some background on the range of opinions on cookies.
Get The Latest Tutorials
Did you enjoy this visual tutorial? sign up here to get my latest guides on web development topics:
