Javascript Rewrite

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-2"> 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 (one of the standard groups, mostly used for analytics 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
type="text/JavaScript"
. The code inside the tags will then be recognized and run as normal.

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

Optanon.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: ​

Optanon.InsertScript(url, selector, callback, options, groupId) ​

An example would be: ​

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

See the table, Table 2, Parameters for Optanon.InsertHtml, 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 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.

Optanon.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:

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

An example would be:

Optanon.InsertHtml('some content', 'body', null, null, 3);

See the table,Table 2, Parameters for Optanon.InsertHtml 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 tag:

some content

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

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, Table 3, Options Parameters Values, describes the behaviors for each option.

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.