Salesforce

Client-Side Cookie Management

« Go Back
Information
Client-Side Cookie Management
UUID-730ad441-6c4d-7877-7f85-36f1e801e8ca
English
Checked
Content

Cookies themselves cannot be directly blocked; however, most cookies that fall under the legislation are set through inserted scripts or tags, such as JavaScript or HTML iFrames. This includes most analytics and third-party cookies, such as advertising cookies.

Therefore, to comply with the law, such scripts should be blocked, or substituted for non-cookie alternatives, whenever consent has been withheld or withdrawn.

To achieve this, you can use one of several custom JavaScript helper methods along with a wrapper control function.

Note

This article only covers JavaScript. For information on blocking iFrames, see Manually Rewriting iFrames in Cookie Consent.

JavaScript Type Re-Writing

This is one of the most efficient methods of preventing cookies controlled by script tags being set without consent. This method requires the least amount of change to your site and does not require use of the Wrapper (below).

It is recommended that you use this approach whenever possible.

How it Works

Normal script tags look like this:

<script type="text/javascript">
code
</script>

Using script type re-writing, you need to change the scripts to:

<script type="text/plain" class="optanon-category-C0002">
code
</script>

The number in the class identifier corresponds to the cookie group id for the cookies that the script loads. In this case, it is Performance Cookies.

When the above code loads, JavaScript inside the tags will not run, and no cookies will be set. Then, when the Cookie Consent code loads, if cookies for the associated group have consent, it will dynamically change the tag to: script type=text/JavaScript – the code inside the tags will then be recognized and run as normal.

Note

You can block multiple categories of cookies using this method with the following syntax:

<script type="text/plain" class="optanon-category-C0002-C0003-C0004">
code
</script>

The values in the phrase class="optanon-category-#-#-#" correspond to the categories of cookies set up in the cookie list for the site. 

When you list multiple categories using this method, the categories are blocked concurrently. None of the cookies in these categories will be set unless the site visitor consents to all of the categories being blocked.

The Optanon Wrapper Control

The Optanon Wrapper is provided in the main script tag and looks like this:

<script type="text/javascript">
function OptanonWrapper() {
}
</script>

It functions as a holder for the helper methods which are used to block or control any script or html tags which cause cookies to be set. The wrapper is executed on each page load, or whenever the user saves changes to the privacy settings in the Preference Center.

When cookie groups are switched from Inactive to Active, the relevant helper methods are executed, and the related JavaScript/HTML will be inserted in the page.

The helper method scripts do not have to be placed inside the wrapper control. However, if they are not, they are only executed on first page load. If you want any opt-in action (Inactive to Active) to be reflected immediately in the user experience, then you should use the wrapper.

Changes in the user experience as the result of an opt-out action (Active to Inactive) will only be reflected on page refresh or navigating to a new page.

Helper Methods

Helper Methods are used to block or control any script or html tags which cause cookies to be set.

Note

Optanon and OneTrust can be used interchangeably. However, we recommend using OneTrust.

OneTrust.InsertScript

With this method, the scripts responsible for setting cookies are placed in an external file, and dynamically inserted in the page when the cookie group they are associated with is Active.

The format is:

OneTrust.InsertScript(url, selector, callback, options, groupId)

Example 1. OneTrust.InsertScript

OneTrust.InsertScript('/performance-cookies-script.js', 'head', null, null, '2');

See the table below for an explanation of the different parameters.

The Result:

If the Performance Cookies group with an id of 2 is set to Active or Always Active, the following script is inserted into the page immediately before the closing head tag:

<script type="text/javascript" src="/performance-cookies-script.js"></script>

Any JavaScript contained in the performance-cookies-script.js file then executes as normal.

If the Performance Cookies group is Inactive, the script is not inserted.

Parameter

Datatype

Description

Value

Required

url

String

Absolute or relative URL of JS file

Yes

selector

String

HTML parent element selector where the script tag will be inserted

head

body

parent id

Yes

callback

Function

A JavaScript function to be called once the script tag has been inserted

function name

null

Yes

options

Object

A list of behaviors for when the script tag is inserted

See Options definition below

Yes

groupId

Number

Group ID for which the script tag will be inserted

Optanon Group ID

Yes

OneTrust.InsertHTML

This method should be used where the code controlling the setting of cookies is either a standard or custom HTML tag.

The format is:

OneTrust.InsertHtml(element, selector, callback, options, groupId)

Example 2. OneTrust.InsertHTML

OneTrust.InsertHtml('<customElement customAttribute="value">some content</customElement>', 'parent_element_id', null, null, '3');

See the table below for an explanation of the different parameters.

The Result:

If the Functionality Cookies group with a group id of 3 is set to Active or Always Active, then the following html is inserted into the page before the closing body tag:

<customElement customAttribute="value">some content</customElement>

If the Functionality Cookies group is Inactive, the script is not inserted.

Parameter

Datatype

Description

Value

Required

element

String

HTML tag to be inserted

Yes

selector

String

HTML parent element id where the element will be inserted

parent ID

Yes

callback

Function

A JavaScript function to be called once the element has been inserted

function name

null

Yes

options

Object

A list of behaviors for when the element is inserted

See Options definition below

null

Yes

groupId

Number

Group ID for which the element will be inserted

Optanon Group ID

Yes

Note

Some third-party components setting cookies use both JavaScript and HTML elements which are inter-dependent. In most cases, you will then need to use both the HTML and JavaScript helper methods as a pair to avoid any problems of one element being present without the other.

The Options Parameter

With both methods above, the options parameter provides a way to further manipulate page content based on whether consent for a group of cookies has been given. This provides a simple mechanism that enables website owners to either incentivize opting in or deliver a different user experience to visitors who opt-out.

The parameter can contain some or all the following:

{
deleteSelectorContent: <bool>,
makeSelectorVisible: <bool>,
makeElementsVisible: [‘<id>’, ‘<id>’, ‘<id>’, ...],
deleteElements: [‘<id>’, ‘<id>’, ‘<id>’, ...]
}

The table below describes the behaviors for each option.

Option

Datatype

Description

Value

Required

deleteSelectorContent

Boolean

Delete all parent container content before inserting the element.

true

false

No

makeSelectorVisible

Boolean

Shows parent container element after inserting the element.

true

false

No

makeElementsVisible

Array

A list of html element id’s to show after inserting the element.

[ID, ID]

No

deleteElements

Array

A list of html element id’s to delete after inserting the element.

[ID, ID]

No

Note

  • HTML elements will always be inserted before the closing parent element tag.

  • Setting makeSelectorVisible requires the parent element to be manually hidden initially.

  • All HTML elements specified in the list of ids for makeElementsVisible are required to be manually hidden initially.

  • deleteSelectorContent will delete only the content of the container element.

  • deleteElements will completely delete each element specified.

  • Using the selector to specify some element other than head or body requires the ID value of the parent element.

 

Powered by