Webflow Cookies & Storage Tracking ❺

Track referrals, user info and more to improve your site's user experience (UX)

Overview

Tracking and storage mechanisms like Cookes & Web Storage are central part of what makes the Internet work today. But all of these things require code to access.

This library makes it easier by;

• Abstracting cookies & web storage, so you can switch painlessly

• Providing a simple script API for those who want to add basic logic functionality in their Webflow site scripts

• Providing NO CODE connections for features like conditional visibility

Demonstration

Cookie & Web Storage | User Tracking - WebflowCookie & Web Storage | User Tracking

Cloneable

Cloneable | The Ultimate in Cookie Tracking

Demo

Usage Notes

Generally, the tracker will be "installed" to the window object, so that it is globally-accessible. In the code examples here, you can see that in the a convention.

Track something

To track a general event, such as when the user visited a page or clicked a button, you can just give it a memorable name, and track it;

window.tracker.track("my-item");

Now, the label my-item is tracked, and will affect things like conditional visibility of elements that are connected to it. See below.

If you want to track a specific piece of information with that label, you can add it as well. This underlies the mechanisms for tracking query string params and checkbox states, which you'll see in the subsections.

window.tracker.track("my-item", "data");

Un-Track something

To remove something from tracking;

window.tracker.untrack("my-item");

Conditional Visibility

Sygnal Attributes has a NOCODE conditional visibility feature in the tracking library as well.

If you want an element to be visible only when a the label my-item is tracked, add this custom attribute to that element;

wfu-show-tracked="my-item"

Likewise, if you want an element to be hidden when a particular label is tracked, add this custom attribute to that element;

wfu-hide-tracked="my-item"

Getting Started ( LOCODE )

This library has configuration options, so we've taken a LOCODE approach to its design.

First, add the library as detailed in Quick Start.

Add your code

Add this JS reference to the site-wide before BODY. It can be page-specific if you only capture and retrieve tracking info on specific pages.

This is the base configuration.

<script>
  // Create the tracker type you want
  // 'cookies' is default. 'localStorage' and 'sessionStorage' are options 
  window.tracker = new window.sa5.Sa5Tracker({
    "method": "cookies",
  });
</script>

Apply the custom attributes and code pieces based on your configuration needs

See above, and the feature-specific sub pages for details.