Cookies, understand them once and for all!
pujoljulia May 9, 2016

‘Cookies’ might be one of the most misused word in the digital marketing environment while being the most frequent topic discussed among digital marketers. Judging by the times and contexts I’ve listened this word being pronounced in the middle of a meeting, I’d say that cookies are able to make anything, even coffee.

Things are changing and people are becoming savvier in the digital marketing field; therefore it’s preferable to have a little knowledge about what the cookies are, how they can be managed and what are their limits. Let’s start with the basic definition:

“Cookies are a tool the browsers manage to remember information across pages and visits.”
Nothing new right? But… cookies are a little bit more complex matter… let’s check out the next video to get an overview:

When I finished seeing this video, my first question was “how does it work?” What I mean by this is how does it work behind the screen, how do you set up cookies? How do you recognize cookies? How do you take a cookie’s value? When does a cookie expire?… If you are asking yourself these questions, keep reading!

Please show me a cookie!

This is just what I’m going to do, a picture is worth a thousand words:

cookies-chrome

Each browser stores cookies at different places (and with a different format). The above picture shows Chrome cookies in Windows 7, stored on the next path:

C:\Users\userName\AppData\Local\Google\Chrome\User Data\Default\Cookies

You won’t be able to open the ‘Cookies’ file with the available tools in your computer. If you try to open it with some text editor, you will see something like this:

cookies-text-editor

To open the file, it is necessary to use a program like DB Browser SQL Lite. If you are wondering why you cannot see the cookies’ value column in the first image, the answer is because they are encrypted for security reasons in the ‘encrypted_value’ column. There are some ways to decrypt them but don‘t worry about it for now as there is another straightforward way to access the cookies’ values, through Chrome interface settings .

The goal to achieve so far is to realize by yourself that a cookie is just a row (with information) of a little Data Base stored on your computer, which the browser reads each time a page loads.

Okay got it, but what do all those columns contain?

As each browser has different ways to access the cookies, I’m going to focus on Google Chrome since it’s becoming one of the most used browsers. Please open Chrome and go to the right hamburger menu at the top right>Settings>Privacy>Content Settings>All cookies and site data.

cookies-chrome-interface

After that, a window (see above image) will pop up showing you all cookies that Chrome has been collecting during your navigation across sites (in fact this window is picking up the information from the database showed in the first picture) as well as the specific characteristics for each one. These features (shown as columns in the first picture) are what defines a cookie, and they are essential to understanding the ‘cookie’ concept:

1. Cookie Name

It is simply the name of the cookie, decided by its creator. The name is what we are going to use to manage the cookie, so it’s important to add meaningful names.

2. Cookie Value

It’s the value of the cookie, precisely the information we want the browser to remember from the user. Nowadays, it is usual to store into the cookies just an ID which can then be used to query to some database for the information related with this ID.

Surely you’re wondering, why involving databases in the process (which certainly complicates things) if all data can be stored into cookies? Well, there is something I have to explain to you, it’s about the maximum cookie storage capabilities. Cookies are just another HTTP header that is sent between the page and the server which hosts the page, and as a header it has size restrictions, which basically means we cannot create as many cookies as we want, neither set up them with the desired size.

To be supported by all browsers, just remember that cannot be more than 50 cookies per domain (I’ll cover the association between domain and cookie soon), neither more than 3000 cookies per browser and the size of all of them per domain cannot overpass 4096 bytes (we could say that more or less accurate, 2 bytes equal 1 character – ‘hello’ = 2.5 characters). If some of this numbers are reached, something like that could happen:

cookies-crash-website

Uffff… too bad right? And on top of that, if the user doesn’t clean the cookies will never be able to access to the site anymore. Our digital marketing ancestors started to store all user data into cookies until they realized that the capacity wasn’t enough and devised the ID workaround, discussed earlier.

3. Cookie Domain

A cookie is always assigned to a specific domain or subdomain. It’s imperative to you to understand this point, maybe is the most important idea you have to retain of this post, let me repeat it again: A cookie is always assigned to a domain or subdomain. Most of the people fail here and it’s the key point to completely understand how cookies work. Let’s go ahead with a couple of concepts which you will be familiar with:

  • First Party Cookies: When you hear these three words together, mainly refers a cookie assigned to the domain or subdomain where the user is. A cookie called ‘cookie1’ assigned to ‘www.pujoljulia.com’ is a first party cookie from the ‘www.pujoljulia.com’ point of view.
  • Third Party Cookies: That means a cookie assigned to other domain than the user is. A cookie called ‘cookie2’ assigned to ‘www.googleadservices.com’ is a third party cookie from the ‘www.pujoljulia.com’ point of view.

Realise that the concept of First Party orThird Party always depends of the point of view of the certain domain. Let’s tackle to another important concept: A domain can only read cookies assigned to itself. Is really important to retain this information as well, again: A domain can only read cookies assigned to itself. Check the next picture:

first third party cookie

Now you clearly understand how cookies work between different domains, but what about between subdomains and subdomains between domains? Not be scared, take a look at the next pyramid:

pujoljulia.com
www.pujoljulia.com    contact.pujoljulia.com
es.www.pujoljulia.com    es.contact.pujoljulia.com
private. es.contact.pujoljulia.com    private.es.contact.pujoljulia.com

RULE: You can going up, but not going down.

Cookies stored at ‘pujoljulia.com’ can be read across all subdomains, which means if the user is in www.pujoljulia.com, the browser could read the cookies stored at pujoljulia.com but if the user is in pujoljulia.com, the browser cannot read the cookies stored at www.pujoljulia.com.

The same rule applies for the bottom level of the pyramid, so from private.es.contact.pujoljulia.com the browser can read cookies stored at es.contact.pujoljulia.com but not vice versa. I know this can seems complicated at the beginning, but if you have got the concept it’s pretty simple to understand how it works.

4. Cookie Path

To complicate a little bit more the things, the cookies can also be laid in a specific path of the domain or subdomain, which means these cookies will just be read from the specific path defined (meaning cookies stored at pujoljulia.com/post1 can only be read from this specific page).

This is a useless feature, I don’t think you gonna see many scenarios where cookies have been stored at a specific path.

5. Cookie Security I

To improve the security of the cookies exists a flag called HTTPOnly used by server cookies  (could be cookies created with server-side languages like PHP or Phyton) that tells the browser if has to allow or not to read a cookie from javaScript language (client-side language).

This flag is usually added when the developer wants to protect the value of the cookie from a possible Cross-Site Scripting (XSS), which basically means to ‘steal’ this value through some javascript inserted at the page for malicious purposes. Unfortunately this flag is not as secure as apparently seems, as through javascript we can read the HTTP Headers by using the XMLHttpRequest javaScript API and so take the cookie value, nevertheless is always a good practice set it up if there is no desire to manage the cookie through javaScript.

6. Cookie Security II

Another flag to improve the security of cookies is secure, if activated, will prevent to share the cookie if the page is not under secure protocol (https). On some domains, just those pages that contains forms use secure protocol, if you active a cookie along with the secure flag on the form page (on https) and then a user moves to another non secure page (on http) the cookie will not be shared.

7. Cookie Expiration

The expiration of the cookie could be set up with the expires parameter, which expects to receive a data format like that “Mon, 25 Apr 2016 10:13:36 GMT” (explained later how get that format through javaScript) or with max-age parameter, which expects the duration time in seconds during which the browser should hold the cookie.

Since the early versions of Internet Explorer do not support max-age, usually have being used the expires parameter, but all modern browsers accept already the parameter, so feel free to use it.

Yes yes... but how manage them?

Understood all cookies’ features, now let’s focus on how to manage them. As I already told you, cookies could be handled by different languages, both server and client side, but this post is gonna focus just on javaScript way, since as Digital Marketers it will be the most used language.

javaScript has direct access to the document  (the page itself) of the browser, thanks to the document API supported for all browsers. One of the document’s methods it’s called cookie, which returns a pair name/value string of the cookies, split by a semicolon. Let’s try the code at the Chrome console browser:

cookies-chrome-console

As this request has been made at my blog, the cookie string you see it’s just composed with first party cookies, those associated with pujoljulia.com, www.pujoljulia.com or whatever subdomain existing on my site. document.cookie is the unique tool we’ve to manage the cookies, so for create, read or delete them we’ll always leverage on that code’s line.

1. Create or Modify cookie

A cookie can only be set up to the current subdomain level (for instance www.pujoljulia.com), for only be accessed from this subdomain, or to the domain level (for instance pujoljulia.com), for be shared across all subdomains. Create a cookie is simple, open the browser console (f12 for windows and cmd+1 for mac), copy the next code and press ‘Enter’.

Then you will see something like that:

create a cookie

Well done, you already has created a cookie. To see your new creation just move to the ‘Resources’  ‘Application’ Tab on the Browser Console, chose ‘Cookies’ on the right side and finally click over the domain’s name:

resources tab chrome console

‘Resources’  ‘Application’ tab is quite interesting, as you can see all storage tools that the browser disposes are shown here; by now let’s put the focus just on the cookies. This tab it’s suppose to contain only first party cookies, the cookies associated to my domain, but when the page contains an iframe, its cookies appear here as well, although no to be read. This is the case of YouTube, since at the begining of this post I embedded a video, the cookies set up on youtube.com by the iframe are already shown at this tab. Notice that when I’ve created the cookie, I’ve not use the security flags, in fact I cannot since the cookie is created through javascript (so I cannot set up HttpOnly) and the blog runs over http (so neither I cannot use secure flag).

Typing the cookie string and set up the proper date format each time we want to create a cookie can become tedious, for that we can simply automate the process into a function such as the next:

Notice that the function expects 5 parameters, almost all explained before except HttpOnly, as this flag can only be set up by client side languages like PHP, and path, since is really difficult to find yourself in a situation where you’ve to use it.

cookieName and value are mandatory, if days is missing cookie will be stored as a session expiration time (which means cookie will remain until the browser be completely close). Finally as a cookie can only be stored to a domain or to a current subdomain, if level parameter is missing, by default cookie will be stored at domain level, otherwise cookie will be stored at the current subdomain (you can pass ‘true’ to level parameter to store it at subdomain). secure parameter, if used, will be only activated if the page runs over secure protocol.

There are a lot of functions out there that are going to help to you to automate the cookies creation process but, even you grab this one or another, you’ve to ensure that the function deals with all kind of domains, specially with those with more than two ‘dots’ (co.uk, gov.au…).

The ‘for bucle’ you see into the function, is trying recursively to set up a fake cookie, called ‘w_’ at the domain level to figure out how many ‘dots’ there are after the domain’s name. For example, if we want to set up a cookie at www.example.co.uk (two dots after the domain name -> .co.uk) at domain level, the for loop will start to set up it at co.uk level, as this is not allowed for the browsers, the bucle will loop again and try it to example.co.uk, as this is allowed by the browsers, the bucle will stop and set up the fake ‘w_’ cookie. Thanks to the bucle, now in the ‘x’ variable we have the number of ‘dots’ after the domain’s name, so we can delete the ‘w_’ cookie (deleteCookie(‘w_’);) and create the real one at domain level ‘.example.co.uk.

That trick is used because there is no other way to identify a domain, taking in account all possible subdomain/domain combinations existing at the network. Also notice that the fake cookie ‘w_’ is used straight instead of looping with the real cookie, this is just to allow this function to modify the cookie’s value. Yes I said modify! To modify some feature of the cookie, you just have to call the above function with the cookie’s name you wanna modify along with the new value or expiration date you want to change.

2. Read Cookie

Unfortunately, read a cookie is not as easy as create it. You can find out there a plenty of functions that, given a cookie name, automatically returns its value.

As said, the unique way to handle cookies is by document.cookie command and as shown, it returns a pair name/value cookie string. In javaScript, it’s often used the for bucle to go through an string to pick up the value, but I’d recommend using Regular Expressions, as they will make your code run faster. Here is a function to read cookies:

Remember when we talk about functions, they are something we just call in aims to take some value in a return. In this case we send the name of the cookie, and the function returns its value, in other words the function ‘reads’ the cookie. Let’s type the function and then use it to read some cookie’s value:

read a cookie function

Easy right? But we don’t want to do that without understand it, so let’s figure out what happens into the function. If is the first time you see javaScript merged with Regular Expressions, all stuff after ‘match’ keyword it’s probably Greek for you. A ‘match’ method takes an string, in this case the name/value cookie string, and return an array with the next structure:

You can easily make a test taking the Regular Expression from the function, replace the ‘cookieName’ variable by the name of some cookie and paste it to the browser console:

regex cookie

The process that javascript has followed to get the array is the next:

If you find…

  1. (^|;): a part of string that just starts(^) or goes after semicolon (;),
  2. \\s*: and followed by one or various blank spaces (\\s*),
  3. cookieName: and followed by the cookie name, in this case ‘_ga’,
  4. \\s*: and by one or various blank spaces (\\s*),
  5. =: and by a ‘=’ sign,
  6. \\s*: and by one or various blank spaces (\\s*),
  7. ([^;]+): and finally followed by any character except semicolon…

… then give it to me!

There is one more thing you have to realize, all stuff enclosed into parenthesis are the strings which the returned array contains, so basically we’re defining a string structure and enclosing the interesting parts between parenthesis to be part for the returned array:

Once got the array, the function returns the value of the cookie (by the method ‘.pop()’) if the match method has found some match, otherwise returns blank (“”).

3. Check Cookie

Sometimes as a digital marketers we might want to know if the cookie is present or not at the user’s browser, for instance, let’s say we want to know if the user is on the landing page (the first page a user visit from the site) to pop up an offer to engage him. To know that, we’ve to check if a cookie, let’s call it ‘isLanding’, is in the user’s browser. As the user just arrives at the site, there is no cookie, so the lack of this cookie indicates it’s the first page the user visits.

When this user goes to the next page, we will also want to know if the user is on the landing page (we don’t want to show the banner again!), so when the user arrives at the site, if there is no ‘isLanding’ cookie, let’s add it. We are going to repeat it each time page loads, as explained if there is no cookie means the user is on the landing page, otherwise means is not his first page. I give you just an example, there is a lot more user cases where we just want to check if the cookie is at place. In order to check for cookie’s existence, let’s create another function, this time will be called ‘checkCookie’:

The function returns true if the cookie exists and false if not. Realize that the code is exactly the same than used to create a cookie, just the return values have been changed. You can prescind of this function but my advice is to use it, will make your code more clear.

4. Delete Cookie

The remaining thing we might do with the cookies is deleted them. To do that, enough with rewrite the cookie with a past date, here is the function:

As we’ve seen, a cookie can only be stored at the current subdomain level (for instance www.pujoljulia.com) or a domain level (for instance pujoljulia.com), and since we want to be able to delete both types of them, the code has to double check if the cookie is deleted. Notice also the ‘for bucle’ into the function, it takes care of setting up the proper domain for those countries which use more than one ‘dot’ (i.e co.uk).

Cool! But how is it related with analytics?

Cookies are the core of the Web Analytics, identifying users, saving preferences, identifying navigation paths, storing demographic data… everything. We could agree that for the basic analytics implementations the cookies are not necessary (except for the cookie that identify a user, user = same device + same browser), but basic implementations are boring :) and don’t provide the information that the business really need.

Unfortunately neither Dynamic Tag Manager nor Google Tag Manager are truly ready by default to handle cookies and take advantage of their capabilities, so let’s fix it! You remember when we talk about the Data Layer right? Just a layer that holds all information that as digital marketers we need from the sites, good! What if we empower it by adding new functionalities? Remember that Data Layer is composed by methods, which are basically functions into objects, that means if we place the cookie functions into it, then the Data Layer will provide us with those functionalities, take a look:

Ou! Fantastic, looks nice! Once the Data Layer placed on page, we are already able to use these methods through DTM and GTM to store information and using it later. See all functions in action below:

cookie functionalities

There are many cases where you could use them, for example you may want to sent to Adobe or Google  Analytics the payment method along with the purchase event but, this information is not always available at the success page, instead is a few pages back so you would have to keep this value into a cookie.

Do you know more cases where use the cookie capabilities?

Your comment

Your email address will not be published. Required fields are marked *