Tracking w/ Cookies & Web Storage

Tracking a visitor's progress through your site is useful.

Any time you are going from one page to another, and you want to remember something, tracking is essential. It's a fundamental part of what makes shopping carts, logins, and referral systems work.

Common Use Cases

Here are some of the most practical uses on Webflow sites;

Session management;

• What's in the shopping cart right now?
• What steps are needed to complete enrollment?

Personalization;

• Is the site in dark mode, or light mode?
• What language setting have they chosen?
• Has the user clicked that checkbox? Is it on or off right now? What about that combobox selection? Those collection list filter settings?

Tracking;

• Referral tracking. A user visits using a special URL, with a referrer querystring code. You track that code, and save it when a the user performs a conversion action, like submitting a form.
• Special ad page tracking. Run a special campaign, pointing people to a special page. It offers a special deal. Like referral tracking, we remember that offer all the way through to conversion.

How Tracking Works

The foundation of most tracking approaches is the ability to store and retrieve information in the web-browser, and there are several ways to achieve this;

1. Cookies
2. Web Storage API
3. > window.localStorage
4. > window.sessionStorage

Tracking & Webflow

One of the key differences between Cookies and Web Storage is that cookies are communicated to the server, and web storage is client-side-only.

In Webflow projects, we do not have a server-side programming capability- so difference between cookies and web storage is irrelevant to us.

Other key differences include where and when the saved data is accessible, and how like it will be remembered.

Key Differences

Use Cases

Session Storage

I want to store something temporarily, like a referrer ID, or shopping cart data, or a login. It should go away when the user leaves.

In this use case, devs are usually considering cookies v. sessionStorage. Here are some of the key differences mentioned by MDN in how sessionStorage behaves differently from cookies;

• Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab. That page session is valid only for that particular tab.
• A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.
• Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
• Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.
• Duplicating a tab copies the tab's sessionStorage into the new tab.
• Closing a tab/window ends the session and clears objects in sessionStorage.

Notes

Using cookies

Session only cookies with Javascript - StackOverflow

Cookies - Wikipedia

Demos

Webflow demo comparing session cookie v. sessionStorage v. localStorage.

Cloneable - Demo

‍

Demonstration Site - MDN

‍