Cookie Consent Banner Implementation in SuiteCommerce

TL;DR

Implementing a cookie consent banner in SuiteCommerce enables website visitors to manage their preferences for analytics and marketing cookies effectively. This setup is crucial for complying with privacy regulations and enhancing user experience.

Creating a View for the Cookie Banner in SuiteCommerce

To manage cookie consent on your website, you'll need to create a view for the cookie banner. This view encapsulates the logic allowing users to accept or reject different types of cookies such as marketing, performance, or analytical cookies. Here’s a concise example using the SCView class:

Example of Cookie Banner View

This example shows the structure of a banner view using JavaScript:

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 
16      this.template = netsuite_mycookiesextension_banner_tpl;
17      this.userProfile = params.userProfile;
18 
19      // Initialization tasks. See below.
20    }
21 
22    MyCookiesExtensionBannerView.prototype = Object.create(SCView.prototype);
23    MyCookiesExtensionBannerView.prototype.constructor = MyCookiesExtensionBannerView;
24 
25    // Get browser consent cookie functions
26    MyCookiesExtensionBannerView.prototype.getBrowserConsentCookie = function() {
27      // Implementation here
28    };
29 
30    // Other methods...
31 
32    return MyCookiesExtensionBannerView;
33  }
34);

Defining Initialization Tasks

In the constructor, define initialization tasks to check for the existence of the browser consent cookie:

1var browserConsentCookie = this.getBrowserConsentCookie() || null;
2 
3if (browserConsentCookie) {
4  // Unencode and parse cookie data...
5} else {
6  jQuery(function() {
7    jQuery('#myCookiesExtensionBanner').show();
8  });
9}

Getting and Setting the Browser Cookie

The cookie, called trackingConsentCookie, should store a Base64-encoded string. Utilize the following methods to manage this cookie:

Getting the Cookie

MyCookiesExtensionBannerView.prototype.getBrowserConsentCookie = function() {
  // Implementation here
};

Setting the Cookie

MyCookiesExtensionBannerView.prototype.setBrowserConsentCookie = function(cookieOptions) {
  // Implementation here
};

Saving Cookie Preferences

When a user saves their preferences, gather these settings and format the required object:

MyCookiesExtensionBannerView.prototype.savePrefs = function() {
  // Gather preferences...
};

The preferences should be structured like this:

{
  id: <id>,
  timestamp: <timeStamp>,
  consentSettings: {<preferenceName>: <preferenceValue>, <...>}
}

• id: A unique identifier generated from the timestamp and the user agent string.
• timestamp: Current timestamp via Date.now().
• consentSettings: A boolean object for cookie preferences, where the analytical tracking should specifically use the key 'ANALYTICAL'.

Persisting Cookie Preferences in NetSuite

To store these preferences in NetSuite, implement the setCookiePreferences method:

MyCookiesExtensionBannerView.prototype.setCookiePreferences = function(cookieOptions, browserCookieValue) {
  // Logic to save cookie preferences...
}

Ensure that your implementation adheres to HTTPS requirements and user login states to successfully store consent preferences.

Example of the Consent Form Template

The banner view also requires a template to render the consent options:

1<div id="myCookiesExtensionBanner" style="display: none;">
2  <form>
3    <input type="checkbox" id="myCookiesExtensionPreferenceEssentialCookies" name="ESSENTIAL" checked="" disabled=""> <b>Essential</b><br>
4    <input type="checkbox" id="myCookiesExtensionPreferenceAnalyticalCookies" name="ANALYTICAL"> <b>Analytical</b><br>
5    <input type="button" id="myCookiesExtensionSavePreferences" value="Save"> <input type="button" id="myCookiesExtensionClosePreferences" value="Close">
6  </form>
7</div>

The full implementation of the cookie consent banner allows for legal compliance regarding user data privacy while improving overall user interactivity and satisfaction on your SuiteCommerce site.

Key Takeaways

• Implement a flexible cookie consent banner for user preferences.
• Important to structure cookie settings within specific formats for proper functioning.
• Ensure that user consent is logged and managed securely within NetSuite when conditions permit.