ClientSide Cookie Management optanoncategoryC0004

https://community.cookiepro.com/s/article/UUID-730ad441-6c4d-7877-7f85-36f1e801e8ca

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 Compliance. 

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 Compliance 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>', 'body', 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.

CookiePro with WooCommerce

Here, find the line:

<script type="text/javascript" data-adroll="woocommerce-adroll-pixel">

and replace it with:

<script type="text/plain" data-adroll="woocommerce-adroll-pixel" class="optanon-category-C0002-C0003-C0004">

In this example C0002-C0003-C0004 refer to the cookie categories in CookiePro, so when cookie categories 2, 3 and 4 are allowed, this means that this script is supposed to run.