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 |
head body
|
Yes |
|
callback |
Function |
A JavaScript function to be called once the |
null |
Yes |
|
options |
Object |
A list of behaviors for when the |
See Options definition below |
Yes |
|
groupId |
Number |
Group ID for which the |
|
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 |
|
Yes |
|
callback |
Function |
A JavaScript function to be called once the element has been inserted |
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 |
|
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. |
|
No |
|
deleteElements |
Array |
A list of html element id’s to delete after inserting the element. |
|
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.