Skip to main content

Cookies

cookie is a text file that is placed on your local storage by a Web page server. Cookies are useful to personalize your online experience. Session-based cookies last only while your browser is open and are automatically deleted when you close your browser. Persistent cookies last until you or your browser delete them or until they expire. They are unique and allow us to do site analytics and customization, among other similar things.

Cookie Consent Example 1

Cookies remember website configuration, login details and products added to the shopping cart. For years they’ve also been the backbone of online advertising for targeting, retargeting, tracking and attribution.

First-party cookies: These cookies are set by the domain you are visiting at the time and help deliver a good user experience (remembering your language preferences, for example).

Third-party cookies: These cookies are set by domains other than the one you are visiting and are typically used for online advertising purposes.

Intelligent Tracking Prevention (ITP​

Intelligent Tracking Prevention (ITP) 1.0, a privacy feature that came with Safari 11 in September 2017.

Because Safari, by default, blocks third-party cookies, advertisers cannot properly implement ad-frequency management and capping, retargeting, or view-through attribution modeling.

Attribution​

ITP 2.2 restricts all conversion attribution carried out via so-called link decoration if the referring domain has been classified as having cross-site tracking capabilities.

For example, when users come from domains like Facebook or Google through a URL that contains extra query parameters (which follow the “?” in the address) or hash fragments (which follow the “#” symbol), then all JavaScript cookies set on the page via document.cookie will expire after 24 hours, shortening the look back period.

Web analytics​

Safari, since the introduction of ITP 2.1, deletes first-party cookies set by web analytics and other MarTech tools after seven days – or in 24 hours in specific situations set out by ITP 2.2.

From a marketer’s perspective, this makes view-through attribution and accurate analytics impossible. Because users’ clickstream data disappears after one or seven days, the customer journey is broken and badly represented in most analytics tools. ITP makes analytics tools incorrectly display the number of unique visitors on a website (it artificially inflates the numbers).

Cookies remain relevant for small sites but should be used sparingly and with proper settings:

// Set a cookie with modern secure defaults
function setCookie(name, value, options = {}) {
  const defaults = {
    path: '/',
    sameSite: 'Lax',     // Prevents CSRF, allows normal navigation
    secure: true,        // Only sent over HTTPS
    maxAge: 60 * 60 * 24 * 7, // 1 week in seconds
    // Add domain if needed for subdomains
  };
  
  const cookieOptions = { ...defaults, ...options };
  let cookieString = `\\\${encodeURIComponent(name)}=\\${encodeURIComponent(value)}`;
  
  for (const [key, value] of Object.entries(cookieOptions)) {
    if (value === true) {
      cookieString += `; \\\${key}`;
    } else if (value !== false && value !== null) {
      cookieString += `; \\\${key}=\\${value}`;
    }
  }
  
  document.cookie = cookieString;
}

// Usage example
setCookie('cookiesAccepted', 'true', { maxAge: 60 * 60 * 24 * 365 }); // 1 year

Privacy-First Approach​

In 2025, all storage should follow privacy-first principles:

  1. Transparency: Clear cookie and storage policies
  2. Minimal Collection: Only store what's necessary
  3. User Control: Allow clearing of data
  4. Consent Management: For non-essential storage
<div id="cookie-consent" class="cookie-banner">
  <p>This site uses cookies for essential functionality and to provide the best experience.</p>
  <div class="cookie-actions">
    <button id="cookie-accept-all">Accept All</button>
    <button id="cookie-accept-essential">Essential Only</button>
    <button id="cookie-settings">Customize</button>
  </div>
</div>

<script>
  // Simple cookie consent manager
  const cookieConsent = {
    // Check if consent has been given
    hasConsent: function(category = 'essential') {
      const consent = localStore.get('cookieConsent', {});
      return consent[category] === true;
    },
    
    // Save consent preferences
    saveConsent: function(preferences) {
      localStore.set('cookieConsent', preferences);
      this.hideBanner();
      
      // Apply consent choices (enable/disable services based on preferences)
      this.applyConsent(preferences);
    },
    
    // Show the consent banner
    showBanner: function() {
      if (!this.hasConsent('essential')) {
        document.getElementById('cookie-consent').style.display = 'flex';
      }
    },
    
    // Hide the consent banner
    hideBanner: function() {
      document.getElementById('cookie-consent').style.display = 'none';
    },
    
    // Apply consent choices to site functionality
    applyConsent: function(preferences) {
      // Enable/disable functionality based on consent
      if (preferences.analytics) {
        // Initialize analytics
      }
      
      if (preferences.marketing) {
        // Initialize marketing tools
      }
    },
    
    // Initialize the consent system
    init: function() {
      const savedConsent = localStore.get('cookieConsent');
      
      if (!savedConsent) {
        this.showBanner();
      } else {
        this.applyConsent(savedConsent);
      }
      
      // Set up event listeners
      document.getElementById('cookie-accept-all').addEventListener('click', () => {
        this.saveConsent({
          essential: true,
          analytics: true,
          marketing: true
        });
      });
      
      document.getElementById('cookie-accept-essential').addEventListener('click', () => {
        this.saveConsent({
          essential: true,
          analytics: false,
          marketing: false
        });
      });
    }
  };
  
  // Initialize on page load
  window.addEventListener('DOMContentLoaded', () => {
    cookieConsent.init();
  });
</script>