oil.js docs

1.3.5-RELEASE

Sandbox Github

Introduction

About oil.js

The OIL project aims for a stable cross-company solution for the challenges the GDPR and new EU ePrivacy Regulation will pose to our business.

  • Data privacy opt-in overlay for all users of services offered by various Axel Springer brands and/or units

  • Local opt-in (called "Site Opt-In", SOI) as well as group-based cross-company opt-in (called "Power Opt-In", POI)

  • Integration and hosting on Tealium as well as the option to run it standalone.

The Opt-In Layer (OIL) is an offical Consent Management Provider (CMP) in accordance with the IAB Europe "Transparency & Consent Framework".

Technical Quality Goals

  • OIL will be held compatible with the latest official browser releases, going back to the latest version as listed below and tested on broad range of browsers using Browserstack.com:

    • Chrome 14 - Latest

    • IE 9 - Latest

    • Firefox 9 - Latest

    • Safari 6 - Latest

    • Opera 12

    • Apple iOS 5.1 - Latest

    • Android 4.4.4 - Latest

  • Continously integrated and delivered

  • Modular and maintainable solution

Features

  • Customisable UI and text with audit-proof versioning

  • Fully configurable (cookie categories, timeouts, …​)

  • Easy AB-Testing with extensive events for each user interaction

  • AB-Tested in different brand specific designs with 250k unique users

  • Supports IAB Europe Standard and additionally custom calls

  • Supports Group-Opt-In

  • Works with 99,9% of all browsers (in Germany) & Works with all devices and all resolutions

  • Optimised for high performance and low latency (built to be loaded first)

  • Open source

  • Tested in the cloud on all possible devices

  • Tealium integration and additional features via Tealium like reporting

  • Redirect-Fallback for some older browsers and even for disabled 3rd party cookies in Safari

  • High quality code with high test coverage and static code analysis

  • Loads with low latency and asynchronously for different parts

  • Happy path loads only ~20k (subject to change and further optimization) of gzipped JavaScript

  • Easy to implement with open documentation and examples, including dev kit

Solution Strategy

According the proposal of the European Commission, the European Parliament, and the Council of Ministers, a website is required to prompt users with a menu of privacy options when they are visiting for the first time.

The Opt-In Layer (OIL) is our solution for these requirements consisting of three parts:

  • A subscriber part, which adds the opt-in Layer to the host pages DOM and asks the user to opt-in.

  • A hub part, which acts as a registry site for POI on a domain hosted by the content provider/publishder. This is optional and only needed for POI functionality.

Opt-In Information is stored in a first party cookie in the user’s browser and communicated in a general way to the host site and Tealium. For Power Opt-In there is also a 3rd party cookie stored on a second domain to share information between sites.

Why is there no native app support?

Native mobile apps are very customized concerning technology stack and implementation of tracking and advertising. Therefore, the OIL project won’t offer a generic solution for this purpose.

Consents both on desktop or mobile browsers given by the user can’t be used in the mobile app for two technical reasons: * mobile browsers and in app web views use different ressources to store their cookies * desktop browsers and mobile apps have no physical connections

Quickstart

How to implement OIL on your site

Basic implementation requires two steps:

  • Include oil.js configuration on your site

  • Add two oil.js code snippets to your html

Optionally you can:

Including oil.js sources on your site

Self-hosted solution

This is the recommended way to get OIL to work on your site. Upload all the files of the latest release to your own server and set your configuration to use that server.

You can download all the files for a release from https://oil.axelspringer.com/release. Upload a release folder’s contents to your server and continue with Integrate OIL.

Delivery through the unpkg.com cdn

If you don’t have your own server available and/or don’t want to use the POI features, it may be enough to just include the OIL sources from the unpkg.com cdn. See Integrate OIL.

Delivery through Tealium

An alternative way to integrate OIL with your page is the use of a tag manager like Tealium. If you prefer this solution please read section OIL and Tealium.

OIL creates a standard for the Opt-In but can’t automatically stop your site from tracking your users. So to actually make your page respond to opt-ins you also need to do the following:

  • Make sure your page doesn’t track the user in its default state.

  • If possible, use Tealium for all tracking activities and take advantage of the loading rules support that OIL provides (see section OIL and Tealium for details).

  • Listen to OIL events for loading non-Tealium tags, after the user opted in.

  • Use the soft-blocking feature for tags that OIL provides.

Release files

For reference: these are the files that belong to a release.

  • oil.1.3.5-RELEASE.min.js - This is the file you will need to reference in your website - see below.

  • hub.1.3.5-RELEASE.min.js - This is the file you will need for the power opt-in feature. See sections POI – Power Opt-In for details.

  • hub.html - This is the file you will need for the power opt-in feature.

  • poi-lists - A directory that is needed for the power opt-in feature. It contains JSON files defining POI groups. See sections POI – Power Opt-In and POI-List for details.

  • Chunks, beginning with numbers - they will be loaded asynchronously and you don’t need to do anything with them.

    • 0.1.3.5-RELEASE.chunk.js

    • X.1.3.5-RELEASE.chunk.js

  • oildevkit.1.3.5-RELEASE.min.js - This is the file you will need to use the small OIL SDK. See section OIL SDK for details.

The version number is part of .js files because updated versions of the scripts will be released using a different filename hence we’ll never alter an existing version.

Integrate OIL

To integrate your self-hosted OIL with your website, add the following code snippets to your html:

<script>
/*! 1.3.5-RELEASE */!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="https://unpkg.com/@ideasio/oil.js@1.3.5/release/current/",n(n.s=117)}({117:function(e,t,n){"use strict";!function(e,t){e.__cmp||(e.__cmp=function(){function n(e){if(e){var n=!0,r=t.querySelector('script[type="application/configuration"]#oil-configuration');if(null!==r&&r.text)try{var a=JSON.parse(r.text);a&&a.hasOwnProperty("gdpr_applies_globally")&&(n=a.gdpr_applies_globally)}catch(e){}e({gdprAppliesGlobally:n,cmpLoaded:o()},!0)}}function o(){return!(!e.AS_OIL||!e.AS_OIL.commandCollectionExecutor)}!function e(){if(!(t.getElementsByName("__cmpLocator").length>0))if(t.body){var n=t.createElement("iframe");n.style.display="none",n.name="__cmpLocator",t.body.appendChild(n)}else setTimeout(e,5)}();var r=[],a=function(t,a,c){if("ping"===t)n(c);else{var i={command:t,parameter:a,callback:c};r.push(i),o()&&e.AS_OIL.commandCollectionExecutor(i)}};return a.commandCollection=r,a.receiveMessage=function(t){var a=t&&t.data,c="string"==typeof a;if(a=c&&-1!==a.indexOf("__cmpCall")?JSON.parse(a).__cmpCall:a.__cmpCall)if("ping"===a.command)n(function(e,n){var o={__cmpReturn:{returnValue:e,success:n,callId:a.callId}};t.source.postMessage(c?JSON.stringify(o):o,t.origin)});else{var i={callId:a.callId,command:a.command,parameter:a.parameter,event:t};r.push(i),o()&&e.AS_OIL.commandCollectionExecutor(i)}},function(t){var n=e.addEventListener||e.attachEvent;n("attachEvent"===n?"onmessage":"message",function(e){t.receiveMessage(e)},!1)}(a),a}())}(window,document)}});
</script>

Self-hosted solution

For a self-hosted release, load the javascript from your site:

<script src="https://<your-host>/<path-to-oil>/oil.1.3.5-RELEASE.min.js" type="text/javascript"></script>

Please make sure you’re working with the latest version available. Check https://oil.axelspringer.com/release for further updates. Choose the latest version or the version found in this documentation.

Delivery through unpkg.com

<script src="//unpkg.com/@ideasio/oil.js/release/current/oil.min.js" type="text/javascript"></script>

This unpkg.com URL always points to the latest version. See unpkg.com help to lock your integration to a specified release.

Configure OIL

To ensure that your self-hosted OIL can find all its necessary scripts you must define the publicPath parameter in your oil configuration. It specifies the server path from which all chunks and resources will be loaded. This is a minimal configuration tag:

<script id="oil-configuration" type="application/configuration">
  {
    "publicPath": "//<your-host>/<path-to-oil>",
    "locale_url": "//<your-host>/<path-to-locale>/myLocale.json"
  }
</script>

Delivery through unpkg.com

Note that you will have to add your own locale to the configuration block. See Texts & Locale Object section for details.

<script id="oil-configuration" type="application/configuration">
  {
    "publicPath": "https://unpkg.com/@ideasio/oil.js/release/current/",
    "locale": { "localeId": "myLocale", "version": "1", "texts": {"label_intro_heading":"I am a stub" }}
  }
</script>

OIL SDK

This is a like a drop-in to add a small sdk to any site, which has oil included.

dev kit 01
dev kit 02

Add this to your favorites and open the link on the website you want it to be included:

javascript:(function () {let d = document, s = d.createElement('script');s.id = 'oil-dev-kit-js';s.src = '//<oil-host>/<path-to-oil>/oildevkit.1.3.5-RELEASE.min.js';(d.head || d.body).appendChild(s)}());

Configuring OIL

OIL is configured using a simple JSON configuration block that you put in the upper part of your html.

The Configuration Block

Minimum configuration requires the parameters config_version, publicPath and locale or locale_url, so a minimal configuration block would look like this:

<script id="oil-configuration" type="application/configuration">
  {
    "config_version": 1,
    "publicPath": "my.server",
    "locale_url": "my.server/myLocale.json"
  }
</script>

Configuration version is a number. It will be stored with the consent cookie so we can keep track of which explicit configuration version consent was granted for. Therefore, we recommend to increment this number everytime you change your OIL configuration.

locale_url or locale?

There are two ways to pass locale configuration to your OIL instance. One is the configuration parameter locale which is expected to be an object, the other is locale_url signaling OIL to load that same configuration object from the given URL. You can use whichever is better suited for you but make sure that one of the parameters is part of your configuration.

See the functional configuration parameters section for information on publicPath, locale_url, locale and all the other configuration parameters.

Power Opt-In (POI) or Site Opt-In (SOI)?

Before integrating OIL, decide on whether to use Power Opt-In or Site Opt-In. If you want to implement oil.js on a single site you only need the Site Opt-In aka SOI and the above example is enough to make OIL work on your site.

What if you want to share consent across websites? That’s when you need Power Opt-In aka POI.

POI – Power Opt-In

To instantiate oil.js with POI activated, make up a name for your company group (in the example below MyGroupName is used), then follow these steps:

  • Setup a server where the consent cookie is stored. For example any.domain.com.

  • Upload hub.html from the ./release folder, resulting in https://any.domain.com/hub.html

  • Create a MyGroupName.json and upload it in a subfolder named poi-lists to your server, resulting in https://any.domain.com/poi-lists/MyGroupName.json. Note: The file name must be the same as the value passed in poi_group_name. For an example see POI-List section. Note: Enable CORS for the poi-lists directory and its contained files.

  • Make sure the MyGroupName.json is served with the right CORS-headers so that your websites are allowed to read it.

  • Add the required parameters to each website configuration that should share the consent cookie:

  "poi_activate_poi": true,
  "poi_hub_origin": "//any.domain.com",
  "poi_hub_path": "/hub.html",
  "poi_group_name": "MyGroupName"

A single consent cookie will now be shared across sites that use the same poi_hub_origin and poi_group_name values. You can have multiple groups on the same domain.

Remember you are legally obliged to list all websites/companies belonging to one group.

Example minimal POI configuration:

<script id="oil-configuration" type="application/configuration">
  {
    "config_version": 1,
    "poi_activate_poi": true,
    "poi_hub_origin": "//any.domain.com",
    "poi_hub_path": "/hub.html",
    "poi_subscriber_set_cookie": true,
    "poi_group_name": "MyGroupName",
    "locale_url": "my.server/myLocale.json"
  }
</script>

POI-List

A POI-List file must be a json containing an object with a single property companyList. CompanyList must be an array of company names.

{
  "companyList": [
    "Foo Comp",
    "Bar Inc."
  ]
}
Group-wide vendor whitelist and vendor blacklist

Equal in function to the iabVendorWhitelist and iabVendorBlacklist configuration parameters you can limit vendor consent for every site that’s part of your group.

To do this, you want to extend your POI-List with either one of those elements:

{
  "companyList": [
    "Super Comp"
  ],
  "iabVendorWhitelist": [1,2,3],
  "iabVendorBlacklist": [9,10]
}

The values from the group-wide list override the values defined in a single site’s configuration. More information on what these parameters do, see the Blacklisting and Whitelisting section.

Configuration Parameters

This is a full list of configurable options.

Config Parameter Description Default Setting

advanced_settings

Shows an advanced settings button, displaying the Cookie Preference Center. The CPC enables the user to choose their own level of privacy. These settings are stored in the oil cookie (both SOI and POI) as well.

false

advanced_settings_purposes_default

All purposes in the advanced settings layer should be activated by default

false

config_version

Specifies the version of your OIL configuration. It will be stored with the consent cookie to track which explicit configuration version consent was granted for.

None

cookie_expires_in_days

Value in days until the domain cookie used to save the users decision in days

31

cpc_type

Specifies the type (the layout) of the Cookie Preference Center. Currently, two types are supported: 'standard' and 'tabs'. Depending on this parameter additional label configuration may be necessary. See section [Full Label Configuration] for details.

standard

customPurposes

Array of custom purposes defined by publisher. IDs for custom purposes may range from 25-88.

None

customVendorListUrl

Custom vendor list ('non IAB vendors') to use, will be loaded at the same time as the iabVendorList.

None

default_to_optin

Signal opt-in to vendors while still displaying the Opt-In layer to the end user

false

gdpr_applies_globally

Flag to indicate that publisher is from the EU, thus showing the OIL layer to every user. The flag is passed to vendors.

true

iabVendorBlacklist

Array of vendor IDs to exclude from consent. Details here

None

iabVendorListUrl

Vendorlist to use

https://vendorlist.consensu.org/vendorlist.json

iabVendorWhitelist

Array of vendor IDs to include in consent. If it is set, values in iabVendorBlacklist are ignored. Details here. When white- or blacklisting you might also be interested in the show_limited_vendors_only parameter.

None

info_banner_only

Deactivates calculating of consent string and sets consent cookie if timeout is defined and expired

false

locale

Object including locale version, id and labels. You can define the standard labels for all legal texts and buttons and set a version for it. See here for details

None

locale_url

As an alternative to passing a locale object, set this to a JSON file with the locale configuration. See See here for an example file

None

persist_min_tracking

If minimum tracking should result in removing all OIL cookies from the users browser and close the layer and store this selection in the oil cookie.

true

poi_activate_poi

Activates or deactivates Power Opt-In.

false

poi_group_name

POI group name. POI only affects those sites with the same group name (mandatory if POI is activated).

None

poi_hub_origin

The origin of the hub.js installation

https://unpkg.com

poi_hub_path

The path to the hub.html installation on the origin, if any.

/@ideasio/oil.js@1.3.5-RELEASE/release/current/hub.html

preview_mode

The preview mode is useful when testing OIL in a production or live environment. As a dev you can trigger the overlay by setting a cookie named "oil_preview" with the value "true". This will show the OIL layer on your client.

false

publicPath

The server path from which all chunks and resources will be loaded. You should upload all released files there and configure it.

https://unpkg.com/@ideasio/oil.js@1.3.5-RELEASE/release/current/

require_optout_confirm

Flag to activate the opt-out confirmation dialog within Cookie Preference Center. If set to true, addition label definitions (for labels with prefix label_cpc_purpose_optout_confirm) are required. See section Language label configuration for details.

false

show_limited_vendors_only

Flag to only show the vendors limited by iabVendorWhitelist or iabVendorBlacklist in the CPC

false

suppress_cookies

Deactivates cookie setting - useful for AMP pages only

false

theme

The theme for the layer. By default there are two themes and size modifier themes, dark and light as well as small dark and small light. Themes currently work only as an additional css class. To change the style or theme, look into the styling guide.

light

timeout

Value in seconds until the opt-in layer will be automatically hidden. 0 or lower deactivates auto-hide.

60

Texts & Locale Object

The locale object must contain at least "localeId" and "version" along with the localized texts in the texts property. LocaleId and version will be stored with the consent cookie so we can keep track of which explicit text version consent was granted for. There are three options to pass a locale configuration into your application:

  • Store your locale object as 'locale' in the oil.js configuration (lowest priority)

<script id="oil-configuration" type="application/configuration">
{
  "locale": {
    "localeId": "enEN_01",
    "version": 1,
    "texts": {
      "label_intro_heading": "Insider, Inc."
    }
  }
}
</script>

  • Write your locale object directly to AS_OIL.CONFIG.LOCALE (middle priority)

<script>
(function () {
    if (!window.AS_OIL) {
      window.AS_OIL = {};
      window.AS_OIL.CONFIG = {}
    }
    window.AS_OIL.CONFIG.locale = {
      "localeId": "enEN_01",
      "version": 1,
      "texts": {
        "label_intro_heading": "Insider, Inc."
      }
    };
  }()
)
</script>

  • Return a JSON object from your server through locale_url configuration parameter (highest priority)

<script id="oil-configuration" type="application/configuration">
{
  "timeout": -1,
  "locale_url": "//www.yoursite.com/locale.json"
}
</script>

The recommended way is to keep the standard locale definitions.

Language label configuration

Even though OIL is supposed to come with legal texts that shouldn’t be altered, except the main heading, button labels and some additional texts, all labels can be overwritten, even the default ones, in the OIL configuration block. Language configuration goes in the texts object of the locale config parameter. The following table lists all label configuration parameters:

Config Parameter Description Example Value

label_intro_heading

The headline of the layer

We use cookies and other technologies

label_intro

The text of the layer

We’re using cookies, please confirm!

label_button_yes

The label of the consent button

Yes

label_button_back

The label of the back button in cookie preference center (CPC)

Back

label_button_advanced_settings

The text of the link to the cookie preference center

More information

label_cpc_heading

The headline of the cookie preference center

Cookie Preference Center

label_cpc_text

The intro text of the cookie preference center

Please select a setting:

label_cpc_activate_all

The label of the button that activates all purposes

Activate all

label_cpc_deactivate_all

The label of the button that deactivates all purposes

Deactivate all

label_cpc_purpose_desc

The headline of the purposes section (standard CPC) or its intro text (Tab-based CPC)

Purposes

label_cpc_purpose_xx_text

The name of purpose with id xx (e.g. 01). If undefined the name is taken from global vendor list or custom purpose definition.

Information storage an access

label_cpc_purpose_xx_desc

The description of purpose with id xx (e.g. 01). If undefined the description is taken from global vendor list or custom purpose definition.

The storage of information, or access to information that is already stored, on your device such as advertising identifiers, device identifiers, cookies, and similar technologies.

label_cpc_purpose_xx_features

A list of texts describing the features of purpose with id xx (e.g. 01). Only used in tab-based CPC. If undefined nothing is shown.

["Storage of information.", "Access to information"]

label_cpc_purpose_optout_confirm_heading

The headline of the opt-out confirmation dialog.

Are you really sure?

label_cpc_purpose_optout_confirm_text

The text of the opt-out confirmation dialog.

This setting will significantly affect your experience on our website.

label_cpc_purpose_optout_confirm_proceed

The confirmation button label of the opt-out confirmation dialog.

Continue

label_cpc_purpose_optout_confirm_cancel

The cancel button label of the opt-out confirmation dialog.

Cancel

label_nocookie_head

The headline that is shown if user has disallowed all cookies.

No Cookies allowed.

label_nocookie_text

The text that is shown if user has disallowed all cookies.

Please enable cookies!

label_poi_group_list_heading

Headline for POI group section

Company units

label_poi_group_list_text

Text for POI group section

Here is a list of company units

label_third_party

The headline of the vendors section in CPC

Third parties
Important
 If you want to reference the company or third party list from your custom text you need to add the links inline and set the right css classes. 
<a href="javascript:void(0)" class="as-oil__intro-txt--link as-js-companyList">CompanyListLink</a>
<a href="javascript:void(0)" class="as-oil__intro-txt--link as-js-thirdPartyList">ThirdPartys</a>

Example for complete texts object

{
  "label_intro_heading": "We use cookies and other technologies",
  "label_intro": "The website uses cookies, web beacons, JavaScript and similar technologies. I agree that <a href=\"javascript:void(0)\" class=\"as-oil__intro-txt--link as-js-companyList\">companies belonging to Axel Springer SE</a> and <a href=\"javascript:void(0)\" class=\"as-oil__intro-txt--link as-js-thirdPartyList\">trusted partners</a> generate pseudonymous user profiles for adapting the website to the user, for market research and for advertising. The generated data can also be shared with third parties while the user profiles cannot be combined with personal data. Detailed information, also on the right to withdraw consent, can be found in the website's privacy policy.",
  "label_button_yes": "OK",
  "label_button_back": "Back",
  "label_button_advanced_settings": "More information",
  "label_cpc_heading": "Please select a privacy setting:",
  "label_cpc_text": "cpc_text",
  "label_cpc_activate_all": "Activate all",
  "label_cpc_deactivate_all": "Deactivate all",
  "label_cpc_purpose_desc": "Purposes",
  "label_cpc_purpose_01_text": "Accessing a Device",
  "label_cpc_purpose_01_desc": "Allow storing or accessing information on a user’s device.",
  "label_cpc_purpose_01_features": ["Storage of Information", "Access to Information"],
  "label_cpc_purpose_02_text": "Advertising Personalisation",
  "label_cpc_purpose_02_desc": "Allow processing of a user’s data to provide and inform personalised advertising (including delivery, measurement, and reporting) based on a user’s preferences or interests known or inferred from data collected across multiple sites, apps, or devices; and/or accessing or storing information on devices for that purpose.",
  "label_cpc_purpose_03_text": "Analytics",
  "label_cpc_purpose_03_desc": "Allow processing of a user’s data to deliver content or advertisements and measure the delivery of such content or advertisements, extract insights and generate reports to understand service usage; and/or accessing or storing information on devices for that purpose.",
  "label_cpc_purpose_04_text": "Content Personalisation",
  "label_cpc_purpose_04_desc": "Allow processing of a user’s data to provide and inform personalised content (including delivery, measurement, and reporting) based on a user’s preferences or interests known or inferred from data collected across multiple sites, apps, or devices; and/or accessing or storing information on devices for that purpose.",
  "label_cpc_purpose_05_text": "Matching Data to Offline Sources",
  "label_cpc_purpose_05_desc": "Combining data from offline sources that were initially collected in other contexts",
  "label_cpc_purpose_06_text": "Linking Devices",
  "label_cpc_purpose_06_desc": "Allow processing of a user’s data to connect such user across multiple devices.",
  "label_cpc_purpose_07_text": "Precise Geographic Location data",
  "label_cpc_purpose_07_desc": "Allow processing of a user’s precise geographic location data in support of a purpose for which that certain third party has consent",
  "label_cpc_purpose_optout_confirm_heading": "Are you really sure?",
  "label_cpc_purpose_optout_confirm_text": "This setting will significantly affect your experience on our website.",
  "label_cpc_purpose_optout_confirm_proceed": "Continue",
  "label_cpc_purpose_optout_confirm_cancel": "Cancel",
  "label_nocookie_head": "In order to be able to provide our services in the best possible way, cookies must be activated in your browser.",
  "label_nocookie_text": "Please activate Cookies in the properties of your Browsers. So you can do it in <a href=\"https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en-GB\" class=\"as-oil__intro-txt--link\" target=\"_blank\">Google Chrome</a> or <a href=\"https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer\" class=\"as-oil__intro-txt--link\" target=\"_blank\">Firefox</a>."
  "label_poi_group_list_heading": "Your consent for companies of the group",
  "label_poi_group_list_text": "Here is a list of companies of the group:",
  "label_third_party": "Third Parties",
}

Labels starting with label_cpc_purpose_N are automatically derived from the vendor list if missing from your locale object.

Example Screenshot:

oil labels intro

Special CSS classes within labels

There are multiple special CSS classes, which will get click handlers attached. If any element has these classes, they will work as links to the different pages of the layer. Currently there are these special css classes:

  • as-js-optin: Will trigger an opt-in with SOI/POI depending on the current configuration.

  • as-js-optin-poi: Will trigger an opt-in as POI.

  • as-js-companyList: Will trigger the layer to show the company list.

  • as-js-thirdPartyList: Will trigger the layer to show the 3rd party list.

  • as-js-advanced-settings: Will trigger the layer to show the CPC (cookie preference center / advanced settings).

  • as-js-oilback: Will trigger the layer to go back to the first view.

For example adding the class as-js-companyList will add a click handler, which will show the company list (group list):

"label_intro": "I agree that <a href=\"javascript:void(0)\" class=\"as-oil__intro-txt--link as-js-companyList\">companies belonging to Group X</a> ...",

preview_mode

The preview mode is useful when testing OIL in a production or live environment. When in preview_mode, the consent layer remains hidden until you manually control its display using the following commands.

Run this in the console to show the OIL layer on your client:

window.AS_OIL.previewModeOn();

To delete the cookie, run:

window.AS_OIL.previewModeOff();

When preview_mode is not set in configuration and no consent cookie is found, the layer will show for the visitor.

Blacklisting and Whitelisting

With iabVendorWhitelist and iabVendorBlacklist you can exclude specific vendors from the consent (blacklist) or include only the ones you want (whitelist). You can only use one method at a time - either whitelist or blacklist.

As an example, the vendor list may contain vendors with vendor IDs 1 to 10. In the example the user accepts everything, he just pressed "OK". The consent-string would normally contain (by getVendorConsents) this data:

Default result from getVendorConsents without whitelist/blacklist
{
  "metadata": "consent-string",
  "purposeConsents": {
    "1": 1,
    "2": 1,
    "3": 1,
    "4": 1,
    "5": 1
  },
  "vendorConsents": {
    "1": true,
    "2": true,
    "3": true,
    "4": true,
    "5": true,
    "6": true,
    "7": true,
    "8": true,
    "9": true,
    "10": true
  }
}

Whitelist: The whitelist contains IDs 3, 4, 5 in form of the configuration with "iabVendorWhitelist": [3, 4, 5]. If the user has given his consent by clicking on "OK" only vendors on the whitelist will be true.

Result from getVendorConsents with whitelisting vendor IDs 3, 4, 5
{
  "metadata": "consent-string",
  "purposeConsents": {
    "1": 1,
    "2": 1,
    "3": 1,
    "4": 1,
    "5": 1
  },
  "vendorConsents": {
    "1": false,
    "2": false,
    "3": true,
    "4": true,
    "5": true,
    "6": false,
    "7": false,
    "8": false,
    "9": false,
    "10": false
  }
}

Blacklist: The blacklist contains IDs 6, 7, 8 in form of the configuration with "iabVendorBlacklist": [6, 7, 8]. If the user has given his consent by clicking on "OK" only vendors NOT on the blacklist will be true.

Result from getVendorConsents with blacklisting vendor IDs 6, 7, 8
{
  "metadata": "consent-string",
  "purposeConsents": {
    "1": 1,
    "2": 1,
    "3": 1,
    "4": 1,
    "5": 1
  },
  "vendorConsents": {
    "1": true,
    "2": true,
    "3": true,
    "4": true,
    "5": true,
    "6": false,
    "7": false,
    "8": false,
    "9": true,
    "10": true
  }
}

Auto-Hiding the layer (timeout)

If you do not interact with the Opt-In Layer, it will autohide after a fixed time. If you want to disable the feature, you need to edit the configuration and the set the value to 0 or -1. If you click on any navigation link in the Opt-In Layer the timeout will be canceled. The default timeout is:

const defaultTimeoutInSeconds = 60;

Custom vendors (non IAB vendors)

Custom vendors are vendors not supporting the IAB standard. OIL.js supports a list of custom vendors. For each custom vendor you have to specify an Opt-In and an Opt-Out JavaScript snippet. These snippets are evaluated when the user changes consent and on page load. You can add custom vendors via a file similar to the original vendor list (see https://vendorlist.consensu.org/vendorlist.json). You need to specify a unique custom vendor id and decide for the purposes required by the custom vendor on your own.

  • Please keep in mind that every change to the custom vendor list should result in an increase in the custom vendor list version.

  • Enable CORS for the custom vendor list, if you host it on a different domain, e.g. for usage with POI.

OIL configuration parameter to include a custom vendor list from a URL
{
  "customVendorListUrl": "https://yourdomain.com/customvendorlist.json"
}
Example for a custom vendor list
{
  "vendorListVersion": 123,
  "lastUpdated": "2018-11-27T01:25:33+01:00",
  "vendors": [
    {
      "id": 1,
      "name": "CUSTOM_VENDOR_1",
      "policyUrl": "https://www.emerse.com/privacy-policy/",
      "purposeIds": [
        1,
        2,
        4
      ],
      "legIntPurposeIds": [
        3,
        5
      ],
      "featureIds": [
        1,
        2
      ],
      "optInSnippet": "console.info('opt-in snippet for CUSTOM_VENDOR_1 executed!')",
      "optOutSnippet": "console.info('opt-out snippet for CUSTOM_VENDOR_1 executed!')"
    },
    {
      "id": 2,
      "name": "CUSTOM_VENDOR_2",
      "policyUrl": "https://www.emerse.com/privacy-policy/",
      "purposeIds": [
        1,
        2,
        3
      ],
      "legIntPurposeIds": [
        3,
        5
      ],
      "featureIds": [
        1,
        2
      ],
      "optInSnippet": "console.info('opt-in snippet for CUSTOM_VENDOR_2 executed!')",
      "optOutSnippet": "console.info('opt-out snippet for CUSTOM_VENDOR_2 executed!')"
    }
  ]
}

The IAB specification explains how a vendor should communicate with a CMP to gather consent information before running any data processing. That API is a set of JavaScript functions. You can find more at the official website http://advertisingconsent.eu/

The consent string is the central part of the IAB framework: it encodes all the consent information for the user, by purpose and by vendor.

JS-API

This API has to support the following functionality. All methods are strings and can be called over the window.__cmp function.

<script type="text/javascript">
__cmp('getVendorConsents', null, (result) => console.info(result));
</script>

getVendorConsents

Parameter: vendorIds (Uint16Array)

Callback signature: Callback( VendorConsents object, success: boolean)

The vendorIds array contains the vendor ids (as identified in the Global Vendor List) for which consent is being requested. If vendorIds is null or empty, the operation will return consent status for all vendors in the vendor list. The callback function will be called with a VendorConsents object as the parameter. If vendorIds is provided and not empty, then VendorConsents.vendorConsents will only included IDs from vendorIds, The callback is called only after consent is obtained from the UI or existing cookies. The consent will be returned false ("No Consent") for any invalid vendorId. The boolean success parameter passed to the callback indicates whether the call to getVendorConsents() was successful.

getConsentData

Parameter: consentStringVersion (string)

Callback signature: Callback(VendorConsentData object, success: boolean)

If consentStringVersion is provided, then fetch that version if available (else returns null). If consentStringVersion is null, then the latest supported version of the consent string is returned. The callback is called only after consent is obtained from the UI or existing cookies. The boolean success parameter passed to the callback indicates whether the call to getConsentData() was successful.

ping

Callback signature: Callback(PingReturn object, success: boolean)

The "ping" command invokes the callback immediately with information about whether the main CMP script has loaded yet and if GDPR has been configured for all users or just EU users. (This requires this command’s implementation and this configuration to be in the stub).

Optional call: getPublisherConsents

Parameter: purposeIds: Uint16Array

Callback signature: Callback( PublisherConsents object, success: boolean)

The purposeIds lists the purpose ids the publisher is requesting consent for. If this array is null or empty, it will default to all configured purposes. PurposeId’s 1-24 indicate standard purposes, while 25-88 indicate custom (publisher-configured) purposes. The callback function will be called with a PublisherConsents object as the parameter. The purpose ids would be set by the publisher using a CMP-defined initialization function. The callback is called only after consent is obtained from the UI or existing cookies. The boolean success parameter passed to the callback indicates whether the call to getPublisherConsents() was successful.

Optional call: getVendorList

Parameter: vendorListVersion (scalar)

Callback signature: Callback(GlobalVendorList object, success:boolean)

The callback function will be called with the GlobalVendorList parameter being the vendor list object of the requested version. If the vendorListVersion is null, the vendor list for the VendorListVersion in the current consent string is returned. If no consent string value is currently set, the latest version of the vendor list is returned. If the vendorListVersion value is ?LATEST?, the latest version available is returned. If the vendorListVersion is invalid, the callback function will be called with 'null' as the first argument and false as the success argument. The boolean success parameter passed to the callback indicates whether the call to getVendorList() was successful.

OIL API

In addition to the configuration the host site can communicate with the OIL layer using its API. OIL, in its default state, never emits console errors. To get a full log and all errors you can enable the verbose mode. For test deployments and A/B testing OIL supports a preview mode.

Test Deployment and Preview Mode

The preview mode is useful for testing OIL in a live environment without making it available to your end-users.

The preview mode is turned off by default, meaning OIL will be available to all your users. If you turn the preview mode on (please see configuration section), OIL won’t be shown at first, but can be enabled for your current session on the browser’s console:

window.AS_OIL.previewModeOn();
window.AS_OIL.previewModeOff();

When preview mode is turned on some debug information will be seen on the browser console. See also "Verbose Logging" below for more detailed logging.

OIL Verbose Logging

OIL will show no logs, except in preview mode or verbose mode.

Run the following commands on the console of your browser to switch verbose logging on and off:

window.AS_OIL.verboseModeOn();
window.AS_OIL.verboseModeOff();

Debug mode can be turned on at any time, whereas the similar preview mode can only be enabled in the configuration, please see above.

Please note that verbose logging can only be activated for your own browser, all other users won’t see those logs.

OIL JS-Calls

API Call Description

window.AS_OIL.triggerOptIn();

The user will opted in. It’s the same behaviour as when the user is clicking Accept on the layer.

window.AS_OIL.triggerOptOut();

OIL will remove all cookies if triggered and therefore opt-out the user of everything, even POI.

window.AS_OIL.reload();

OIL will reload the configuration from the host’s website.

window.AS_OIL.showPreferenceCenter();

OIL will inject the Cookie Preference Center into your website. Please see "OIL CPC API" section.

window.AS_OIL.applyGDPR();

Sets gdprApplies variable to true and displays the layer if user hasn’t opted-in. Useful in case you need to show the layer to a user from inside the EU and you’re not a EU publisher.

OIL Events

OIL is currently emitting the following events:

Event name Description

oil_optin_done

When a users selects opt-in.

oil_optin_done_button_clicked

When a users clicks the opt-in button.

oil_soi_optin_done

When a users selects opt-in and this is a single opt-in.

oil_poi_optin_done

When a users selects opt-in and this is a power opt-in.

oil_as_cpc_privacy_selected

When a user used the cpc and clicked opt-in.

oil_click_advanced_settings

When a users clicks the advanced settings button/link.

oil_click_back_to_main

When a user clicks the back link from the advanced settings page.

oil_no_cookies_allowed

When a users has no cookies allowed and the no cookies layer is displayed

oil_has_optedin

On every page reload, when the user has opted_in previously (OIL should be hidden)

oil_shown

When oil is shown

oil_hide_layer

When oil gets automatically hidden

oil_click_thirdparty_list

When a user clicks the third party list link

oil_click_company_list

When a user clicks the company list link

To be informed about these events or to perform some activity everytime one of these events is fired you can register an event handler with a callback to be executed. Here is an example how to do this:

  <script type="text/javascript">
    // Cross browser event handler definition
    var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
    var messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
    var eventer = window[eventMethod];

    // Callback to be executed when event is fired
    function receiveMessage(event) {
      function eventDataContains(str) {
        return JSON.stringify(event.data).indexOf(str) !== -1;
      }
      if (event && event.data && (eventDataContains('oil_optin_done') || eventDataContains('oil_has_optedin'))) {
        // Do something when event is fired...
        console.log("Do something when event is fired...");
      }
    }

    // Register event handler
    eventer(messageEvent, receiveMessage, false);
  </script>

OIL CPC API

You can add an integrated version of the OIL Cookie Preference Center to your page to give the user the chance to reverse his initial selection (or even Opt-Out).

For this include a div with the id below in your page:

<div id="oil-preference-center"></div>

To insert the OIL CPC in the prepared div, which you included in your page, execute this javascript snippet:

window.AS_OIL.showPreferenceCenter();

For the action element to save the current setting there is an API endpoint:

window.oilTriggerOptin();

The inserted CPC will show the users current setting when inserted. Make sure OIL is part of the page first to make this work.

CPC API definition:

Function Name Description

window.AS_OIL.showPreferenceCenter()

inserts the CPC into the predefined div with the id #oil-preference-center into the host site

window.AS_OIL.triggerOptIn()

will trigger the generic opt-in (can also result in an opt-out)

Soft Blocking of DOM Elements

With OIL you can manage third-party scripts to ensure that they only run if the user has given consent to their use. For example, this is useful for scripts provided by vendors that do not implement the IAB JavaScript API yet. Furthermore, OIL can manage other elements with a src or an href attribute the same way.

Managing <script> Elements

To manage <script> tags you have to add a data-managed attribute with the value as-oil. To avoid automatic execution of the <script> tag as long as it should be deactivated change the type attribute to opt-in and add a data-type attribute with the original type. In case of tag activation OIL replaces the type attribute with this original type. With an additional data-purposes attribute you can specify a comma-separated list of purpose ids the user has to consent with to activate the tag. If data-purposes attribute is omitted all defined purposes are necessary for tag activation.

Here is an example for a managed <script> tag:

<script data-managed="as-oil"
        data-type="text/javascript"
        data-purposes="1,2,4"
        type="as-oil"
        id="managedScriptTag">
  document.getElementById("demoText").innerHTML = "This text will be shown with given consent!";
</script>

OIL can manage <script> tags that load a script from an URL as well. Simply replace the src attribute with data-src as shown below:

<script data-managed="as-oil"
        data-type="text/javascript"
        data-src="oilDemoScript.js"
        data-purposes="1,2,4"
        type="as-oil"
        id="managedScriptTag">
</script>

Attributes class, id, defer, async and charset and further data- attributes can be used. They are not changed by OIL.

Managing Other Elements

To manage elements with a src or href attribute add a data-managed attribute with the value as-oil and replace the src attribute with data-src or the href attribute with data-href. With the optional data-title attribute a title can be defined - use it instead of title attribute. With a data-purposes attribute you can specify a comma-separated list of purpose ids the user has to consent with to activate the tag. If data-purposes attribute is omitted all defined purposes are necessary for tag activation. All other attributes are not changed by OIL - with one exception. To ensure that managed elements are not visible as long as they should be deactivated OIL sets the CSS display property to none. To provide a value for this property that is used when the tag is activated add a corresponding data-display attribute. OIL sets its value into the CSS display property when it activates the tag. Other CSS properties can be specified by a style attribute or in a CSS section or file.

Here is an example for a managed <img> tag:

<img data-managed="as-oil"
         data-src="simpleImage.png"
         data-title="Simple Image"
         data-display="block"
         data-purposes="1,2,4"
         alt="A simple image"
         height="50"
         width="50"
         id="imgId"
         class="imgClass"
         style="border: 1px solid #ddd; border-radius: 20px;">

Tracking and Google Analytics Events

If you want to use Google Analytics with OIL you can use OIL Events (see above) and proxy them to your specific GA installation.

This is an example script to subscribe to the event 'oil_optin_done' and forward it to Google Analytics. You might need to tweak it to your environment and needs.

// Multibrowser Support
var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
var messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
var eventer = window[eventMethod];

function receiveOptInMessage(event) {
  function eventDataContains(str) {
    return JSON.stringify(event.data).indexOf(str) !== -1;
  }
  if (window.ga && window.ga.loaded && event && event.data && eventDataContains('oil_optin_done')) { // event name
    var nonInteraction = true; // should be set to false for non-click events
    window.ga('send', 'event', 'OIL', 'oil_optin_done', {'nonInteraction': nonInteraction});
  }
}

eventer(messageEvent, receiveOptInMessage, false);

You can also use the global event queue to process events that have been fired before you declared the event listeners. Therefore all events are stored in the global window.AS_OIL.eventCollection array. Every entry is an object including the event name and the timestamp when it has been fired.

if (window.AS_OIL.eventCollection && window.AS_OIL.eventCollection.length) {
    window.AS_OIL.eventCollection.forEach(function(item){
        // console.log(item.name);
        // console.log(item.timestamp);
        // use your tracking code to process every event that has been fired so far
        // example: Adobe tag manager
        _satellite.track(item.name)
    });
}

// event listener code, see above

AMP Support

To exchange user consent for your POI group with an AMP page, you want to make use of the iframe capability of the AMP consent component.

Technical integration

  1. Copy the file demos/amp-consent-iframe.html and update it with your own oil-configuration. (You can adapt configuration for your needs. Please do not change settings for info_banner_only and suppress_cookies.)

  2. Upload the file to the server where the POI cookie should be stored. This should be the same one that you have configured in the poi_hub_origin configuration parameter. Make sure the file is accessible through a secure (SSL) connection.

  3. Include the path to the iframe within your amp-consent dialog. Ex.:

      <amp-iframe layout="fill"
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    src="https://your-hub-origin.tld/amp-consent-iframe.html">
    <div placeholder>Loading</div>
  </amp-iframe>

  4. Add a consent href json file to your origin server with below body. Name it however you like, in our example we’ll be using show-consent.json.

      {
    "promptIfUnknown": true
  }

    Ensure that your origin server sets the CORS headers when it delivers this file:

      Access-Control-Allow-Origin: https://<your-hub-origin.tld>.cdn.ampproject.org
  Access-Control-Allow-Credentials: true

    For the <your-hub-origin.tld> please use your domain with hyphens instead of dots (for example: oil-axelspringer-com instead of oil.axelspringer.com). Please consult your origin server’s documentation for help how to set CORS headers.

  5. Update the parameter "checkConsentHref" in your amp-consent json configuration:

      "checkConsentHref": "https://your-hub-origin.tld/show-consent.json"

  6. You’re done!

Now everytime a user visits your AMP page and consent is not yet determined, the iframe with your Oil layer is shown and the cookie is stored hub-wide for the device+browser the user is visiting from.

For an example amp integration see the file demos/amp-consent.html.

OIL and Tealium

The Opt-In Layer can be integrated with your page using Tealium.

Note
 Integration of OIL with Tealium requires a Tealium profile for your page. This documentation focuses on the integration steps. Please read the Tealium documentation to find out how to get and set up an own Tealium profile.

Setting up OIL with Tealium consists of the following steps:

In addition to its own integration, OIL also provides support for (vendor) tag management with Tealium.

Add Opt-In Layer to Tealium

Instead of integrating the Opt-In Layer directly into your page you can have it delivered by Tealium. To work correctly, the Opt-In Layer needs two components to be delivered by Tealium:

  • the stub and

  • the layer itself.

Both of them have to be added as extensions to your Tealium profile (in section "Extensions"). At first, we add the stub with the following settings:

Title:     OIL Stub
Scope:     All Tags
Execution: Run Once before Load Rules

In fact, the title can be defined freely. In the "Configuration" section you have to write the code of the OIL layer. Unfortunately, this is possible by a copy/paste action only. Download the file oilstub.1.3.5-RELEASE.min.js from https://oil.axelspringer.com/release and paste its content completely into the text area in the "Configuration" section.

Now create another extension 'OIL Layer' with the content of the file oil.1.3.5-RELEASE.min.js. Make sure that both extensions are activated. Now save and publish your changes.

Note
 The order of extensions in the list is the order they are loaded by the page. Therefore, please ensure that the stub extension is located above the layer extension in the list.

Now that you have ensured that the Opt-In Layer is delivered by Tealium you need to integrate Tealium in your page. Here is a very simple example of such an integration (for more details to the use of Tealium in your page please consult the Tealium documentation):

<script type="text/javascript">
  (function (a, b, c, d) {
    a = '//tags.tiqcdn.com/utag/&lt;path-to-your-tealium-profile&gt;/prod/utag.js';
    b = document;
    c = 'script';
    d = b.createElement(c);
    d.src = a;
    d.type = 'text/java' + c;
    d.async = true;
    a = b.getElementsByTagName(c)[0];
    a.parentNode.insertBefore(d, a);
  })();
</script>

That’s it.

Add OIL configuration to Tealium

As described in section Configuring OIL the Opt-In Layer has a wide range of configuration settings that affects its appearance and function. This configuration can also be delivered by Tealium.

Go to your Tealium profile (section "Extensions") and create an extension with the following settings:

Title:     OIL Configuration
Scope:     All Tags
Execution: Run Once before Load Rules

Again, the title can be defined freely. The "Configuration" section of the new extension should contain the following code:

var config = {
  // your configuration comes here
};

// Do not change the code behind this line!
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');

script.id = 'oil-configuration';
script.type = 'application/configuration';
script.text = JSON.stringify(config);

head.appendChild(script);

The variable config should contain your configuration that is to be delivered.

Note
 The order of extensions in the list is the order they are loaded by the page. Therefore, please ensure that the OIL configuration extension is located above the Opt-In Layer code extension in the list.

Vendor Tag Management with OIL and Tealium

Tealium is a tag manager that enables you to integrate tags in your page or website respectively depending on several conditions. For vendor tags, such a condition is a consent that the user gives to a purpose. Consents, in turn, are managed by the Opt-In Layer. To support tag integration depending on given consents OIL uses special variables that it defines in the Tealium data layer - one for each purpose:

_dip_oil_purpose_01
_dip_oil_purpose_02
_dip_oil_purpose_03
_dip_oil_purpose_04
_dip_oil_purpose_05

Each variable can be true or false - true if user gave consent to the corresponding standard purpose with the id referenced in the variable’s name.

Additionally, a variable named

_dip_oil_purpose_all

is used that is true if user gave consent to all standard purposes.

Note
 Currently, custom purposes are not supported.

To establish connection between the Opt-In Layer and your Tealium profile, you have to ensure, that these variables are defined in your profile. Go to section "Data Layer" and define each of the variables mentioned above as shown in this example:

Source: _dip_oil_purpose_01
Type:   UDO Variable

To be able to activate or deactivate (vendor) tags, Tealium uses so-called loading rules. To connect tag activation and Tealium variables set by the Opt-In Layer, you should define such rules - one for each variable as shown in the following examples:

Title:      _dip_oil_purpose_all
Conditions: IF js._dip_oil_purpose_all EQUALS 1
Title:      _dip_oil_purpose_01
Conditions: IF js._dip_oil_purpose_all EQUALS 1 OR js._dip_oil_purpose_01 EQUALS 1

That’s all. Now you can combine your tags managed by Tealium with these loading rules (see Tealium documentation to learn how to do that). If a user gives consent to a purpose or revokes it, OIL sets corresponding data layer variable to true or false respectively and causes Tealium to re-evaluate it. This activates corresponding loading rule and the tag combined with it is activated or deactivated.

Customisation

Supported A/B Testing with us

If you want to optimize and test your OIL installation with our Kameleoon A/B testing, you also need to include the right kameleoon script into your website, which will alter the optics and behaviour of OIL according to the test and your specific environment.

An example link would look like:

<script type="text/javascript" src="//static-bp.kameleoon.com/css/customers/xxxxxxxxxxx/0/kameleoon.js"></script>

Instead of xxxxxxxxxxx the right hash needs to be present, so Kameleoon knows which website it deals with. When we setup OIL A/B testing on your page this hash needs to be generated within Kameleoon.

Your own A/B Testing

For setting up A/B testing in your own environment, the following information could come handy.

Enabling OIL for a specific variant only

For testing you can also use the preview mode to disable OIL by default and enable it in certain variants.

Add the following standard configuration to your website, which will disable OIL by default:

<script id="oil-configuration" type="application/configuration">
  {
    "preview_mode": true,
  }
</script>

For enabling it in a variant you need to replace the configuration and trigger OIL to reload it. As part of your variant insert a customized version of this script:

<script type="text/javascript">
    (function () {
        var config = {
            "preview_mode": false,
            "label_intro_heading": "Please confirm!",
            "label_button_yes": "Of course"
        };
        var oldScript = document.getElementById('oil-configuration');
        if (oldScript) {
            oldScript.parentNode.removeChild(oldScript);
        }

        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');

        script.id = 'oil-configuration';
        script.type = 'application/configuration';
        script.text = JSON.stringify(config);

        head.appendChild(script);
        window.AS_OIL.reload();
    }());
</script>

OIL is supposed to come with legal texts that shouldn’t be altered, except the main heading, button labels and some additional texts. Nevertheless, all labels can be overwritten, even the default ones, in the OIL configuration block (see chapter Language label configuration).

Styling guide

There are 5 different views you can style:

You can style the layer with additional CSS. All OIL styles use the CSS classes directly, this means the lowest possible CSS specificity. Here are two examples. The first one is for changing the font and the color. The second is for changing the background color and the shadow.

div.as-oil {
  font-family: Arial;
  color: #bada55;
}
div.as-oil-content-overlay {
  background-color: #ff00ff;
  box-shadow: 0 -8px 20px 0 rgba(0, 0, 0, 0.2);
}

The following sections show the current raw html snippets used for the opt-in layer. You can use these as reference for which classes were used. In section Styling Examples you can find design examples for the opt-in layer with corresponding customized configuration and CSS styles.

Opt-In layer

Default View 
<div class="as-oil light" data-qa="oil-Layer">
  <div class="as-oil-content-overlay" data-qa="oil-full">
    <div class="as-oil-l-wrapper-layout-max-width">
      <div class="as-oil__heading">label_intro_heading</div>
      <p class="as-oil__intro-txt">label_intro</p>
      <div class="as-oil-l-row as-oil-l-buttons">
        <div class="as-oil-l-item">
          <button class="as-oil__btn-optin as-js-optin" data-context="YES" data-qa="oil-YesButton">label_button_yes
          </button>
        </div>
        <div class="as-oil-l-item as-oil-l-item--stretch"></div>
      </div>
    </div>
  </div>
</div>
No Cookies 
<div class="as-oil light" data-qa="oil-Layer">
  <div class="as-oil-content-overlay oil-nocookies" data-qa="oil-nocookies">
    <div class="as-oil-l-wrapper-layout-max-width">
      <div class="as-oil__heading">
        label_nocookie_head
      </div>
      <p class="as-oil__intro-txt">
        label_nocookie_text
      </p>
    </div>
  </div>
</div>

POI group list

Group list 
<div class="as-oil-fixed">
  <div class="as-oil-content-overlay as-oil-poi-group-list-wrapper" data-qa="oil-poi-list">
    <div class="as-oil-l-wrapper-layout-max-width">
      <div class="as-oil__heading">
        label_poi_group_list_heading
      </div>
      <p class="as-oil__intro-txt">
        label_poi_group_list_text
      </p>
      <div class="as-oil-poi-group-list">
        <div class="as-oil-poi-group-list-element">a</div>
        <div class="as-oil-poi-group-list-element">b</div>
      </div>
      <button class="as-oil-back-button as-js-oilback" data-context="BACK" data-qa="oil-back-button">
        <span class="as-oil-back-button__text">label_button_back</span>
        <svg class="as-oil-back-button__icon" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fill-rule="evenodd">
            <circle fill="#757575" cx="11" cy="11" r="11" />
            <path d="M15.592 14.217a.334.334 0 0 1 .098.245c0 .098-.033.18-.098.246l-.928.908a.303.303 0 0 1-.22.098.33.33 0 0 1-.244-.098L11 12.4l-3.2 3.216a.303.303 0 0 1-.22.098.33.33 0 0 1-.244-.098l-.928-.908a.334.334 0 0 1-.098-.246c0-.098.033-.18.098-.245L9.632 11 6.408 7.808c-.163-.164-.163-.327 0-.491l.904-.933a.473.473 0 0 1 .244-.098.33.33 0 0 1 .244.098L11 9.576l3.2-3.192a.473.473 0 0 1 .244-.098.33.33 0 0 1 .244.098l.904.933c.163.164.163.32 0 .466l-3.224 3.192 3.224 3.242z"
                  fill="#FFF" opacity=".88" />
          </g>
        </svg>
      </button>
    </div>
    <div class="as-oil-l-row as-oil-l-buttons-light">
      <div class="as-oil-l-item">
        <button class="as-oil__btn-optin as-js-optin" data-context="YES" data-qa="oil-YesButton">
          label_button_yes
        </button>
      </div>
    </div>
  </div>
</div>

Third party list

Third party list 
<div class="as-oil light" data-qa="oil-Layer">
  <div class="as-oil-fixed">
    <div class="as-oil-content-overlay as-oil-poi-group-list-wrapper" data-qa="oil-poi-list">
      <div class="as-oil-l-wrapper-layout-max-width">
        <div class="as-oil__heading">
          Your consent for third party software
        </div>
        <p class="as-oil__intro-txt">
          label_thirdparty_list_text
        </p>
        <div class="as-oil-poi-group-list">
          <div class="as-oil-third-party-list-element">
                <span onclick="AS_OIL._toggleViewElements(this)">
                    <svg class="as-oil-icon-plus" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.675 4.328H10v1.344H5.675V10h-1.35V5.672H0V4.328h4.325V0h1.35z" fill="#0068FF" fill-rule="evenodd" fill-opacity=".88"></path>
                    </svg>
                    <svg class="as-oil-icon-minus" style="display: none;" width="10" height="5" viewBox="0 0 10 5" xmlns="http://www.w3.org/2000/svg">
                      <path d="M0 0h10v1.5H0z" fill="#3B7BE2" fill-rule="evenodd" opacity=".88"></path>
                    </svg>
                    <span class="as-oil-third-party-name">Exponential Interactive, Inc</span>
                </span>
            <div class="as-oil-third-party-toggle-part" style="display: none;">
              <p class="as-oil-third-party-description">undefined</p>
              <div class="as-oil-third-party-link">undefined</div>
            </div>
          </div>
        </div>
        <button class="as-oil-back-button as-js-oilback" data-context="BACK" data-qa="oil-back-button">
          <span class="as-oil-back-button__text">Back</span>
          <svg class="as-oil-back-button__icon" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
              <circle fill="#757575" cx="11" cy="11" r="11"></circle>
              <path d="M15.592 14.217a.334.334 0 0 1 .098.245c0 .098-.033.18-.098.246l-.928.908a.303.303 0 0 1-.22.098.33.33 0 0 1-.244-.098L11 12.4l-3.2 3.216a.303.303 0 0 1-.22.098.33.33 0 0 1-.244-.098l-.928-.908a.334.334 0 0 1-.098-.246c0-.098.033-.18.098-.245L9.632 11 6.408 7.808c-.163-.164-.163-.327 0-.491l.904-.933a.473.473 0 0 1 .244-.098.33.33 0 0 1 .244.098L11 9.576l3.2-3.192a.473.473 0 0 1 .244-.098.33.33 0 0 1 .244.098l.904.933c.163.164.163.32 0 .466l-3.224 3.192 3.224 3.242z" fill="#FFF" opacity=".88"></path>
            </g>
          </svg>
        </button>
      </div>
      <div class="as-oil-l-row as-oil-l-buttons-light">
        <div class="as-oil-l-item">
          <button class="as-oil__btn-optin as-js-optin" data-context="YES" data-qa="oil-YesButton">
            OK
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Currently, there are two types of the Cookie Preference Center you can choose from: Standard and Tabs-based CPC. Use the configuration parameter cpc_type to activate the preferred type.

Standard CPC
CPC 
<div class="as-oil light" data-qa="oil-Layer">
  <div id="as-oil-cpc" class="as-oil-content-overlay" data-qa="oil-cpc-overlay">
    <div class="as-oil-l-wrapper-layout-max-width as-oil-cpc-wrapper">
      <div class="as-oil__heading">
        label_cpc_heading
      </div>
      <p class="as-oil__intro-txt">
        label_cpc_text
      </p>
      <div class="as-oil-cpc__row-btn-all">
        <span class="as-js-btn-deactivate-all as-oil__btn-grey">label_cpc_deactivate_all</span>
        <span class="as-js-btn-activate-all as-oil__btn-blue">label_cpc_activate_all</span>
      </div>
      <button class="as-oil-back-button as-js-oilback" data-context="BACK" data-qa="oil-back-button">
        <span class="as-oil-back-button__text">
                  label_button_back
                </span>
        <svg class="as-oil-back-button__icon" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fill-rule="evenodd">
            <circle fill="#757575" cx="11" cy="11" r="11"></circle>
            <path d="M15.592 14.217a.334.334 0 0 1 .098.245c0 .098-.033.18-.098.246l-.928.908a.303.303 0 0 1-.22.098.33.33 0 0 1-.244-.098L11 12.4l-3.2 3.216a.303.303 0 0 1-.22.098.33.33 0 0 1-.244-.098l-.928-.908a.334.334 0 0 1-.098-.246c0-.098.033-.18.098-.245L9.632 11 6.408 7.808c-.163-.164-.163-.327 0-.491l.904-.933a.473.473 0 0 1 .244-.098.33.33 0 0 1 .244.098L11 9.576l3.2-3.192a.473.473 0 0 1 .244-.098.33.33 0 0 1 .244.098l.904.933c.163.164.163.32 0 .466l-3.224 3.192 3.224 3.242z"
                  fill="#FFF" opacity=".88"></path>
          </g>
        </svg>
      </button>
      <div data-qa="cpc-snippet" class="as-oil-l-row as-oil-cpc__content">
        <div class="as-oil-cpc__left">
          <a href="#as-oil-cpc-purposes" onclick="AS_OIL._switchLeftMenuClass(this)" class="as-oil-cpc__category-link as-oil-cpc__category-link--active">
            label_cpc_purpose_desc
          </a>
          <a href="#as-oil-cpc-third-parties" onclick="AS_OIL._switchLeftMenuClass(this)" class="as-oil-cpc__category-link">
            label_third_party
          </a>
        </div>
        <div class="as-oil-cpc__middle as-js-purposes">
          <div class="as-oil-cpc__row-title" id="as-oil-cpc-purposes">
            label_cpc_purpose_desc
          </div>
          <div class="as-oil-cpc__purpose">
            <div class="as-oil-cpc__purpose-container">
              <div class="as-oil-cpc__purpose-header">Purpose 1</div>
              <div class="as-oil-cpc__purpose-text">label_cpc_purpose_01_desc</div>
              <label class="as-oil-cpc__switch">
                <input data-id="1" id="as-js-purpose-slider-1" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-1" value="false">
                <span class="as-oil-cpc__status"></span>
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
          </div>
          <div class="as-oil-cpc__purpose">
            <div class="as-oil-cpc__purpose-container">
              <div class="as-oil-cpc__purpose-header">Purpose 2</div>
              <div class="as-oil-cpc__purpose-text">label_cpc_purpose_02_desc</div>
              <label class="as-oil-cpc__switch">
                <input data-id="2" id="as-js-purpose-slider-2" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-2" value="false">
                <span class="as-oil-cpc__status"></span>
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
          </div>
          <div class="as-oil-cpc__purpose">
            <div class="as-oil-cpc__purpose-container">
              <div class="as-oil-cpc__purpose-header">Purpose 3</div>
              <div class="as-oil-cpc__purpose-text">label_cpc_purpose_03_desc</div>
              <label class="as-oil-cpc__switch">
                <input data-id="3" id="as-js-purpose-slider-3" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-3" value="false">
                <span class="as-oil-cpc__status"></span>
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
          </div>
          <div class="as-oil-cpc__purpose">
            <div class="as-oil-cpc__purpose-container">
              <div class="as-oil-cpc__purpose-header">Purpose 4</div>
              <div class="as-oil-cpc__purpose-text">label_cpc_purpose_04_desc</div>
              <label class="as-oil-cpc__switch">
                <input data-id="4" id="as-js-purpose-slider-4" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-4" value="false">
                <span class="as-oil-cpc__status"></span>
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
          </div>
          <div class="as-oil-cpc__purpose">
            <div class="as-oil-cpc__purpose-container">
              <div class="as-oil-cpc__purpose-header">Purpose 5</div>
              <div class="as-oil-cpc__purpose-text">label_cpc_purpose_05_desc</div>
              <label class="as-oil-cpc__switch">
                <input data-id="5" id="as-js-purpose-slider-5" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-5" value="false">
                <span class="as-oil-cpc__status"></span>
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
          </div>
          <div class="as-oil-cpc__row-title" id="as-oil-cpc-third-parties">
            label_third_party
          </div>
          <div id="as-js-third-parties-list">
            <div class="as-oil-poi-group-list">
              <div class="as-oil-third-party-list-element">
                <span onclick="AS_OIL._toggleViewElements(this)">
                  <svg class="as-oil-icon-plus" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.675 4.328H10v1.344H5.675V10h-1.35V5.672H0V4.328h4.325V0h1.35z" fill="#0068FF" fill-rule="evenodd" fill-opacity=".88"></path>
                  </svg>
                  <svg class="as-oil-icon-minus" style="display: none;" width="10" height="5" viewBox="0 0 10 5" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0h10v1.5H0z" fill="#3B7BE2" fill-rule="evenodd" opacity=".88"></path>
                  </svg>
                  <span class="as-oil-third-party-name">Emerse Sverige AB</span>
                </span>
                <div class="as-oil-third-party-toggle-part" style="display: none;">
                  <a class="as-oil-third-party-link" href="https://www.emerse.com/privacy-policy/">https://www.emerse.com/privacy-policy/</a>
                </div>
              </div>
              <div class="as-oil-third-party-list-element">
                <span onclick="AS_OIL._toggleViewElements(this)">
                  <svg class="as-oil-icon-plus" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.675 4.328H10v1.344H5.675V10h-1.35V5.672H0V4.328h4.325V0h1.35z" fill="#0068FF" fill-rule="evenodd" fill-opacity=".88"></path>
                  </svg>
                  <svg class="as-oil-icon-minus" style="display: none;" width="10" height="5" viewBox="0 0 10 5" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0h10v1.5H0z" fill="#3B7BE2" fill-rule="evenodd" opacity=".88"></path>
                  </svg>
                  <span class="as-oil-third-party-name">BeeswaxIO Corporation</span>
                </span>
                <div class="as-oil-third-party-toggle-part" style="display: none;">
                  <a class="as-oil-third-party-link" href="https://www.beeswax.com/privacy.html">https://www.beeswax.com/privacy.html</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="as-oil-cpc__right">
          <div class="as-oil-l-row as-oil-l-buttons-light">
            <div class="as-oil-l-item">
              <button class="as-oil__btn-optin as-js-optin" data-context="YES" data-qa="oil-YesButton">
                label_button_yes
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Tab-based CPC
CPC 
<div class="as-oil light" data-qa="oil-Layer">
  <div id="as-oil-cpc" class="as-oil-content-overlay" data-qa="oil-cpc-overlay">

    <div class="as-oil-l-wrapper-layout-max-width as-oil-tabs-cpc__wrapper">
      <div class="as-oil-tabs-cpc__headline as-oil-center">
        Es ist uns sehr wichtig, Ihre Daten zu schützen.
      </div>
      <p class="as-oil-center as-oil-margin-top">
        Ihr Vertrauen in unserem Umgang mit den Information, die Sie uns überlassen, wollen wir nicht enttäuschen.
        <br>Hier können Sie Ihre Datenschutzeinstellungen einsehen und anpassen sowie sich umfassend über die Verwendung Ihrer Daten informieren.
      </p>
      <hr>

      <button class="as-oil-back-button as-js-oilback" data-context="BACK" data-qa="oil-back-button">
      <span class="as-oil-back-button__text">
        Zurück
      </span>
        <svg class="as-oil-back-button__icon" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fill-rule="evenodd">
            <circle fill="#757575" cx="11" cy="11" r="11"></circle>
            <path d="M15.592 14.217a.334.334 0 0 1 .098.245c0 .098-.033.18-.098.246l-.928.908a.303.303 0 0 1-.22.098.33.33 0 0 1-.244-.098L11 12.4l-3.2 3.216a.303.303 0 0 1-.22.098.33.33 0 0 1-.244-.098l-.928-.908a.334.334 0 0 1-.098-.246c0-.098.033-.18.098-.245L9.632 11 6.408 7.808c-.163-.164-.163-.327 0-.491l.904-.933a.473.473 0 0 1 .244-.098.33.33 0 0 1 .244.098L11 9.576l3.2-3.192a.473.473 0 0 1 .244-.098.33.33 0 0 1 .244.098l.904.933c.163.164.163.32 0 .466l-3.224 3.192 3.224 3.242z" fill="#FFF" opacity=".88"></path>
          </g>
        </svg>
      </button>

      <div class="as-oil-tabs-cpc__purpose-description as-oil-center as-oil-margin-top" id="as-oil-cpc-purposes">
        Für ein optimales Produkterlebnis speichern wir Informationen über Ihre Verwendung unserer Produkte in Form von Cookies
      </div>
      <div class="as-oil-cpc__middle">

        <div class="as-oil-tabs-cpc__purpose-labels as-oil-margin-top">
          <span data-id="1" class="as-js-tab-label as-oil-tabs-cpc__purpose-label-active">Informationen</span>
          <span data-id="2" class="as-js-tab-label as-oil-tabs-cpc__purpose-label-inactive">Personalisierung</span>
          <span data-id="3" class="as-js-tab-label as-oil-tabs-cpc__purpose-label-inactive">Werbeanzeigen</span>
          <span data-id="4" class="as-js-tab-label as-oil-tabs-cpc__purpose-label-inactive">Inhalte</span>
          <span data-id="5" class="as-js-tab-label as-oil-tabs-cpc__purpose-label-inactive">Bewertung</span>
        </div>
        <div class="as-oil-tabs-cpc__purpose-text as-oil-margin-top">

          <section id="as-js-tab-section-1" class="as-oil-margin-top as-js-tab-section">
            <div>
              <p>Die Speicherung von Informationen oder der Zugriff auf Informationen, die bereits auf Ihrem Gerät gespeichert sind, wie beispielsweise Werbekennungen, Gerätekennungen, Cookies und ähnliche Technologien.</p>
              <label class="as-oil-tabs-cpc__switch">
                <input data-id="1" id="as-js-purpose-slider-1" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-1" value="false" data-com.agilebits.onepassword.user-edited="yes">
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
            <div class="as-oil-tabs-cpc__purpose-feature-texts as-oil-margin-top" id="purpose-feature-texts-1">
              <ul>
                <li>
                  <span class="checkmark checkmark-on"></span><span><b>Speicherung von Informationen:</b> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</span>
                </li>
                <li>
                  <span class="checkmark checkmark-on"></span><span><b>Zugriff auf Informationen:</b> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</span>
                </li>
              </ul>
            </div>
          </section>

          <section id="as-js-tab-section-2" class="as-oil-margin-top as-js-tab-section">
            <div>
              <p>Die Erhebung und Verarbeitung von Informationen über Ihre Verwendung dieses Dienstes, um anschließend Werbung und/oder Inhalte in anderen Zusammenhängen, beispielsweise auf anderen Websites oder Apps, im Laufe der Zeit für Sie zu personalisieren. Üblicherweise werden die Inhalte der Site oder App herangezogen, um Rückschlüsse hinsichtlich Ihrer Interessen zu ermöglichen, an denen sich die zukünftige Auswahl von Werbung und/oder Inhalten orientiert.</p>
              <label class="as-oil-tabs-cpc__switch">
                <input data-id="2" id="as-js-purpose-slider-2" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-2" value="false">
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
            <div class="as-oil-tabs-cpc__purpose-feature-texts as-oil-margin-top" id="purpose-feature-texts-2">
            </div>
          </section>

          <section id="as-js-tab-section-3" class="as-oil-margin-top as-js-tab-section">
            <div>
              <p>Die Erhebung von Informationen und die Verknüpfung mit zuvor erhobenen Informationen, um Werbeanzeigen für Sie auszuwählen und zu schalten und um die Schaltung und die Wirksamkeit dieser Werbeanzeigen zu bewerten. Dies umfasst die Nutzung zuvor erhobener Informationen über Ihre Interessen zur Auswahl von Werbeanzeigen, Daten darüber zu verarbeiten, welche Werbeanzeigen angezeigt wurden, wie oft diese angezeigt wurden, wann und wo sie angezeigt wurden und ob auf die Werbeanzeige eine Handlung ihrerseits erfolgte, beispielsweise das Anklicken einer Anzeige oder ein Einkauf. Dies umfasst nicht die Personalisierung, worunter die Erhebung und Verarbeitung von Informationen über Ihre Verwendung dieses Dienstes zu verstehen ist, um anschließend Werbung und/oder Inhalte in anderen Zusammenhängen für Sie zu personalisieren.</p>
              <label class="as-oil-tabs-cpc__switch">
                <input data-id="3" id="as-js-purpose-slider-3" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-3" value="false">
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
            <div class="as-oil-tabs-cpc__purpose-feature-texts as-oil-margin-top" id="purpose-feature-texts-3">
            </div>
          </section>

          <section id="as-js-tab-section-4" class="as-oil-margin-top as-js-tab-section">
            <div>
              <p>Die Erhebung von Informationen und die Verknüpfung mit zuvor erhobenen Informationen, um Inhalte für Sie auszuwählen und zu schalten und um die Schaltung und die Wirksamkeit dieser Inhalte zu bewerten. Dies umfasst die Nutzung zuvor erhobener Informationen über Ihre Interessen zur Auswahl von Inhalten, Daten darüber zu verarbeiten, welche Inhalte angezeigt wurden, wie oft diese angezeigt wurden, wann und wo sie angezeigt wurden und ob auf die Inhalte eine Handlung Ihrerseits erfolgte, beispielsweise das Anklicken von Inhalten. Dies umfasst nicht die Personalisierung, worunter die Erhebung und Verarbeitung von Informationen über Ihre Verwendung dieses Dienstes zu verstehen ist, um anschließend Inhalte und/oder Werbung in anderen Zusammenhängen, beispielsweise Websites oder Apps, im Laufe der Zeit für Sie zu personalisieren.</p>
              <label class="as-oil-tabs-cpc__switch">
                <input data-id="4" id="as-js-purpose-slider-4" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-4" value="false">
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
            <div class="as-oil-tabs-cpc__purpose-feature-texts as-oil-margin-top" id="purpose-feature-texts-4">
            </div>
          </section>

          <section id="as-js-tab-section-5" class="as-oil-margin-top as-js-tab-section">
            <div>
              <p>Die Erhebung von Informationen über Ihre Nutzung der Inhalte und die Verknüpfung mit zuvor erhobenen Informationen, die dazu verwendet werden, Ihre Nutzung des Dienstes zu bewerten, zu verstehen und darüber zu berichten. Dies umfasst nicht die Personalisierung, worunter die Erhebung und Verarbeitung von Informationen über Ihre Verwendung dieses Dienstes zu verstehen ist, um anschließend Inhalte und/oder Werbung in anderen Zusammenhängen, d. h. bei anderen Diensten wie beispielsweise Websites oder Apps, im Laufe der Zeit für Sie zu personalisieren.</p>
              <label class="as-oil-tabs-cpc__switch">
                <input data-id="5" id="as-js-purpose-slider-5" class="as-js-purpose-slider" type="checkbox" name="oil-cpc-purpose-5" value="false">
                <span class="as-oil-cpc__slider"></span>
              </label>
            </div>
            <div class="as-oil-tabs-cpc__purpose-feature-texts as-oil-margin-top" id="purpose-feature-texts-5">
            </div>
          </section>

        </div>

        <div class="as-oil-margin-top">
          <div class="as-oil-tabs-cpc__third-parties-link" id="as-js-third-parties-link"><span>i</span>Werbetreibende</div>
          <div id="as-js-third-parties-list" class="as-oil-tabs-cpc__third-parties-list" style="display: none;">
            <div class="as-oil-poi-group-list">
              <div class="as-oil-third-party-list-element">
            <span onclick="AS_OIL._toggleViewElements(this)">
                <svg class="as-oil-icon-plus" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.675 4.328H10v1.344H5.675V10h-1.35V5.672H0V4.328h4.325V0h1.35z" fill="#0068FF" fill-rule="evenodd" fill-opacity=".88"></path>
                </svg>
                <svg class="as-oil-icon-minus" style="display: none;" width="10" height="5" viewBox="0 0 10 5" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0 0h10v1.5H0z" fill="#3B7BE2" fill-rule="evenodd" opacity=".88"></path>
                </svg>
                <span class="as-oil-third-party-name">Exponential Interactive, Inc</span>
            </span>
                <div class="as-oil-third-party-toggle-part" style="display: none;">
                  <a class="as-oil-third-party-link" href="http://exponential.com/privacy">http://exponential.com/privacy</a>
                </div>
              </div>

              <div class="as-oil-third-party-list-element">
            <span onclick="AS_OIL._toggleViewElements(this)">
                <svg class="as-oil-icon-plus" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.675 4.328H10v1.344H5.675V10h-1.35V5.672H0V4.328h4.325V0h1.35z" fill="#0068FF" fill-rule="evenodd" fill-opacity=".88"></path>
                </svg>
                <svg class="as-oil-icon-minus" style="display: none;" width="10" height="5" viewBox="0 0 10 5" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0 0h10v1.5H0z" fill="#3B7BE2" fill-rule="evenodd" opacity=".88"></path>
                </svg>
                <span class="as-oil-third-party-name">Captify Technologies Limited</span>
            </span>
                <div class="as-oil-third-party-toggle-part" style="display: none;">
                  <a class="as-oil-third-party-link" href="http://www.captify.co.uk/privacy-policy/">http://www.captify.co.uk/privacy-policy/</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
Opt-out confirmation

Opt-out confirmation can be activated by setting configuration parameter require_optout_confirm to true.

CPC Opt-out confirmation dialog 
<div id="as-oil-optout-confirm" class="as-oil-optout-confirm">
  <div class="as-oil-optout-confirm__dialog">
    <div class="as-oil-optout-confirm__dialog__heading">
      Are you really sure?
    </div>
    <p>
      This setting will significantly affect your experience on our website.
    </p>
    <div class="as-oil-l-row as-oil-l-buttons">

      <button class="as-oil__btn-cancel as-oil__btn-grey as-js-cancel" data-context="CANCEL" data-qa="oil-CancelButton">
        Cancel
      </button>


      <button class="as-oil__btn-proceed as-oil__btn-blue as-js-proceed" data-context="PROCEED" data-qa="oil-ProceedButton">
        Continue
      </button>

    </div>
  </div>
</div>

Styling Examples

The following examples show different types of banners the opt-in layer can be used for. Every example comes with a screenshot, the minimal configuration and the CSS code that is to be added to the page. All examples are responsive and can be used for desktop and mobile pages.

Simple consent banner (button on the right)

This example shows the opt-in layer as simple consent banner or cookie banner respectively the user can interact with to give consent to all purposes and vendors. There is no possibility for further adjustment. The example uses the small theme of the opt-in layer.

Here is the minimal configuration for this example:

<script id="oil-configuration" type="application/configuration">
  {
    "theme": "small",
    "locale": {
      "localeId": "enEN_01",
      "version": 1,
      "texts": {
        "label_intro": "This site uses cookies. By continuing to use this site, closing this banner, or clicking \"I Agree\", you agree to the use of cookies. Read our <a href='https://www.example.com' target='_blank'>cookies policy</a> and <a href='https://www.example.com' target='_blank'>privacy statement</a> for more information.",
        "label_button_yes": "I agree"
      }
    }
  }
</script>

This is the CSS code that has to be added to the page (after the opt-in layer include) to change the (default) design of the banner:

.small .as-oil__btn-optin {
  font-size: 19px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #2eb8ff;
  min-width: 160px;
  min-height: 42px;
}

.as-oil__btn-optin::after {
  font-family: FontAwesome;
  font-weight: bold;
  content: '\f05d';
}

.small .as-oil-l-row {
  min-width: 20%;
  margin: 0;
}

.as-oil__intro-txt {
  color: #ffffff;
  font-size: 19px;
}

.as-oil__intro-txt a {
  color: #ffffff;
  text-decoration: underline;
}

.small .as-oil-content-overlay {
  background-color: rgba(71, 81, 84, .95);
  padding: 1.2rem !important
}

@media (max-width: 1023px) and (min-width: 601px) {
  .small .as-oil-l-row {
    min-width: 100%;
  }

  .small .as-oil__intro-txt {
    margin-bottom: .5rem;
  }
}

Furthermore, an additional link has to be added:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Simple consent banner (centered button)

This example shows another design for the opt-in layer as simple cookie banner. The user can give consent to all purposes and vendors. Other adjustments are not provided. The example uses the small theme of the opt-in layer.

Here is the minimal configuration for this example:

<script id="oil-configuration" type="application/configuration">
  {
    "theme": "small",
    "locale": {
      "localeId": "enEN_01",
      "version": 1,
      "texts": {
        "label_intro": "Cookies help us customise our site for you, and some are necessary to make it work. Cookies also let us show you personalised offers and promotions, both on and off our site. Of course, you're in control. You can <b><a href='https://www.example.com'>manage your cookies</a></b> at any time.",
        "label_button_yes": "Accept Cookies"
      }
    }
  }
</script>

This is the CSS code that has to be added to the page (after the opt-in layer include) to change the (default) design of the banner:

.as-oil__btn-optin {
  min-width: 6rem;
  border: 1px solid white;
  border-radius: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 250ms ease;
  background-color: white;
  color: #0070ba;
  width: 200px;
}

.as-oil__btn-optin:hover {
  color: white;
  background-color: #0070ba;
  text-decoration: underline;
}

.small .as-oil-l-row {
  display: block;
}

.as-oil-l-item {
  text-align: center;
}

.small .as-oil__intro-txt {
  display: block;
  text-align: justify;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: white;
  min-width: 100%;
  max-width: 100%;
  margin: 0 0 1rem 0;
}

.as-oil__intro-txt a {
  color: white;
  text-decoration: underline;
}

.small .as-oil-content-overlay {
  background-color: #012169;
  padding: 1.2rem !important;
}

@media (max-width: 1023px) and (min-width: 601px) {
  .as-oil-l-buttons {
    max-width: 100%;
  }
}
Consent banner with Cookie Preference Center

This example shows the opt-in layer as consent banner the user can interact with to give consent to all purposes and vendors. Furthermore, a link to the Cookie Preference Center is provided that allows specific adjustments of consents to purposes.

This is the CPC view:

Cookie Preference Center

Here is the minimal configuration for this example. It is slightly more complex than configuration sections of previous examples to cover the Cookie Preference Center too:

<script id="oil-configuration" type="application/configuration">
  {
    "advanced_settings": true,
    "locale": {
      "localeId": "enEN_01",
      "version": 1,
      "texts": {
        "label_cpc_purpose_desc": "Purposes",
        "label_button_advanced_settings": "See our privacy settings and policy",
        "label_intro_heading": "By using the site you agree to our privacy settings",
        "label_intro": "<span class='custom-list-element'>We'll give you the best experience</span><span class='custom-list-element'>We'll show you relevant advertising</span>",
        "label_button_yes": "Got it"
      }
    }
  }
</script>

Please note the definition of the list elements (within the label_intro element) using <span> tags. The opt-in layer uses a block element (a paragraph) for the banner text. Therefore, usage of a <ul> based list would cause some problems we avoid with this solution. The list layout is created completely by CSS.

This is the CSS code that has to be added to the page (after the opt-in layer include) to change the (default) design of the banner (including the Cookie Preference Center):

.as-oil,
.as-oil__btn-cpc,
.as-oil-cpc__purpose-text,
.as-oil-cpc__status,
.as-oil-third-party-list-element .as-oil-third-party-link,
.light .as-oil-cpc__left a,
.as-oil-back-button__text {
  color: white;
}

.as-oil-cpc__category-link--active {
  border-color: white;
}

.as-oil-l-wrapper-layout-max-width {
  max-width: 800px;
}

.as-oil-l-wrapper-layout-max-width.as-oil-cpc-wrapper {
  max-width: initial;
}

.as-oil__heading {
  font-size: 1.7rem;
  font-weight: bold;
}

.custom-list-element {
  display: list-item;
  list-style-position: inside;
  text-indent: -1.6rem;
  padding-left: 1.6rem;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2rem;
}

.as-oil__btn-optin {
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #0cac0d;
  min-width: 16rem;
  min-height: 2.25rem;
}

.as-oil__btn-optin:hover {
  color: #0cac0d;
  background-color: white;
}

.as-oil__btn-cpc {
  float: left;
  margin-top: -2rem;
}

.as-oil__btn-cpc:hover {
  color: white;
}

.as-oil-l-row.as-oil-l-buttons {
  display: block;
  margin: 0;
}

.as-oil-content-overlay {
  background-color: #0a50b0;
  padding: 1.2rem !important
}

.as-oil__btn-blue,
.as-oil-cpc__switch input:checked ~ .as-oil-cpc__slider {
  background-color: #0cac0d;
}

.as-oil-icon-plus,
.as-oil-icon-minus {
  stroke: white;
}

@media (max-width: 1023px) and (min-width: 601px) {
  .as-oil-l-buttons {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .as-oil__heading {
    text-align: justify;
  }

  .as-oil__btn-cpc {
    float: none;
    margin-top: 0;
  }
}

"Thank you" Screen

If you are performing A/B tests on the OIL Layer while not having the tracking disabled technically, we recommend to additionally insert this customized "Thank you"-Layer javascript code your website.

This code will listen to OIL events to show another window after the user finished the conversion process explaining the nature of the test.

(function () {

    // Cross browser event handler definition
    var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
    var messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
    var eventer = window[eventMethod];

    // Callback to be executed when event is fired
    function receiveMessage(event) {
        function eventDataContains(str) {
            return JSON.stringify(event.data).indexOf(str) !== -1;
        }

        if (event && event.data && (eventDataContains('oil_opt'))) {
            var htmlCode = '<div class="as-oil-content-overlay">'
                + '<div class="as-oil-l-wrapper-layout-max-width">'
                + '<div class="as-oil__heading">'
                + 'Thank you for your feedback!'
                + '</div>'
                + '<p class="as-oil__intro-txt">'
                + 'We as a company take your privacy very seriously. In order to learn your expectations we '
                + 'currently conduct this survey. Thank you for your understanding!'
                + '</p>'
                + '<div class="as-oil-l-row as-oil-l-buttons">'
                + '<div class="as-oil-l-item">'
                + '<button class="as-oil__btn-soi as-js-optin as-close-ty-button" onclick="closeOil()">'
                + 'Close'
                + '</button>'
                + '</div>'
                + '</div>'
                + '</div>'
                + '</div>';

            var thankYouNode = document.createElement('div');
            thankYouNode.id = "as-oil-thank-you";
            thankYouNode.innerHTML = htmlCode;
            thankYouNode.setAttribute('class', 'as-oil');
            document.body.appendChild(thankYouNode);
        }
    }

    // Register event handler
    eventer(messageEvent, receiveMessage, false);
}());

Adding Scripts programmatically

Adding oil.js configuration

var oldScript = document.getElementById('oil-configuration');
if (oldScript) {
  oldScript.parentNode.removeChild(oldScript);
}

var config = {
  preview_mode: true
};
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');

script.id = 'oil-configuration';
script.type = 'application/configuration';
script.text = JSON.stringify(config);

head.appendChild(script);

Tracking user interaction with OIL

Sometimes it may be interesting to know how users interact with the consent layer provided by OIL. To get this information it is required to connect the Opt-In Layer with a tracking service. Fortunately, it is very easy to achieve this. This chapter describes the necessary steps using the example of Google Analytics.

To be informed about special events or user interactions relating to the layer you can use the event mechanism provided by OIL (see chapter OIL Events). To propagate these events to your tracking service (here: Google Analytics) you should add the following event handler to your page:

  // Cross browser event handler definition
  var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
  var messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
  var eventer = window[eventMethod];

  // Callback to be executed when event is fired
  function receiveMessage(event) {
    var eventData = JSON.stringify(event.data);
    // Examinate event and select it if it was sent by OIL
    if (typeof eventData === 'string' && eventData.indexOf("oil_") === 1) {
      // Propagate event to Google Analytics
      ga('send', 'event', {
        eventCategory: 'OIL',
        eventAction: eventData
      });
    }
  }

  // Register event handler
  eventer(messageEvent, receiveMessage, false);

It is recommended to integrate this code snippet before the import statement for the Opt-In Layer. This ensures that the handler is already active when the layer fires its first event. The handler examinates incoming events and selects those sent by the layer (detectable by their name prefix oil_). If such an event was detected it is propagated to Google Analytics using its API call ga. To be able to create specific dashboards for OIL events the handler uses OIL as event category. The event name is propagated to Google Analytics as event action. These data are already sufficient to create some useful dashboards as shown in the following screenshots:

Google Analytics Dashboard showing information about all detected OIL events
Google Analytics Dashboard showing information for specific OIL events

For details how to create plots, tables and dashboards in Google Analytics please consult documentation provided by Google.

If you want to use another tracking service, you can use the event handler shown above as well. You only have to replace the Google Analytics API call by the corresponding API call of your tracking service. If you are not interested in propagation of all OIL events, you can easily change the code to select your events by name. See chapter OIL Events for the complete list of events sent by OIL.

Appendix

Glossary

Term Explanation

OIL

Stands for opt-in Layer and besides the fact that it stand for the name of the product it is often used to refer to the UI layer shown on the page.

Site Opt-In (SOI)

The Site Opt-In stores a user’s opt-in permit for the current site only. Also known as domain opt-in.

Power Opt-In (POI)

The Power Opt-In functionality stores the opt-in permit for multiple Axel Springer websites. This allows users to only give their opt-in permit for many websites at once. POI is implemented via an iframe solution, see also Hub . Also known as group opt-in.

Hub

POI is implemented via an iframe solution that points to a hub site that acts as a third party cookie storage. Technically, the hub consists of an html and js.

Subscriber

A site that subscribes to a POI hub