Browser Cookie Consent Management for SuiteCommerce

TL;DR Opening

Manage browser cookie preferences in SuiteCommerce to enhance user experience and compliance with cookie regulations. This process involves creating a consent form, retrieving user preferences, and storing them effectively through the browser's cookie mechanism.

How to Create a View for the Cookie Banner

To effectively capture user consent on cookie usage, a view must be created within the SuiteCommerce framework. The banner enables users to accept or reject various categories of cookies, including marketing, performance, and analytical cookies. It's crucial to note that essential cookies cannot be rejected as they ensure the website functions correctly.

Example Code for Banner View

This example illustrates creating a banner view, enabling users to interact with their cookie preferences:

1define (
2  'NetSuite.MyCookiesExtension.Banner.View',
3  [
4    'SCView', 
5    'jQuery',
6    'netsuite_mycookiesextension_banner.tpl'
7  ],
8  function(SCViewComponent, jQuery, netsuite_mycookiesextension_banner_tpl) {
9    'use strict';
10 
11    var SCView = SCViewComponent.SCView;
12 
13    function MyCookiesExtensionBannerView(params) {
14      SCView.call(this);
15      this.template = netsuite_mycookiesextension_banner_tpl;
16      this.userProfile = params.userProfile;
17    }
18 
19    MyCookiesExtensionBannerView.prototype = Object.create(SCView.prototype);
20    MyCookiesExtensionBannerView.prototype.constructor = MyCookiesExtensionBannerView;
21 
22    // Event handlers
23    MyCookiesExtensionBannerView.prototype.getEvents = function() {
24      return {
25        'click #myCookiesExtensionSavePreferences': 'savePrefs',
26        'click #myCookiesExtensionClosePreferences': 'closePrefs',
27      };
28    };
29 
30    // ...Additional function implementations...
31    return MyCookiesExtensionBannerView;
32  }
33);

Initialization Tasks

When the banner is initialized, it checks for existing browser consent cookies. If these cookies are absent or need updating, the banner displays to solicit user preferences.

How to Get or Set the Browser Cookie

The consent cookie has the name trackingConsentCookie, and its value is stored as a Base64-encoded string. The following code snippets exemplify how to retrieve and set this cookie.

Getting the Browser Consent Cookie

1MyCookiesExtensionBannerView.prototype.getBrowserConsentCookie = function() {
2  var cookies = document.cookie.split(';');
3  return cookies.find(function(element) {
4    return element.trim().startsWith('trackingConsentCookie');
5  });
6};

Setting the Browser Consent Cookie

MyCookiesExtensionBannerView.prototype.setBrowserConsentCookie = function(cookieOptions) {
  var browserCookieValue = window.btoa(JSON.stringify(cookieOptions));
  document.cookie = "trackingConsentCookie=" + browserCookieValue;
};

Save Visitor Preferences

To save user preferences effectively, when a user clicks "Save", collect their selections and format the data as required. This includes an ID, a timestamp, and a set of consent settings, ultimately encoded as a Base64 string.

Example of Saving Preferences

1MyCookiesExtensionBannerView.prototype.savePrefs = function() {
2  var now = Date.now();
3  var cookieOptions = {
4    id: now + navigator.userAgent.replaceAll(' ', ''),
5    timestamp: now,
6    consentSettings: {
7      ANALYTICAL: jQuery('#myCookiesExtensionPreferenceAnalyticalCookies').is(':checked'),
8      ESSENTIAL: true
9    }
10  };
11 
12  this.setCookiePreferences(cookieOptions);
13};

Persisting Cookie Preferences in NetSuite

Finally, implement a method to handle cookie storage in NetSuite. User consent settings must be stored accordingly through the UserProfile component if applicable (i.e., user is logged in and connected securely).

Example of Set Cookie Preferences Function

MyCookiesExtensionBannerView.prototype.setCookiePreferences = function(cookieOptions) {
  this.userProfile.setCookieOptions(cookieOptions.consentSettings)
    .then(function() { console.log('Preferences saved successfully.'); })
    .catch(function() { console.log('Failed to save preferences.'); });
};

Conclusion

Managing browser cookies for SuiteCommerce effectively leads to an improved user experience and compliance with privacy regulations. The integration of these settings not only enhances transparency but also ensures that user preferences are respected throughout their interactions on the site.

Key Takeaways

• Create a banner for cookie consent management in SuiteCommerce.
• Store consent preferences in a structured format, utilizing Base64 encoding for cookies.
• Ensure user preferences persist in NetSuite when the user is authenticated.