@jumpgroup/avacy-banner
Version:
oil.js Opt-In Layer for consent management based on the IAB TCF Standard
4,217 lines • 204 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 1.5.6.2">
<meta name="description" content="The documentation for the Axel Springer Opt-In Layer">
<meta name="keywords" content="Tealium, OIL, Opt-In Layer">
<title>Introduction</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
<style>
/* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
/* Remove comment around @import statement below when using as a custom stylesheet */
/*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
script{display:none!important}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
a{background:transparent}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{font-size:100%}
body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto;tab-size:4;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
a:hover{cursor:pointer}
img,object,embed{max-width:100%;height:auto}
object,embed{height:100%}
img{-ms-interpolation-mode:bicubic}
.left{float:left!important}
.right{float:right!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-justify{text-align:justify!important}
.hide{display:none}
img,object,svg{display:inline-block;vertical-align:middle}
textarea{height:auto;min-height:50px}
select{width:100%}
.center{margin-left:auto;margin-right:auto}
.spread{width:100%}
p.lead,.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{font-size:1.21875em;line-height:1.6}
.subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
a{color:#2156a5;text-decoration:underline;line-height:inherit}
a:hover,a:focus{color:#1d4b8f}
a img{border:none}
p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
p aside{font-size:.875em;line-height:1.35;font-style:italic}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
h1{font-size:2.125em}
h2{font-size:1.6875em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
h4,h5{font-size:1.125em}
h6{font-size:1em}
hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
em,i{font-style:italic;line-height:inherit}
strong,b{font-weight:bold;line-height:inherit}
small{font-size:60%;line-height:inherit}
code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
ul,ol{margin-left:1.5em}
ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
ul.square{list-style-type:square}
ul.circle{list-style-type:circle}
ul.disc{list-style-type:disc}
ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
dl dt{margin-bottom:.3125em;font-weight:bold}
dl dd{margin-bottom:1.25em}
abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
abbr{text-transform:none}
blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
blockquote cite:before{content:"\2014 \0020"}
blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
@media only screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
h1{font-size:2.75em}
h2{font-size:2.3125em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
h4{font-size:1.4375em}}
table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
table thead,table tfoot{background:#f7f8f7;font-weight:bold}
table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
.clearfix:before,.clearfix:after,.float-group:before,.float-group:after{content:" ";display:table}
.clearfix:after,.float-group:after{clear:both}
*:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed;word-wrap:break-word}
*:not(pre)>code.nobreak{word-wrap:normal}
*:not(pre)>code.nowrap{white-space:nowrap}
pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
em em{font-style:normal}
strong strong{font-weight:400}
.keyseq{color:rgba(51,51,51,.8)}
kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
.keyseq kbd:first-child{margin-left:0}
.keyseq kbd:last-child{margin-right:0}
.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
b.button:before,b.button:after{position:relative;top:-1px;font-weight:400}
b.button:before{content:"[";padding:0 3px 0 2px}
b.button:after{content:"]";padding:0 2px 0 3px}
p a>code:hover{color:rgba(0,0,0,.9)}
#header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
#header:before,#header:after,#content:before,#content:after,#footnotes:before,#footnotes:after,#footer:before,#footer:after{content:" ";display:table}
#header:after,#content:after,#footnotes:after,#footer:after{clear:both}
#content{margin-top:1.25em}
#content:before{content:none}
#header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
#header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
#header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
#header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
#header .details span:first-child{margin-left:-.125em}
#header .details span.email a{color:rgba(0,0,0,.85)}
#header .details br{display:none}
#header .details br+span:before{content:"\00a0\2013\00a0"}
#header .details br+span.author:before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
#header .details br+span#revremark:before{content:"\00a0|\00a0"}
#header #revnumber{text-transform:capitalize}
#header #revnumber:after{content:"\00a0"}
#content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
#toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
#toc>ul{margin-left:.125em}
#toc ul.sectlevel0>li>a{font-style:italic}
#toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
#toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
#toc li{line-height:1.3334;margin-top:.3334em}
#toc a{text-decoration:none}
#toc a:active{text-decoration:underline}
#toctitle{color:#7a2518;font-size:1.2em}
@media only screen and (min-width:768px){#toctitle{font-size:1.375em}
body.toc2{padding-left:15em;padding-right:0}
#toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
#toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc2>ul{font-size:.9em;margin-bottom:0}
#toc.toc2 ul ul{margin-left:0;padding-left:1em}
#toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
body.toc2.toc-right{padding-left:0;padding-right:15em}
body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
@media only screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
#toc.toc2{width:20em}
#toc.toc2 #toctitle{font-size:1.375em}
#toc.toc2>ul{font-size:.95em}
#toc.toc2 ul ul{padding-left:1.25em}
body.toc2.toc-right{padding-left:0;padding-right:20em}}
#content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
#content #toc>:first-child{margin-top:0}
#content #toc>:last-child{margin-bottom:0}
#footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
#footer-text{color:rgba(255,255,255,.8);line-height:1.44}
.sect1{padding-bottom:.625em}
@media only screen and (min-width:768px){.sect1{padding-bottom:1.25em}}
.sect1+.sect1{border-top:1px solid #efefed}
#content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
#content h1>a.anchor:before,h2>a.anchor:before,h3>a.anchor:before,#toctitle>a.anchor:before,.sidebarblock>.content>.title>a.anchor:before,h4>a.anchor:before,h5>a.anchor:before,h6>a.anchor:before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
#content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
#content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
#content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
table.tableblock>caption.title{white-space:nowrap;overflow:visible;max-width:0}
.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{color:rgba(0,0,0,.85)}
table.tableblock #preamble>.sectionbody>.paragraph:first-of-type p{font-size:inherit}
.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
.admonitionblock>table td.icon{text-align:center;width:80px}
.admonitionblock>table td.icon img{max-width:initial}
.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
.exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
.exampleblock>.content>:first-child{margin-top:0}
.exampleblock>.content>:last-child{margin-bottom:0}
.sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
.sidebarblock>:first-child{margin-top:0}
.sidebarblock>:last-child{margin-bottom:0}
.sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
.exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
.literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
.sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
.literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
@media only screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
@media only screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
.literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
.listingblock pre.highlightjs{padding:0}
.listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
.listingblock pre.prettyprint{border-width:0}
.listingblock>.content{position:relative}
.listingblock code[data-lang]:before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
.listingblock:hover code[data-lang]:before{display:block}
.listingblock.terminal pre .command:before{content:attr(data-prompt);padding-right:.5em;color:#999}
.listingblock.terminal pre .command:not([data-prompt]):before{content:"$"}
table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
table.pyhltable td.code{padding-left:.75em;padding-right:0}
pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
pre.pygments .lineno{display:inline-block;margin-right:.25em}
table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
.quoteblock{margin:0 1em 1.25em 1.5em;display:table}
.quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
.quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
.quoteblock blockquote{margin:0;padding:0;border:0}
.quoteblock blockquote:before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
.quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
.quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
.quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
.quoteblock .quoteblock blockquote:before{display:none}
.verseblock{margin:0 1em 1.25em 1em}
.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
.verseblock pre strong{font-weight:400}
.verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
.quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
.quoteblock .attribution br,.verseblock .attribution br{display:none}
.quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
.quoteblock.abstract{margin:0 0 1.25em 0;display:block}
.quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{text-align:left;word-spacing:0}
.quoteblock.abstract blockquote:before,.quoteblock.abstract blockquote p:first-of-type:before{display:none}
table.tableblock{max-width:100%;border-collapse:separate}
table.tableblock td>.paragraph:last-child p>p:last-child,table.tableblock th>p:last-child,table.tableblock td>p:last-child{margin-bottom:0}
table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
table.grid-all>thead>tr>.tableblock,table.grid-all>tbody>tr>.tableblock{border-width:0 1px 1px 0}
table.grid-all>tfoot>tr>.tableblock{border-width:1px 1px 0 0}
table.grid-cols>*>tr>.tableblock{border-width:0 1px 0 0}
table.grid-rows>thead>tr>.tableblock,table.grid-rows>tbody>tr>.tableblock{border-width:0 0 1px 0}
table.grid-rows>tfoot>tr>.tableblock{border-width:1px 0 0 0}
table.grid-all>*>tr>.tableblock:last-child,table.grid-cols>*>tr>.tableblock:last-child{border-right-width:0}
table.grid-all>tbody>tr:last-child>.tableblock,table.grid-all>thead:last-child>tr>.tableblock,table.grid-rows>tbody>tr:last-child>.tableblock,table.grid-rows>thead:last-child>tr>.tableblock{border-bottom-width:0}
table.frame-all{border-width:1px}
table.frame-sides{border-width:0 1px}
table.frame-topbot{border-width:1px 0}
th.halign-left,td.halign-left{text-align:left}
th.halign-right,td.halign-right{text-align:right}
th.halign-center,td.halign-center{text-align:center}
th.valign-top,td.valign-top{vertical-align:top}
th.valign-bottom,td.valign-bottom{vertical-align:bottom}
th.valign-middle,td.valign-middle{vertical-align:middle}
table thead th,table tfoot th{font-weight:bold}
tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
p.tableblock>code:only-child{background:none;padding:0}
p.tableblock{font-size:1em}
td>div.verse{white-space:pre}
ol{margin-left:1.75em}
ul li ol{margin-left:1.5em}
dl dd{margin-left:1.125em}
dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
ul.checklist,ul.none,ol.none,ul.no-bullet,ol.no-bullet,ol.unnumbered,ul.unstyled,ol.unstyled{list-style-type:none}
ul.no-bullet,ol.no-bullet,ol.unnumbered{margin-left:.625em}
ul.unstyled,ol.unstyled{margin-left:0}
ul.checklist{margin-left:.625em}
ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1.25em;font-size:.8em;position:relative;bottom:.125em}
ul.checklist li>p:first-child>input[type="checkbox"]:first-child{margin-right:.25em}
ul.inline{margin:0 auto .625em auto;margin-left:-1.375em;margin-right:0;padding:0;list-style:none;overflow:hidden}
ul.inline>li{list-style:none;float:left;margin-left:1.375em;display:block}
ul.inline>li>*{display:block}
.unstyled dl dt{font-weight:400;font-style:normal}
ol.arabic{list-style-type:decimal}
ol.decimal{list-style-type:decimal-leading-zero}
ol.loweralpha{list-style-type:lower-alpha}
ol.upperalpha{list-style-type:upper-alpha}
ol.lowerroman{list-style-type:lower-roman}
ol.upperroman{list-style-type:upper-roman}
ol.lowergreek{list-style-type:lower-greek}
.hdlist>table,.colist>table{border:0;background:none}
.hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
td.hdlist1{font-weight:bold;padding-bottom:1.25em}
.literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
.colist>table tr>td:first-of-type{padding:.4em .75em 0 .75em;line-height:1;vertical-align:top}
.colist>table tr>td:first-of-type img{max-width:initial}
.colist>table tr>td:last-of-type{padding:.25em 0}
.thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
.imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
.imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
.imageblock>.title{margin-bottom:0}
.imageblock.thumb,.imageblock.th{border-width:6px}
.imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
.image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
.image.left{margin-right:.625em}
.image.right{margin-left:.625em}
a.image{text-decoration:none;display:inline-block}
a.image object{pointer-events:none}
sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
sup.footnote a,sup.footnoteref a{text-decoration:none}
sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
#footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
#footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em 0;border-width:1px 0 0 0}
#footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;text-indent:-1.05em;margin-bottom:.2em}
#footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none}
#footnotes .footnote:last-of-type{margin-bottom:0}
#content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
.gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
.gist .file-data>table td.line-data{width:99%}
div.unbreakable{page-break-inside:avoid}
.big{font-size:larger}
.small{font-size:smaller}
.underline{text-decoration:underline}
.overline{text-decoration:overline}
.line-through{text-decoration:line-through}
.aqua{color:#00bfbf}
.aqua-background{background-color:#00fafa}
.black{color:#000}
.black-background{background-color:#000}
.blue{color:#0000bf}
.blue-background{background-color:#0000fa}
.fuchsia{color:#bf00bf}
.fuchsia-background{background-color:#fa00fa}
.gray{color:#606060}
.gray-background{background-color:#7d7d7d}
.green{color:#006000}
.green-background{background-color:#007d00}
.lime{color:#00bf00}
.lime-background{background-color:#00fa00}
.maroon{color:#600000}
.maroon-background{background-color:#7d0000}
.navy{color:#000060}
.navy-background{background-color:#00007d}
.olive{color:#606000}
.olive-background{background-color:#7d7d00}
.purple{color:#600060}
.purple-background{background-color:#7d007d}
.red{color:#bf0000}
.red-background{background-color:#fa0000}
.silver{color:#909090}
.silver-background{background-color:#bcbcbc}
.teal{color:#006060}
.teal-background{background-color:#007d7d}
.white{color:#bfbfbf}
.white-background{background-color:#fafafa}
.yellow{color:#bfbf00}
.yellow-background{background-color:#fafa00}
span.icon>.fa{cursor:default}
a span.icon>.fa{cursor:inherit}
.admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
.admonitionblock td.icon .icon-note:before{content:"\f05a";color:#19407c}
.admonitionblock td.icon .icon-tip:before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
.admonitionblock td.icon .icon-warning:before{content:"\f071";color:#bf6900}
.admonitionblock td.icon .icon-caution:before{content:"\f06d";color:#bf3400}
.admonitionblock td.icon .icon-important:before{content:"\f06a";color:#bf0000}
.conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
.conum[data-value] *{color:#fff!important}
.conum[data-value]+b{display:none}
.conum[data-value]:after{content:attr(data-value)}
pre .conum[data-value]{position:relative;top:-.125em}
b.conum *{color:inherit!important}
.conum:not([data-value]):empty{display:none}
dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
p{margin-bottom:1.25rem}
.sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
.exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
.print-only{display:none!important}
@media print{@page{margin:1.25cm .75cm}
*{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
a{color:inherit!important;text-decoration:underline!important}
a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
a[href^="http:"]:not(.bare):after,a[href^="https:"]:not(.bare):after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
abbr[title]:after{content:" (" attr(title) ")"}
pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
thead{display:table-header-group}
svg{max-width:100%}
p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
#toc,.sidebarblock,.exampleblock>.content{background:none!important}
#toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
.sect1{padding-bottom:0!important}
.sect1+.sect1{border:0!important}
#header>h1:first-child{margin-top:1.25rem}
body.book #header{text-align:center}
body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em 0}
body.book #header .details{border:0!important;display:block;padding:0!important}
body.book #header .details span:first-child{margin-left:0!important}
body.book #header .details br{display:block}
body.book #header .details br+span:before{content:none!important}
body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
.listingblock code[data-lang]:before{display:block}
#footer{background:none!important;padding:0 .9375em}
#footer-text{color:rgba(0,0,0,.6)!important;font-size:.9em}
.hide-on-print{display:none!important}
.print-only{display:block!important}
.hide-for-print{display:none!important}
.show-for-print{display:inherit!important}}
</style>
<style>
body, html {
font-family: 'Source Sans Pro', serif;
}
body.article.toc2 {
padding-left: 320px;
}
</style>
<style>
/* HEADER aka TOC or SIDEBAR */
#header #toc {
width: 320px;
padding: 0;
background-color: #f8f9fb;
border-right: none;
}
#header #toc #toctitle {
height: 50px;
margin: 0;
padding: 0;
color: #3c4c57;
font-weight: 600;
}
#header #toc li {
}
#header #toc a {
margin: 5px 0;
color: #3c4c57;
}
/* L1 Container */
#header #toc .sectlevel1 {
padding: 12px 12px 90px 40px;
}
/* L1 Menu Link */
#header #toc .sectlevel1 > li > a {
color: #3c4c57;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0.4px;
}
/* L1 LINK-CONTAINER FOR 1st LEVEL SECTION */
#header #toc .sectlevel1 > li {
margin-top: 25px;
}
/* L2 Container */
#header #toc .sectlevel2 {
padding: 0;
}
/* L2 Menu Link */
#header #toc .sectlevel2 > li > a {
color: #8591a5;
font-size: 14px;
font-weight: normal;
line-height: 1.43;
letter-spacing: 0.3px;
}
/* L3 Container */
#header #toc .sectlevel3 {
padding-left: 20px;
}
/* L3 Menu Link */
#header #toc .sectlevel3 > li > a {
color: #8591a5;
font-size: 14px;
font-weight: normal;
line-height: 1.43;
letter-spacing: 0.3px;
}
/* L4 Container */
#header #toc .sectlevel4 {
padding-left: 12px;
}
/* L4 Menu Link */
#header #toc .sectlevel4 > li > a {
color: #8591a5;
font-size: 14px;
font-weight: normal;
line-height: 1.43;
letter-spacing: 0.3px;
}
@media only screen and (max-width: 1279px) {
#content {
padding-left: 24px;
}
}
</style>
<style>
/* CONTENT */
#content {
padding: 70px;
margin: 0;
width: 100%;
}
#content a {
color: #3c4c57;
}
h1, h2, h3, h4, h5, h6 {
color: #283444;
}
/* THIS IS OUR 1st level as we do not use L0 */
h2 {
margin: 46px 0 24px 0;
font-size: 36px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.5px;
}
h3 {
margin: 36px 0 18px 0;
font-size: 26px;
font-weight: 600;
line-height: 1.15;
}
h4 {
margin: 24px 0 10px 0;
}
p {
color: #3c4c57;
font-size: 18px;
line-height: 1.5;
letter-spacing: 0.5px;
}
.ulist ul {
list-style-position: outside;
}
.ulist li {
padding-left: 12px;
}
#content .tableblock th {
font-family: 'Source Code Pro';
text-transform: uppercase;
font-size: 14px;
font-weight: normal;
color: #17ce68;
}
/* DARKER CELLS */
#content table tr.odd, #content table tr:nth-of-type(odd) {
background-color: #f9fafc;
}
/* LIGHTER CELLS */
#content table.tableblock thead tr, #content table tr.even, #content table tr.alt, #content table tr:nth-of-type(even) {
background-color: #ffffff;
}
/* BORDER*/
#content table.tableblock, #content th.tableblock, #content td.tableblock {
border: 0.5px solid #f0f2f8;
}
#content p.tableblock {
font-size: 18px;
font-weight: normal;
line-height: 1.5;
letter-spacing: 0.5px;
color: #3c4c57;
}
#content .sect1 {
border-top: none;
padding-bottom: 50px;
margin-bottom: 50px;
border-bottom: solid 1px #1eb8ff;
}
#content .sect1:last-of-type {
}
#content .sect2 {
padding-bottom: 50px;
margin-bottom: 50px;
border-bottom: solid 1px #e0e8ed;
}
#content .sect2:last-of-type {
padding-bottom: initial;
margin-bottom: initial;
border-bottom: none;
}
</style>
<style>
/* HEADER */
.main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 50000;
border-bottom: 3px solid #e0e8ed;
display: flex;
justify-content: space-between;
align-items: center;
}
/* HEADER LEFT */
.main-header__left {
flex: 0 0 320px;
width: 320px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 40px;
background: #f8f9fb;
}
.main-header__left-image {
width: 24px;
height: auto;
}
.main-header__left-text-a {
padding-left: 12px;
text-decoration: none;
font-family: 'Source Code Pro';
font-size: 14px;
font-weight: bold;
line-height: normal;
letter-spacing: normal;
color: #3c4c57;
}
.main-header__left-text-b {
padding-left: 4px;
font-family: 'Source Code Pro';
font-size: 14px;
font-weight: bold;
line-height: normal;
letter-spacing: normal;
color: #17ce68;
}
/* RIGHT */
.main-header__right {
flex: 1 1 auto;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 70px 0 70px;
background: #ffffff;
}
.main-header__version {
}
.main-header__version p {
padding: 0;
margin: 0;
display: inline-block;
color: #8591a5;
font-size: 14px;
font-weight: normal;
line-height: 1.43;
letter-spacing: 0.3px;
}
.main-header__call-to-action {
}
.menu-button {
display: inline-block;
text-decoration: none;
width: 124px;
height: 30px;
font-size: 14px;
font-weight: normal;
line-height: 28px;
letter-spacing: normal;
color: #283444;
text-align: center;
border-radius: 4px;
border: solid 1px #c0cbda;
margin-right: 1vw;
}
.menu-button:hover {
border-color: #a0abba;
}
.menu-button.blue-design {
border-color: #8bd9ff;
}
.menu-button.blue-design:hover {
border-color: #38b8ff;
}
@media only screen and (max-device-width: 480px) {
div.sticky-footer {
padding: 2px 12px 2px 12px;
}
.sticky-footer .column-one, .sticky-footer .column-two {
flex: 1 1 auto;
}
.sticky-footer .column-three {
display: none;
}
}
@media only screen and (max-device-width: 480px) {
body, html {
max-width: 100vw;
overflow-x: hidden;
}
.sect2 {
overflow-x: scroll;
}
#header {
padding-left: unset;
padding-right: unset;
}
#content {
max-width: 100%;
padding: 6px 6px 6px 10px;
}
body.article.toc2 {
padding-left: unset;
}
.main-header {
max-width: 100vw;
width: auto;
}
.main-header__left {
flex: 1 1 auto;
width: 228px;
padding-left: 12px;
}
.main-header__right {
padding: 0 0 0 0;
background: #f8f9fb;
}
.main-header__version p {
padding-left: 6px;
font-size: 8px;
}
.main-header__call-to-action {
display: flex;
align-items: center;
}
.desktop-only {
display: none;
}
.menu-button {
height: 24px;
width: 40px;
font-size: 14px;
line-height: 24px;
}
.sectlevel1 {
padding: 12px;
}
}
@media only screen and (min-device-width: 480px) {
.xs-only {
display: none;
}
}
</style>
</head>
<body class="article toc2 toc-left">
<div id="header">
<div id="toc" class="toc2">
<div id="toctitle"></div>
<ul class="sectlevel1">
<li><a href="#introduction">Introduction</a>
<ul class="sectlevel2">
<li><a href="#about-oil-js">About oil.js</a></li>
<li><a href="#technical-quality-goals">Technical Quality Goals</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#solution-strategy">Solution Strategy</a></li>
<li><a href="#why-is-there-no-native-app-support">Why is there no native app support?</a></li>
</ul>
</li>
<li><a href="#quickstart">Quickstart</a>
<ul class="sectlevel2">
<li><a href="#how-to-implement-oil-on-your-site">How to implement OIL on your site</a></li>
<li><a href="#including-oil-js-sources-on-your-site">Including oil.js sources on your site</a>
<ul class="sectlevel3">
<li><a href="#self-hosted-solution">Self-hosted solution</a></li>
<li><a href="#delivery-through-the-unpkg-com-cdn">Delivery through the unpkg.com cdn</a></li>
<li><a href="#delivery-through-tealium">Delivery through Tealium</a></li>
<li><a href="#release-files">Release files</a></li>
</ul>
</li>
<li><a href="#integrate-oil">Integrate OIL</a>
<ul class="sectlevel3">
<li><a href="#self-hosted-solution-2">Self-hosted solution</a></li>
<li><a href="#delivery-through-unpkg-com">Delivery through unpkg.com</a></li>
</ul>
</li>
<li><a href="#configure-oil">Configure OIL</a>
<ul class="sectlevel3">
<li><a href="#delivery-through-unpkg-com-2">Delivery through unpkg.com</a></li>
</ul>
</li>
<li><a href="#oil-sdk">OIL SDK</a></li>
</ul>
</li>
<li><a href="#configuring-oil">Configuring OIL</a>
<ul class="sectlevel2">
<li><a href="#the-configuration-block">The Configuration Block</a>
<ul class="sectlevel3">
<li><a href="#locale_url-or-locale">locale_url or locale?</a></li>
</ul>
</li>
<li><a href="#power-opt-in-poi-or-site-opt-in-soi">Power Opt-In (POI) or Site Opt-In (SOI)?</a>
<ul class="sectlevel3">
<li><a href="#poi-power-opt-in">POI – Power Opt-In</a></li>
<li><a href="#poi-list">POI-List</a>
<ul class="sectlevel4">
<li><a href="#group-wide-vendor-whitelist-and-vendor-blacklist">Group-wide vendor whitelist and vendor blacklist</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#configuration-parameters">Configuration Parameters</a></li>
<li><a href="#texts-locale-object">Texts & Locale Object</a>
<ul class="sectlevel3">
<li><a href="#language-label-configuration">Language label configuration</a></li>
<li><a href="#example-for-complete-texts-object">Example for complete texts object</a></li>
<li><a href="#special-css-classes-within-labels">Special CSS classes within labels</a></li>
</ul>
</li>
<li><a href="#preview_mode">preview_mode</a></li>
<li><a href="#blacklisting-and-whitelisting">Blacklisting and Whitelisting</a>
<ul class="sectlevel3">
<li><a href="#auto-hiding-the-layer-timeout">Auto-Hiding the layer (timeout)</a></li>
</ul>
</li>
<li><a href="#custom-vendors-non-iab-vendors">Custom vendors (non IAB vendors)</a></li>
</ul>
</li>
<li><a href="#iab-europe-transparency-consent-framework">IAB Europe "Transparency & Consent Framework"</a>
<ul class="sectlevel2">
<li><a href="#js-api">JS-API</a>
<ul class="sectlevel3">
<li><a href="#getvendorconsents">getVendorConsents</a></li>
<li><a href="#getconsentdata">getConsentData</a></li>
<li><a href="#ping">ping</a></li>
<li><a href="#optional-call-getpublisherconsents">Optional call: getPublisherConsents</a></li>
<li><a href="#optional-call-getvendorlist">Optional call: getVendorList</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#oil-api">OIL API</a>
<ul class="sectlevel2">
<li><a href="#test-deployment-and-preview-mode">Test Deployment and Preview Mode</a></li>
<li><a href="#oil-verbose-logging">OIL Verbose Logging</a></li>
<li><a href="#oil-js-calls">OIL JS-Calls</a></li>
<li><a href="#oil-events">OIL Events</a></li>
<li><a href="#oil-cpc-api">OIL CPC API</a></li>
<li><a href="#soft-blocking-of-dom-elements">Soft Blocking of DOM Elements</a>
<ul class="sectlevel3">
<li><a href="#managing-code-script-code-elements">Managing <code><script></code> Elements</a></li>
<li><a href="#managing-other-elements">Managing Other Elements</a></li>
</ul>
</li>
<li><a href="#tracking-and-google-analytics-events">Tracking and Google Analytics Events</a></li>
</ul>
</li>
<li><a href="#amp-support">AMP Support</a>
<ul class="sectlevel2">
<li><a href="#technical-integration">Technical integration</a></li>
</ul>
</li>
<li><a href="#oil-and-tealium">OIL and Tealium</a>
<ul class="sectlevel2">
<li><a href="#add-opt-in-layer-to-tealium">Add Opt-In Layer to Tealium</a></li>
<li><a href="#add-oil-configuration-to-tealium">Add OIL configuration to Tealium</a></li>
<li><a href="#vendor-tag-management-with-oil-and-tealium">Vendor Tag Management with OIL and Tealium</a></li>
</ul>
</li>
<li><a href="#customisation">Customisation</a>
<ul class="sectlevel2">
<li><a href="#supported-a-b-testing-with-us">Supported A/B Testing with us</a></li>
<li><a href="#your-own-a-b-testing">Your own A/B Testing</a>
<ul class="sectlevel3">
<li><a href="#enabling-oil-for-a-specific-variant-only">Enabling OIL for a specific variant only</a></li>
</ul>
</li>
<li><a href="#styling-guide">Styling guide</a>
<ul class="sectlevel3">
<li><a href="#opt-in-layer">Opt-In layer</a></li>
<li><a href="#no-cookie-layer">No-cookie layer</a></li>
<li><a href="#poi-group-list">POI group list</a></li>
<li><a href="#third-party-list">Third party list</a></li>
<li><a href="#advanced-settings-cpc-cookie-preference-center">Advanced Settings (CPC - Cookie Preference Center)</a>
<ul class="sectlevel4">
<li><a href="#standard-cpc">Standard CPC</a></li>
<li><a href="#tab-based-cpc">Tab-based CPC</a></li>
<li><a href="#opt-out-confirmation">Opt-out confirmation</a></li>
</ul>
</li>
<li><a href="#styling-examples">Styling Examples</a>
<ul class="sectlevel4">
<li><a href="#simple-consent-banner-button-on-the-right">Simple consent banner (button on the right)</a></li>
<li><a href="#simple-consent-banner-centered-button">Simple consent banner (centered button)</a></li>
<li><a href="#consent-banner-with-cookie-preference-center">Consent banner with Cookie Preference Center</a></li>
</ul>
</li>
<li><a href="#thank-you-screen">"Thank you" Screen</a></li>
</ul>
</li>
<li><a href="#adding-scripts-programmatically">Adding Scripts programmatically</a>
<ul class="sectlevel3">
<li><a href="#adding-oil-js-configuration">Adding oil.js configuration</a></li>
</ul>
</li>
<li><a href="#tracking-user-interaction-with-oil">Tracking user interaction with OIL</a></li>
</ul>
</li>
<li><a href="#appendix">Appendix</a>
<ul class="sectlevel2">
<li><a href="#glossary">Glossary</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div class="main-header">
<div class="main-header__left">
<img class="main-header__left-image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTg1Ljk2OCw4Ni4yNTNWNzIuNDM4SDc0LjIzMXYxMy44MTVoLTguNDJMNDcuNjQ3LDQwLjAyNWwzMS42NjIsMTYuODk0djE1LjQ2NmgyVjU3Ljk4NWw2LjAzNCwzLjIybDQuMjg2LTguMDMyICBMMzAuMDM0LDIwLjMwOGwzLjYxMy02LjczMUwyNi4wNCw0Ljc1MWwtMC43NTgsMC42NjdjLTAuMzMxLDAuMjkxLTguMTE3LDcuMjEyLTEwLjYxNSwxNS42MyAgYy0zLjMzOSwxMS4yNTYsMC45NjMsMTkuMTYzLDEuODg5LDIwLjY3OXYzOS42NThoLTIuNzcxdjJoMi43NzF2Mi44NjhINS4xdjJoOTB2LTJIODUuOTY4eiBNNzYuMjMxLDc0LjQzOGg3LjczNnYxMS44MTVoLTcuNzM2ICBWNzQuNDM4eiBNNDMuMzcsNjcuNzU3aDExLjQ2N0w0My4zNyw3Ny44OTlWNjcuNzU3eiBNNTYuNzcyLDY4LjcxNWw0LjA4NywxMC40MDNINDUuMDFMNTYuNzcyLDY4LjcxNXogTTQ0LjM0OCw2NS43NTdsNy4zNDEtOS45NzkgIGwzLjkyMSw5Ljk3OUg0NC4zNDh6IE00My4zNyw2My43MDl2LTguNzNoNi40MjJMNDMuMzcsNjMuNzA5eiBNNDMuMzcsODEuMTE4aDE4LjI3NWwyLjAxOCw1LjEzNUg0My4zN1Y4MS4xMTh6IE01MC41ODksNTIuOTc5ICBINDMuMzdWMzcuNzQybDEuNTU5LDAuODMyTDUwLjU4OSw1Mi45Nzl6IE04OC45MjQsNTMuOTk1TDg2LjUyMSw1OC41TDI2LjY3NCwyNi41NjhsMi40MTUtNC40OTlMODguOTI0LDUzLjk5NXogTTI1Ljg2Niw3LjYxMiAgbDUuMzY5LDYuMjNsLTEuNzUxLDMuMjYybC04LjE0OS00LjM1MkMyMy4xMjQsMTAuMzgyLDI0LjkwMiw4LjU0OSwyNS44NjYsNy42MTJ6IE0yMC4xNjQsMTQuMzkzbDguMzc1LDQuNDczbC0wLjI2OCwwLjUgIGwtMC4wNTMtMC4wMjlsLTQuMjg2LDguMDMybDAuMDMzLDAuMDE4bC0wLjI3MSwwLjUwNWwtNy42NTYtNC4wODhjMC4xNTItMC43MTYsMC4zMjYtMS40NDIsMC41NDgtMi4xODkgIEMxNy4zNTUsMTkuMDIxLDE4LjcwMywxNi41NDksMjAuMTY0LDE0LjM5M3ogTTE1LjY3MywyNS44NzdsNy4wNzQsMy43NzdsLTUuMTkzLDkuNjc0QzE2LjQ3MywzNy4wMDUsMTQuODI0LDMyLjIwNywxNS42NzMsMjUuODc3eiAgIE0xOC41NTYsODMuMzg1aDIuODkzdi0yaC0yLjg5M1Y0MS42OTFsNy4xNzMtMTMuMzYybDE1LjY0Miw4LjM0NnY0OS41NzhIMTguNTU2VjgzLjM4NXoiPjwvcGF0aD48cmVjdCB4PSIxMi4yNTkiIHk9IjkxLjM2NyIgd2lkdGg9IjQ1LjUyMSIgaGVpZ2h0PSIyIj48L3JlY3Q+PHJlY3QgeD0iNjEuODU5IiB5PSI5MS4zNjciIHdpZHRoPSIyNi4zNCIgaGVpZ2h0PSIyIj48L3JlY3Q+PC9zdmc+">
<a href="https://www.oiljs.org" class="main-header__left-text-a">oil.js</a> <span class="main-header__left-text-b">docs</span>
</div>
<div class="main-header__right">
<div class="main-header__version">
<div class="paragraph">
<p>1.3.1-alpha-RELEASE</p>
</div>
</div>
<div class="main-header__call-to-action">
<a class="menu-button xs-only" href="https://sandbox.oiljs.org/" target="_blank" alt="sandbox"><i class="fas fa-chalkboard-teacher"></i></a>
<a class="menu-button xs-only" href="https://github.com/as-ideas/oil" target="_blank" alt="github"><i class="fab fa-github"></i></a>
<a class="menu-button blue-design desktop-only" href="https://sandbox.oiljs.org/" target="_blank">Sandbox</a>
<a class="menu-button desktop-only" href="https://github.com/as-ideas/oil" target="_blank">Github</a>
</div>
</div>
</div>
<div class="sect1">
<h2 id="introduction"><a class="anchor" href="#introduction"></a>Introduction</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="about-oil-js"><a class="anchor" href="#about-oil-js"></a>About oil.js</h3>
<div class="paragraph">
<p>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.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Data privacy opt-in overlay for all users of services offered by various Axel Springer brands and/or units</p>
</li>
<li>
<p>Local opt-in (called "Site Opt-In", SOI) as well as group-based cross-company opt-in (called "Power Opt-In", POI)</p>
</li>
<li>
<p>Integration and hosting on Tealium as well as the option to run it standalone.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>The Opt-In Layer (OIL) is an offical <a href="http://advertisingconsent.eu/iab-europe-transparency-consent-framework-list-of-registered-cmps/">Consent Management Provider (CMP)</a> in accordance with the IAB Europe "Transparency & Consent Framework".</p>
</div>
</div>
<div class="sect2">
<h3 id="technical-quality-goals"><a class="anchor" href="#technical-quality-goals"></a>Technical Quality Goals</h3>
<div class="ulist">
<ul>
<li>
<p>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:</p>
<div class="ulist">
<ul>
<li>
<p>Chrome 14 - Latest</p>
</li>
<li>
<p>IE 9 - Latest</p>
</li>
<li>
<p>Firefox 9 - Latest</p>
</li>
<li>
<p>Safari 6 - Latest</p>
</li>
<li>
<p>Opera 12</p>
</li>
<li>
<p>Apple iOS 5.1 - Latest</p>
</li>
<li>
<p>Android 4.4.4 - Latest</p>
</li>
</ul>
</div>
</li>
<li>
<p>Continously integrated and delivered</p>
</li>
<li>
<p>Modular and maintainable solution</p>
</li>
</ul>
</div>
</div>
<div class="sect2">
<h3 id="features"><a class="anchor" href="#features"></a>Features</h3>
<div class="ulist">
<ul>
<li>
<p>Customisable UI and text with audit-proof versioning</p>
</li>
<li>
<p>Fully configurable (cookie categories, timeouts, …​)</p>
</li>
<li>
<p>Easy AB-Testing with extensive events for each user interaction</p>
</li>
<li>
<p>AB-Tested in different brand specific designs with 250k unique users</p>
</li>
<li>
<p>Supports IAB Europe Standard and additionally custom calls</p>
</li>
<li>
<p>Supports Group-Opt-In</p>
</li>
<li>
<p>Works with 99,9% of all browsers (in Germany) & Works with all devices and all resolutions</p>
</li>
<li>
<p>Optimised for high performance and low latency (built to be loaded first)</p>
</li>
<li>
<p>Open source</p>
</li>
<li>
<p>Tested in the cloud on all possible devices</p>
</li>
<li>
<p>Tealium integration and additional features via Tealium like reporting</p>
</li>
<li>
<p>Redirect-Fallback for some older browsers and even for disabled 3rd party cookies in Safari</p>
</li>
<li>
<p>High quality code with high test coverage and static code analysis</p>
</li>
<li>
<p>Loads with low latency and asynchronously for different parts</p>
</li>
<li>
<p>Happy path loads only ~20k (subject to change and further optimization) of gzipped JavaScript</p>
</li>
<li>
<p>Easy to implement with open documentation and examples, including dev kit</p>
</li>
</ul>
</div>
</div>
<div class="sect2">
<h3 id="solution-strategy"><a class="anchor" href="#solution-strategy"></a>Solution Strategy</h3>
<div class="paragraph">
<p>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.</p>
</div>
<div class="paragraph">
<p>The Opt-In Layer (OIL) is our solution for these requirements consisting of three parts:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>A <strong>subscriber</strong> part, which adds the opt-in Layer to the host pages DOM and asks the user to opt-in.</p>
</li>
<li>
<p>A <strong>hub</strong> 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.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>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.</p>
</div>
</div>
<div class="sect2">
<h3 id="why-is-there-no-native-app-support"><a class="anchor" href="#why-is-there-no-native-app-support"></a>Why is there no native app support?</h3>
<div class="paragraph">
<p>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.</p>
</div>
<div class="paragraph">
<p>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</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="quickstart"><a class="anchor" href="#quickstart"></a>Quickstart</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="how-to-implement-oil-on-your-site"><a class="anchor" href="#how-to-implement-oil-on-your-site"></a>How to implement OIL on your site</h3>
<div class="paragraph">
<p>Basic implementation requires two steps:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Include oil.js configuration on your site</p>
</li>
<li>
<p>Add two oil.js code snippets to your html</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Optionally you can:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="#styling-guide">Style</a> your layer according to your style guide.</p>
</li>
<li>
<p>Create your own <a href="#texts-locale-object">language pack</a>.</p>
</li>
</ul>
</div>
</div>
<div class="sect2">
<h3 id="including-oil-js-sources-on-your-site"><a class="anchor" href="#including-oil-js-sources-on-your-site"></a>Including oil.js sources on your site</h3>
<div class="ulist">
<ul>
<li>
<p><a href="#self-hosted-solution">Self-hosted solution</a></p>
</li>
<li>
<p><a href="#delivery-through-the-unpkg-com-cdn">Delivery through the unpkg.com cdn</a></p>
</li>
<li>
<p><a href="#delivery-through-tealium">Delivery through Tealium</a></p>
</li>
</ul>
</div>
<div class="sect3">
<h4 id="self-hosted-solution"><a class="anchor" href="#self-hosted-solution"></a>Self-hosted solution</h4>
<div class="paragraph">
<p>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.</p>
</div>
<div class="paragraph">
<p>You can download all the files for a release from <a href="https://oil.axelspringer.com/release" class="bare">https://oil.axelspringer.com/release</a>. Upload a release folder’s contents to your server and continue with <a href="#integrate-oil">Integrate OIL</a>.</p>
</div>
</div>
<div class="sect3">
<h4 id="delivery-through-the-unpkg-com-cdn"><a class="anchor" href="#delivery-through-the-unpkg-com-cdn"></a>Delivery through the unpkg.com cdn</h4>
<div class="paragraph">
<p>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 <code>unpkg.com</code> cdn. See <a href="#integrate-oil">Integrate OIL</a>.</p>
</div>
</div>
<div class="sect3">
<h4 id="delivery-through-tealium"><a class="anchor" href="#delivery-through-tealium"></a>Delivery through Tealium</h4>
<div class="paragraph">
<p>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 <a href="#oil-and-tealium">OIL and Tealium</a>.</p>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Make sure your page doesn’t track the user in its default state.</p>
</li>
<li>
<p>If possible, use Tealium for all tracking activities and take advantage of the loading rules support that OIL provides (see section <a href="#oil-and-tealium">OIL and Tealium</a> for details).</p>
</li>
<li>
<p>Listen to OIL events for loading non-Tealium tags, after the user opted in.</p>
</li>
<li>
<p>Use the <a href="#soft-blocking-of-dom-elements">soft-blocking feature</a> for tags that OIL provides.</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="release-files"><a class="anchor" href="#release-files"></a>Release files</h4>
<div class="paragraph">
<p>For reference: these are the files that belong to a release.</p>
</div>
<div class="ulist">
<ul>
<li>
<p><code>oil.1.3.1-alpha-RELEASE.min.js</code> - This is the file you will need to reference in your website - see below.</p>
</li>
<li>
<p><code>hub.1.3.1-alpha-RELEASE.min.js</code> - This is the file you will need for the power opt-in feature. See sections <a href="#poi-power-opt-in">POI – Power Opt-In</a> for details.</p>
</li>
<li>
<p><code>hub.html</code> - This is the file you will need for the power opt-in feature.</p>
</li>
<li>
<p><code>poi-lists</code> - A directory that is needed for the power opt-in feature. It contains JSON files defining POI groups. See sections <a href="#poi-power-opt-in">POI – Power Opt-In</a> and <a href="#poi-list">POI-List</a> for details.</p>
</li>
<li>
<p>Chunks, beginning with numbers - they will be loaded asynchronously and you don’t need to do anything with them.</p>
<div class="ulist">
<ul>
<li>
<p><code>0.1.3.1-alpha-RELEASE.chunk.js</code></p>
</li>
<li>
<p><code>X.1.3.1-alpha-RELEASE.chunk.js</code></p>
</li>
</ul>
</div>
</li>
<li>
<p><code>oildevkit.1.3.1-alpha-RELEASE.min.js</code> - This is the file you will need to use the small OIL SDK. See section <a href="#oil-sdk">OIL SDK</a> for details.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>The version number is part of <code>.js</code> files because updated versions of the scripts will be released using a different filename hence we’ll never alter an existing version.</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="integrate-oil"><a class="anchor" href="#integrate-oil"></a>Integrate OIL</h3>
<div class="paragraph">
<p>To integrate your self-hosted OIL with your website, add the following code snippets to your html:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><script>
/*! 1.3.1-alpha-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.1-alpha/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></code></pre>
</div>
</div>
<div class="sect3">
<h4 id="self-hosted-solution-2"><a class="anchor" href="#self-hosted-solution-2"></a>Self-hosted solution</h4>
<div class="paragraph">
<p>For a self-hosted release, load the javascript from your site:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><script src="https://<your-host>/<path-to-oil>/oil.1.3.1-alpha-RELEASE.min.js" type="text/javascript"></script></code></pre>
</div>
</div>
<div class="paragraph">
<p>Please make sure you’re working with the <strong>latest version</strong> available. Check <a href="https://oil.axelspringer.com/release" class="bare">https://oil.axelspringer.com/release</a> for further updates. Choose the latest version or the version found in this documentation.</p>
</div>
</div>
<div class="sect3">
<h4 id="delivery-through-unpkg-com"><a class="anchor" href="#delivery-through-unpkg-com"></a>Delivery through unpkg.com</h4>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><script src="//unpkg.com/@ideasio/oil.js/release/current/oil.min.js" type="text/javascript"></script></code></pre>
</div>
</div>
<div class="paragraph">
<p>This unpkg.com URL always points to the latest version. See unpkg.com help to lock your integration to a specified release.</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="configure-oil"><a class="anchor" href="#configure-oil"></a>Configure OIL</h3>
<div class="paragraph">
<p>To ensure that your self-hosted OIL can find all its necessary scripts you must define the <code>publicPath</code> parameter in your <a href="#configuring-oil">oil configuration</a>.
It specifies the server path from which all chunks and resources will be loaded. This is a minimal configuration tag:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><script id="oil-configuration" type="application/configuration">
{
"publicPath": "//<your-host>/<path-to-oil>",
"locale_url": "//<your-host>/<path-to-locale>/myLocale.json"
}
</script></code></pre>
</div>
</div>
<div class="sect3">
<h4 id="delivery-through-unpkg-com-2"><a class="anchor" href="#delivery-through-unpkg-com-2"></a>Delivery through unpkg.com</h4>
<div class="paragraph">
<p>Note that you will have to add your own locale to the configuration block. See <a href="#texts-locale-object">Texts & Locale Object</a> section for details.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="oil-sdk"><a class="anchor" href="#oil-sdk"></a>OIL SDK</h3>
<div class="paragraph">
<p>This is a like a drop-in to add a small sdk to any site, which has oil included.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="src/images/dev-kit-01.png" alt="dev kit 01">
</div>
</div>
<div class="imageblock">
<div class="content">
<img src="src/images/dev-kit-02.png" alt="dev kit 02">
</div>
</div>
<div class="paragraph">
<p>Add this to your favorites and open the link on the website you want it to be included:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">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.1-alpha-RELEASE.min.js';(d.head || d.body).appendChild(s)}());</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="configuring-oil"><a class="anchor" href="#configuring-oil"></a>Configuring OIL</h2>
<div class="sectionbody">
<div class="paragraph">
<p>OIL is configured using a simple JSON configuration block that you put in the upper part of your html.</p>
</div>
<div class="sect2">
<h3 id="the-configuration-block"><a class="anchor" href="#the-configuration-block"></a>The Configuration Block</h3>
<div class="paragraph">
<p>Minimum configuration requires the parameters <code>config_version</code>, <code>publicPath</code> and <code>locale</code> or <code>locale_url</code>, so a minimal configuration block would look like this:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json"><script id="oil-configuration" type="application/configuration">
{
"config_version": 1,
"publicPath": "my.server",
"locale_url": "my.server/myLocale.json"
}
</script></code></pre>
</div>
</div>
<div class="paragraph">
<p>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.</p>
</div>
<div class="sect3">
<h4 id="locale_url-or-locale"><a class="anchor" href="#locale_url-or-locale"></a>locale_url or locale?</h4>
<div class="paragraph">
<p>There are two ways to pass locale configuration to your OIL instance. One is the
configuration parameter <code>locale</code> which is expected to be an object, the other is <code>locale_url</code> 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.</p>
</div>
<div class="paragraph">
<p><strong>See the <a href="#functional-configuration-parameters">functional configuration parameters</a> section for information on publicPath, locale_url, locale and all the other configuration parameters.</strong></p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="power-opt-in-poi-or-site-opt-in-soi"><a class="anchor" href="#power-opt-in-poi-or-site-opt-in-soi"></a>Power Opt-In (POI) or Site Opt-In (SOI)?</h3>
<div class="paragraph">
<p>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 <em>Site Opt-In</em> aka SOI and the above example is enough to make OIL work on your site.</p>
</div>
<div class="paragraph">
<p>What if you want to share consent across websites? That’s when you need <em>Power Opt-In</em> aka POI.</p>
</div>
<div class="sect3">
<h4 id="poi-power-opt-in"><a class="anchor" href="#poi-power-opt-in"></a>POI – Power Opt-In</h4>
<div class="paragraph">
<p>To instantiate oil.js with POI activated, make up a name for your company group (in the example below <code>MyGroupName</code> is used), then follow these steps:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Setup a server where the consent cookie is stored. For example <code>any.domain.com</code>.</p>
</li>
<li>
<p>Upload <code>hub.html</code> from the <code>./release</code> folder, resulting in <code><a href="https://any.domain.com/hub.html" class="bare">https://any.domain.com/hub.html</a></code></p>
</li>
<li>
<p>Create a <code>MyGroupName.json</code> and upload it in a subfolder named <code>poi-lists</code> to your server, resulting in <code><a href="https://any.domain.com/poi-lists/MyGroupName.json" class="bare">https://any.domain.com/poi-lists/MyGroupName.json</a></code>. Note: The file name must be the same as the value passed in <code>poi_group_name</code>. For an example see <a href="#poi-list">POI-List section</a>. Note: Enable CORS for the <code>poi-lists</code> directory and its contained files.</p>
</li>
<li>
<p>Make sure the <code>MyGroupName.json</code> is served with the right CORS-headers so that your websites are allowed to read it.</p>
</li>
<li>
<p>Add the required parameters to each website configuration that should share the consent cookie:</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json"> "poi_activate_poi": true,
"poi_hub_origin": "//any.domain.com",
"poi_hub_path": "/hub.html",
"poi_group_name": "MyGroupName"</code></pre>
</div>
</div>
<div class="paragraph">
<p>A single consent cookie will now be shared across sites that use the same <code>poi_hub_origin</code> and <code>poi_group_name</code> values. You can have multiple groups on the same domain.</p>
</div>
<div class="paragraph">
<p>Remember you are legally obliged to list all websites/companies belonging to one group.</p>
</div>
<div class="paragraph">
<p>Example minimal POI configuration:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json"><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></code></pre>
</div>
</div>
</div>
<div class="sect3">
<h4 id="poi-list"><a class="anchor" href="#poi-list"></a>POI-List</h4>
<div class="paragraph">
<p>A POI-List file must be a json containing an object with a single property <code>companyList</code>. CompanyList must be an array of company names.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
"companyList": [
"Foo Comp",
"Bar Inc."
]
}</code></pre>
</div>
</div>
<div class="sect4">
<h5 id="group-wide-vendor-whitelist-and-vendor-blacklist"><a class="anchor" href="#group-wide-vendor-whitelist-and-vendor-blacklist"></a>Group-wide vendor whitelist and vendor blacklist</h5>
<div class="paragraph">
<p>Equal in function to the <code>iabVendorWhitelist</code> and <code>iabVendorBlacklist</code> configuration parameters you can limit vendor consent for every site that’s part of your group.</p>
</div>
<div class="paragraph">
<p>To do this, you want to extend your POI-List with either one of those elements:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
"companyList": [
"Super Comp"
],
"iabVendorWhitelist": [1,2,3],
"iabVendorBlacklist": [9,10]
}</code></pre>
</div>
</div>
<div class="paragraph">
<p><strong>The values from the group-wide list override the values defined in a single site’s configuration.</strong> More information on what these parameters do, see the <a href="#blacklisting-and-whitelisting">Blacklisting and Whitelisting</a> section.</p>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="configuration-parameters"><a class="anchor" href="#configuration-parameters"></a>Configuration Parameters</h3>
<div class="paragraph">
<p>This is a full list of configurable options.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
<col style="width: 20%;">
<col style="width: 60%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Config Parameter</th>
<th class="tableblock halign-left valign-top">Description</th>
<th class="tableblock halign-left valign-top">Default Setting</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">advanced_settings</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">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.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">advanced_settings_purposes_default</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">All purposes in the advanced settings layer should be activated by default</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">config_version</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">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.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">None</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">cookie_expires_in_days</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Value in days until the domain cookie used to save the users decision in days</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">31</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">cpc_type</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">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 <a href="#Full Label Configuration">[Full Label Configuration]</a> for details.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">standard</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">customPurposes</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Array of custom purposes defined by publisher. IDs for custom purposes may range from 25-88.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">None</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">customVendorListUrl</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Custom vendor list ('non IAB vendors') to use, will be loaded at the same time as the iabVendorList.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">None</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">default_to_optin</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Signal opt-in to vendors while still displaying the Opt-In layer to the end user</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">gdpr_applies_globally</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Flag to indicate that publisher is from the EU, thus showing the OIL layer to every user. The flag is passed to vendors.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">iabVendorBlacklist</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Array of vendor IDs to exclude from consent. <a href="#blacklisting-and-whitelisting">Details here</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">None</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">iabVendorListUrl</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Vendorlist to use</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://vendorlist.consensu.org/vendorlist.json" class="bare">https://vendorlist.consensu.org/vendorlist.json</a></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">iabVendorWhitelist</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Array of vendor IDs to include in consent. If it is set, values in <code>iabVendorBlacklist</code> are ignored. <a href="#blacklisting-and-whitelisting">Details here</a>. When white- or blacklisting you might also be interested in the <code>show_limited_vendors_only</code> parameter.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">None</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="#texts-locale-object">locale</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">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. <a href="#locale-object">See here for details</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">None</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">locale_url</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">As an alternative to passing a locale object, set this to a JSON file with the locale configuration. See <a href="https://github.com/as-ideas/oil/blob/master/test/fixtures/config/deDE_01_locale.json">See here for an example file</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">None</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">persist_min_tracking</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">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.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">true</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">poi_activate_poi</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Activates or deactivates Power Opt-In.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">poi_group_name</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">POI group name. POI only affects those sites with the same group name (mandatory if POI is activated).</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">None</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">poi_hub_origin</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The origin of the hub.js installation</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code><a href="https://unpkg.com" class="bare">https://unpkg.com</a></code></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">poi_hub_path</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The path to the hub.html installation on the origin, if any.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code>/@ideasio/oil.js@1.3.1-alpha-RELEASE/release/current/hub.html</code></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="#preview_mode">preview_mode</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">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.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">publicPath</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The server path from which all chunks and resources will be loaded. You should upload all released files there and configure it.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><code><a href="https://unpkg.com/@ideasio/oil.js@1.3.1-alpha-RELEASE/release/current/" class="bare">https://unpkg.com/@ideasio/oil.js@1.3.1-alpha-RELEASE/release/current/</a></code></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">require_optout_confirm</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Flag to activate the opt-out confirmation dialog within Cookie Preference Center. If set to <code>true</code>, addition label definitions (for labels with prefix <code>label_cpc_purpose_optout_confirm</code>) are required. See section <a href="#language-label-configuration">Language label configuration</a> for details.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">show_limited_vendors_only</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Flag to only show the vendors limited by <code>iabVendorWhitelist</code> or <code>iabVendorBlacklist</code> in the CPC</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">theme</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The theme for the layer. By default there are two themes and size modifier themes, <code>dark</code> and <code>light</code> as well as <code>small dark</code> and <code>small light</code>. Themes currently work only as an additional css class. To change the style or theme, look into the <a href="#styling-guide">styling guide</a>.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">light</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="#auto-hiding-the-layer-timeout">timeout</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Value in seconds until the opt-in layer will be automatically hidden. 0 or lower deactivates auto-hide.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">60</p></td>
</tr>
</tbody>
</table>
</div>
<div class="sect2">
<h3 id="texts-locale-object"><a class="anchor" href="#texts-locale-object"></a>Texts & Locale Object</h3>
<div class="paragraph">
<p>The locale object must contain at least "localeId" and "version" along with the localized texts in the <code>texts</code> 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:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Store your locale object as 'locale' in the oil.js configuration (lowest priority)</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json"><script id="oil-configuration" type="application/configuration">
{
"locale": {
"localeId": "enEN_01",
"version": 1,
"texts": {
"label_intro_heading": "Insider, Inc."
}
}
}
</script></code></pre>
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>Write your locale object directly to AS_OIL.CONFIG.LOCALE (middle priority)</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript"><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></code></pre>
</div>
</div>
<div class="ulist">
<ul>
<li>
<p>Return a JSON object from your server through locale_url configuration parameter (highest priority)</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json"><script id="oil-configuration" type="application/configuration">
{
"timeout": -1,
"locale_url": "//www.yoursite.com/locale.json"
}
</script></code></pre>
</div>
</div>
<div class="paragraph">
<p>The recommended way is to keep the standard locale definitions.</p>
</div>
<div class="sect3">
<h4 id="language-label-configuration"><a class="anchor" href="#language-label-configuration"></a>Language label configuration</h4>
<div class="paragraph">
<p>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 <code>texts</code> object of the <code>locale</code> config parameter.
The following table lists all label configuration parameters:</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
<col style="width: 16.6666%;">
<col style="width: 33.3333%;">
<col style="width: 50.0001%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Config Parameter</th>
<th class="tableblock halign-left valign-top">Description</th>
<th class="tableblock halign-left valign-top">Example Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_intro_heading</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The headline of the layer</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">We use cookies and other technologies</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_intro</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The text of the layer</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">We’re using cookies, please confirm!</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_button_yes</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The label of the consent button</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Yes</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_button_back</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The label of the back button in cookie preference center (CPC)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Back</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_button_advanced_settings</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The text of the link to the cookie preference center</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">More information</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_heading</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The headline of the cookie preference center</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Cookie Preference Center</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_text</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The intro text of the cookie preference center</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Please select a setting:</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_activate_all</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The label of the button that activates all purposes</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Activate all</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_deactivate_all</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The label of the button that deactivates all purposes</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Deactivate all</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_purpose_desc</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The headline of the purposes section (standard CPC) or its intro text (Tab-based CPC)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Purposes</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_purpose_xx_text</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The name of purpose with id <code>xx</code> (e.g. <code>01</code>). If undefined the name is taken from global vendor list or custom purpose definition.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Information storage an access</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_purpose_xx_desc</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The description of purpose with id <code>xx</code> (e.g. <code>01</code>). If undefined the description is taken from global vendor list or custom purpose definition.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">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.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_purpose_xx_features</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">A list of texts describing the features of purpose with id <code>xx</code> (e.g. <code>01</code>). Only used in tab-based CPC. If undefined nothing is shown.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">["Storage of information.", "Access to information"]</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_purpose_optout_confirm_heading</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The headline of the opt-out confirmation dialog.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Are you really sure?</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_purpose_optout_confirm_text</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The text of the opt-out confirmation dialog.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">This setting will significantly affect your experience on our website.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_purpose_optout_confirm_proceed</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The confirmation button label of the opt-out confirmation dialog.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Continue</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_cpc_purpose_optout_confirm_cancel</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The cancel button label of the opt-out confirmation dialog.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Cancel</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_nocookie_head</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The headline that is shown if user has disallowed all cookies.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">No Cookies allowed.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_nocookie_text</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The text that is shown if user has disallowed all cookies.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Please enable cookies!</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_poi_group_list_heading</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Headline for POI group section</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Company units</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_poi_group_list_text</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Text for POI group section</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Here is a list of company units</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">label_third_party</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The headline of the vendors section in CPC</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Third parties</p></td>
</tr>
</tbody>
</table>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<div class="title">Important</div>
</td>
<td class="content">
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.
</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
</div>
<div class="sect3">
<h4 id="example-for-complete-texts-object"><a class="anchor" href="#example-for-complete-texts-object"></a>Example for complete texts object</h4>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">{
"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",
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>Labels starting with <code>label_cpc_purpose_N</code> are automatically derived from the vendor list if missing from your locale object.</p>
</div>
<div class="paragraph">
<p>Example Screenshot:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="src/images/oil-labels-intro.png" alt="oil labels intro">
</div>
</div>
</div>
<div class="sect3">
<h4 id="special-css-classes-within-labels"><a class="anchor" href="#special-css-classes-within-labels"></a>Special CSS classes within labels</h4>
<div class="paragraph">
<p>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:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>as-js-optin</strong>: Will trigger an opt-in with SOI/POI depending on the current configuration.</p>
</li>
<li>
<p><strong>as-js-optin-poi</strong>: Will trigger an opt-in as POI.</p>
</li>
<li>
<p><strong>as-js-companyList</strong>: Will trigger the layer to show the company list.</p>
</li>
<li>
<p><strong>as-js-thirdPartyList</strong>: Will trigger the layer to show the 3rd party list.</p>
</li>
<li>
<p><strong>as-js-advanced-settings</strong>: Will trigger the layer to show the CPC (cookie preference center / advanced settings).</p>
</li>
<li>
<p><strong>as-js-oilback</strong>: Will trigger the layer to go back to the first view.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>For example adding the class <code>as-js-companyList</code> will add a click handler, which will show the company list (group list):</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">"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> ...",</code></pre>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="preview_mode"><a class="anchor" href="#preview_mode"></a>preview_mode</h3>
<div class="paragraph">
<p>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.</p>
</div>
<div class="paragraph">
<p>Run this in the console to show the OIL layer on your client:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">window.AS_OIL.previewModeOn();</code></pre>
</div>
</div>
<div class="paragraph">
<p>To delete the cookie, run:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">window.AS_OIL.previewModeOff();</code></pre>
</div>
</div>
<div class="paragraph">
<p>When preview_mode is not set in configuration and no consent cookie is found, the layer will show for the visitor.</p>
</div>
</div>
<div class="sect2">
<h3 id="blacklisting-and-whitelisting"><a class="anchor" href="#blacklisting-and-whitelisting"></a>Blacklisting and Whitelisting</h3>
<div class="paragraph">
<p>With <strong>iabVendorWhitelist</strong> and <strong>iabVendorBlacklist</strong> 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.</p>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="title">Default result from getVendorConsents without whitelist/blacklist</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">{
"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
}
}</code></pre>
</div>
</div>
<div class="paragraph">
<p><strong>Whitelist</strong>: The whitelist contains IDs 3, 4, 5 in form of the configuration with <code>"iabVendorWhitelist": [3, 4, 5]</code>. If the user has given his consent by clicking on "OK" only vendors on the whitelist will be true.</p>
</div>
<div class="listingblock">
<div class="title">Result from getVendorConsents with whitelisting vendor IDs 3, 4, 5</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">{
"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
}
}</code></pre>
</div>
</div>
<div class="paragraph">
<p><strong>Blacklist</strong>: The blacklist contains IDs 6, 7, 8 in form of the configuration with <code>"iabVendorBlacklist": [6, 7, 8]</code>. If the user has given his consent by clicking on "OK" only vendors NOT on the blacklist will be true.</p>
</div>
<div class="listingblock">
<div class="title">Result from getVendorConsents with blacklisting vendor IDs 6, 7, 8</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">{
"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
}
}</code></pre>
</div>
</div>
<div class="sect3">
<h4 id="auto-hiding-the-layer-timeout"><a class="anchor" href="#auto-hiding-the-layer-timeout"></a>Auto-Hiding the layer (timeout)</h4>
<div class="paragraph">
<p>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 <a href="#config-timeout">configuration</a> 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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">const defaultTimeoutInSeconds = 60;</code></pre>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="custom-vendors-non-iab-vendors"><a class="anchor" href="#custom-vendors-non-iab-vendors"></a>Custom vendors (non IAB vendors)</h3>
<div class="paragraph">
<p>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 <a href="https://vendorlist.consensu.org/vendorlist.json" class="bare">https://vendorlist.consensu.org/vendorlist.json</a>). You need to specify a unique custom vendor id and decide for the purposes required by the custom vendor on your own.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Please keep in mind that every change to the custom vendor list should result in an increase in the custom vendor list version.</p>
</li>
<li>
<p>Enable CORS for the custom vendor list, if you host it on a different domain, e.g. for usage with POI.</p>
</li>
</ul>
</div>
<div class="listingblock">
<div class="title">OIL configuration parameter to include a custom vendor list from a URL</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
"customVendorListUrl": "https://yourdomain.com/customvendorlist.json"
}</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">Example for a custom vendor list</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
"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!')"
}
]
}</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="iab-europe-transparency-consent-framework"><a class="anchor" href="#iab-europe-transparency-consent-framework"></a>IAB Europe "Transparency & Consent Framework"</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The <a href="https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework">IAB specification</a> 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 <a href="http://advertisingconsent.eu/" class="bare">http://advertisingconsent.eu/</a></p>
</div>
<div class="paragraph">
<p>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.</p>
</div>
<div class="sect2">
<h3 id="js-api"><a class="anchor" href="#js-api"></a>JS-API</h3>
<div class="paragraph">
<p>This API has to support the following functionality. All methods are strings and can be called over the window.__cmp function.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><script type="text/javascript">
__cmp('getVendorConsents', null, (result) => console.info(result));
</script></code></pre>
</div>
</div>
<div class="sect3">
<h4 id="getvendorconsents"><a class="anchor" href="#getvendorconsents"></a>getVendorConsents</h4>
<div class="paragraph">
<p><strong>Parameter:</strong> vendorIds (Uint16Array)</p>
</div>
<div class="paragraph">
<p><strong>Callback signature:</strong> Callback( VendorConsents object, success: boolean)</p>
</div>
<div class="paragraph">
<p>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.</p>
</div>
</div>
<div class="sect3">
<h4 id="getconsentdata"><a class="anchor" href="#getconsentdata"></a>getConsentData</h4>
<div class="paragraph">
<p><strong>Parameter:</strong> consentStringVersion (string)</p>
</div>
<div class="paragraph">
<p><strong>Callback signature:</strong> Callback(VendorConsentData object, success: boolean)</p>
</div>
<div class="paragraph">
<p>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.</p>
</div>
</div>
<div class="sect3">
<h4 id="ping"><a class="anchor" href="#ping"></a>ping</h4>
<div class="paragraph">
<p><strong>Callback signature:</strong> Callback(PingReturn object, success: boolean)</p>
</div>
<div class="paragraph">
<p>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).</p>
</div>
</div>
<div class="sect3">
<h4 id="optional-call-getpublisherconsents"><a class="anchor" href="#optional-call-getpublisherconsents"></a>Optional call: getPublisherConsents</h4>
<div class="paragraph">
<p><strong>Parameter:</strong> purposeIds: Uint16Array</p>
</div>
<div class="paragraph">
<p><strong>Callback signature:</strong> Callback( PublisherConsents object, success: boolean)</p>
</div>
<div class="paragraph">
<p>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.</p>
</div>
</div>
<div class="sect3">
<h4 id="optional-call-getvendorlist"><a class="anchor" href="#optional-call-getvendorlist"></a>Optional call: getVendorList</h4>
<div class="paragraph">
<p><strong>Parameter:</strong> vendorListVersion (scalar)</p>
</div>
<div class="paragraph">
<p><strong>Callback signature:</strong> Callback(GlobalVendorList object, success:boolean)</p>
</div>
<div class="paragraph">
<p>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.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="oil-api"><a class="anchor" href="#oil-api"></a>OIL API</h2>
<div class="sectionbody">
<div class="paragraph">
<p>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.</p>
</div>
<div class="sect2">
<h3 id="test-deployment-and-preview-mode"><a class="anchor" href="#test-deployment-and-preview-mode"></a>Test Deployment and Preview Mode</h3>
<div class="paragraph">
<p>The preview mode is useful for testing OIL in a live environment without making it available to your end-users.</p>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">window.AS_OIL.previewModeOn();
window.AS_OIL.previewModeOff();</code></pre>
</div>
</div>
<div class="paragraph">
<p>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.</p>
</div>
</div>
<div class="sect2">
<h3 id="oil-verbose-logging"><a class="anchor" href="#oil-verbose-logging"></a>OIL Verbose Logging</h3>
<div class="paragraph">
<p>OIL will show no logs, except in preview mode or verbose mode.</p>
</div>
<div class="paragraph">
<p>Run the following commands on the console of your browser to switch verbose logging on and off:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">window.AS_OIL.verboseModeOn();
window.AS_OIL.verboseModeOff();</code></pre>
</div>
</div>
<div class="paragraph">
<p>Debug mode can be turned on at any time, whereas the similar preview mode can only be enabled in the configuration, please see above.</p>
</div>
<div class="paragraph">
<p>Please note that verbose logging can only be activated for your own browser, all other users won’t see those logs.</p>
</div>
</div>
<div class="sect2">
<h3 id="oil-js-calls"><a class="anchor" href="#oil-js-calls"></a>OIL JS-Calls</h3>
<table class="tableblock frame-all grid-all spread">
<colgroup>
<col style="width: 25%;">
<col style="width: 75%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">API Call</th>
<th class="tableblock halign-left valign-top">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">window.AS_OIL.triggerOptIn();</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The user will opted in. It’s the same behaviour as when the user is clicking Accept on the layer.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">window.AS_OIL.triggerOptOut();</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">OIL will remove all cookies if triggered and therefore opt-out the user of everything, even POI.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">window.AS_OIL.reload();</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">OIL will reload the configuration from the host’s website.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">window.AS_OIL.showPreferenceCenter();</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">OIL will inject the Cookie Preference Center into your website. Please see "OIL CPC API" section.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">window.AS_OIL.applyGDPR();</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">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.</p></td>
</tr>
</tbody>
</table>
</div>
<div class="sect2">
<h3 id="oil-events"><a class="anchor" href="#oil-events"></a>OIL Events</h3>
<div class="paragraph">
<p>OIL is currently emitting the following events:</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
<col style="width: 25%;">
<col style="width: 75%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Event name</th>
<th class="tableblock halign-left valign-top">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_optin_done</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">When a users selects opt-in.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_as_cpc_privacy_selected</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">When a user used the cpc and clicked opt-in.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_click_advanced_settings</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">When a users clicks the advanced settings button/link.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_click_back_to_main</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">When a user clicks the back link from the advanced settings page.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_no_cookies_allowed</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">When a users has no cookies allowed and the no cookies layer is displayed</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_has_optedin</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">On every page reload, when the user has opted_in previously (OIL should be hidden)</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_shown</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">When oil is shown</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_hide_layer</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">When oil gets automatically hidden</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_click_thirdparty_list</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">When a user clicks the third party list link</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oil_click_company_list</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">When a user clicks the company list link</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript"> <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></code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="oil-cpc-api"><a class="anchor" href="#oil-cpc-api"></a>OIL CPC API</h3>
<div class="paragraph">
<p>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).</p>
</div>
<div class="paragraph">
<p>For this include a div with the id below in your page:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><div id="oil-preference-center"></div></code></pre>
</div>
</div>
<div class="paragraph">
<p>To insert the OIL CPC in the prepared div, which you included in your page, execute this javascript snippet:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">window.AS_OIL.showPreferenceCenter();</code></pre>
</div>
</div>
<div class="paragraph">
<p>For the action element to save the current setting there is an API endpoint:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">window.oilTriggerOptin();</code></pre>
</div>
</div>
<div class="paragraph">
<p>The inserted CPC will show the users current setting when inserted. Make sure OIL is part of the page first to make this work.</p>
</div>
<div class="paragraph">
<p>CPC API definition:</p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
<col style="width: 25%;">
<col style="width: 75%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Function Name</th>
<th class="tableblock halign-left valign-top">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">window.AS_OIL.showPreferenceCenter()</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">inserts the CPC into the predefined div with the id #oil-preference-center into the host site</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">window.AS_OIL.triggerOptIn()</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">will trigger the generic opt-in (can also result in an opt-out)</p></td>
</tr>
</tbody>
</table>
</div>
<div class="sect2">
<h3 id="soft-blocking-of-dom-elements"><a class="anchor" href="#soft-blocking-of-dom-elements"></a>Soft Blocking of DOM Elements</h3>
<div class="paragraph">
<p>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 <code>src</code> or an <code>href</code> attribute the same way.</p>
</div>
<div class="sect3">
<h4 id="managing-code-script-code-elements"><a class="anchor" href="#managing-code-script-code-elements"></a>Managing <code><script></code> Elements</h4>
<div class="paragraph">
<p>To manage <code><script></code> tags you have to add a <code>data-managed</code> attribute with the value <code>as-oil</code>. To avoid automatic execution of the <code><script></code> tag as long as it should be deactivated
change the <code>type</code> attribute to <code>opt-in</code> and add a <code>data-type</code> attribute with the original type. In case of tag activation OIL replaces the <code>type</code> attribute with this
original type. With an additional <code>data-purposes</code> attribute you can specify a comma-separated list of purpose ids the user has to consent with to activate the tag. If <code>data-purposes</code>
attribute is omitted all defined purposes are necessary for tag activation.</p>
</div>
<div class="paragraph">
<p>Here is an example for a managed <code><script></code> tag:</p>
</div>
<div class="listingblock">
<div class="content">
<pre><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></pre>
</div>
</div>
<div class="paragraph">
<p>OIL can manage <code><script></code> tags that load a script from an URL as well. Simply replace the <code>src</code> attribute with <code>data-src</code> as shown below:</p>
</div>
<div class="listingblock">
<div class="content">
<pre><script data-managed="as-oil"
data-type="text/javascript"
data-src="oilDemoScript.js"
data-purposes="1,2,4"
type="as-oil"
id="managedScriptTag">
</script></pre>
</div>
</div>
<div class="paragraph">
<p>Attributes <code>class</code>, <code>id</code>, <code>defer</code>, <code>async</code> and <code>charset</code> and further <code>data-</code> attributes can be used. They are not changed by OIL.</p>
</div>
</div>
<div class="sect3">
<h4 id="managing-other-elements"><a class="anchor" href="#managing-other-elements"></a>Managing Other Elements</h4>
<div class="paragraph">
<p>To manage elements with a <code>src</code> or <code>href</code> attribute add a <code>data-managed</code> attribute with the value <code>as-oil</code> and replace the <code>src</code> attribute with <code>data-src</code> or the <code>href</code>
attribute with <code>data-href</code>. With the optional <code>data-title</code> attribute a title can be defined - use it instead of <code>title</code> attribute. With a <code>data-purposes</code> attribute you
can specify a comma-separated list of purpose ids the user has to consent with to activate the tag. If <code>data-purposes</code> 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 <code>display</code> property to <code>none</code>. To provide a value for this property that is
used when the tag is activated add a corresponding <code>data-display</code> attribute. OIL sets its value into the CSS display property when it activates the tag. Other CSS properties
can be specified by a <code>style</code> attribute or in a CSS section or file.</p>
</div>
<div class="paragraph">
<p>Here is an example for a managed <code><img></code> tag:</p>
</div>
<div class="listingblock">
<div class="content">
<pre><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;"></pre>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="tracking-and-google-analytics-events"><a class="anchor" href="#tracking-and-google-analytics-events"></a>Tracking and Google Analytics Events</h3>
<div class="paragraph">
<p>If you want to use Google Analytics with OIL you can use OIL Events (see above) and proxy them to your specific GA installation.</p>
</div>
<div class="paragraph">
<p>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.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// 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);</code></pre>
</div>
</div>
<div class="paragraph">
<p>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.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">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</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="amp-support"><a class="anchor" href="#amp-support"></a>AMP Support</h2>
<div class="sectionbody">
<div class="paragraph">
<p>To exchange user consent for your POI group with an AMP page, you want to make use of the iframe capability of the <a href="https://www.ampproject.org/docs/reference/components/amp-consent#prompt-actions-from-external-consent-ui">AMP consent component</a>.</p>
</div>
<div class="sect2">
<h3 id="technical-integration"><a class="anchor" href="#technical-integration"></a>Technical integration</h3>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Copy the file <code>demos/amp-consent-iframe.html</code> and update it with your own oil-configuration.</p>
</li>
<li>
<p>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. Make sure the file is accessible through a secure (SSL) connection.</p>
</li>
<li>
<p>Include the path to the iframe within your amp-consent dialog. Ex.:</p>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"> <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></code></pre>
</div>
</div>
</li>
<li>
<p>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 <code>show-consent.json</code>.</p>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json"> {
"promptIfUnknown": true
}</code></pre>
</div>
</div>
</li>
<li>
<p>Update the parameter "checkConsentHref" in your amp-consent json configuration:</p>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json"> "checkConsentHref": "https://your-hub-origin.tld/show-consent.json",</code></pre>
</div>
</div>
</li>
<li>
<p>You’re done!</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>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.</p>
</div>
<div class="paragraph">
<p><strong>For an example amp integration see the file <code>demos/amp-consent.html</code>.</strong></p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="oil-and-tealium"><a class="anchor" href="#oil-and-tealium"></a>OIL and Tealium</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The Opt-In Layer can be integrated with your page using <a href="http://tealium.com/" target="_blank" rel="noopener">Tealium</a>.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
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.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Setting up OIL with Tealium consists of the following steps:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="#add-opt-in-layer-to-tealium">Add the Opt-In Layer</a> to your Tealium profile.</p>
</li>
<li>
<p><a href="#add-oil-configuration-to-tealium">Add the OIL configuration</a> to your Tealium profile.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>In addition to its own integration, OIL also provides support for <a href="#vendor-tag-management-with-oil-and-tealium">(vendor) tag management</a> with Tealium.</p>
</div>
<div class="sect2">
<h3 id="add-opt-in-layer-to-tealium"><a class="anchor" href="#add-opt-in-layer-to-tealium"></a>Add Opt-In Layer to Tealium</h3>
<div class="paragraph">
<p>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:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>the stub and</p>
</li>
<li>
<p>the layer itself.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre>Title: OIL Stub
Scope: All Tags
Execution: Run Once before Load Rules</pre>
</div>
</div>
<div class="paragraph">
<p>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 <code>oilstub.1.3.1-alpha-RELEASE.min.js</code> from <a href="https://oil.axelspringer.com/release" class="bare">https://oil.axelspringer.com/release</a> and paste its
content completely into the text area in the "Configuration" section.</p>
</div>
<div class="paragraph">
<p>Now create another extension 'OIL Layer' with the content of the file <code>oil.1.3.1-alpha-RELEASE.min.js</code>. Make sure that both extensions are activated.
Now save and publish your changes.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
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.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>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):</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
<div class="paragraph">
<p>That’s it.</p>
</div>
</div>
<div class="sect2">
<h3 id="add-oil-configuration-to-tealium"><a class="anchor" href="#add-oil-configuration-to-tealium"></a>Add OIL configuration to Tealium</h3>
<div class="paragraph">
<p>As described in section <a href="#configuring-oil">Configuring OIL</a> 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.</p>
</div>
<div class="paragraph">
<p>Go to your Tealium profile (section "Extensions") and create an extension with the following settings:</p>
</div>
<div class="listingblock">
<div class="content">
<pre>Title: OIL Configuration
Scope: All Tags
Execution: Run Once before Load Rules</pre>
</div>
</div>
<div class="paragraph">
<p>Again, the title can be defined freely. The "Configuration" section of the new extension should contain the following code:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">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);</code></pre>
</div>
</div>
<div class="paragraph">
<p>The variable <code>config</code> should contain your configuration that is to be delivered.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
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.
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="vendor-tag-management-with-oil-and-tealium"><a class="anchor" href="#vendor-tag-management-with-oil-and-tealium"></a>Vendor Tag Management with OIL and Tealium</h3>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre>_dip_oil_purpose_01
_dip_oil_purpose_02
_dip_oil_purpose_03
_dip_oil_purpose_04
_dip_oil_purpose_05</pre>
</div>
</div>
<div class="paragraph">
<p>Each variable can be <code>true</code> or <code>false</code> - <code>true</code> if user gave consent to the corresponding standard purpose with the id referenced in the variable’s name.</p>
</div>
<div class="paragraph">
<p>Additionally, a variable named</p>
</div>
<div class="listingblock">
<div class="content">
<pre>_dip_oil_purpose_all</pre>
</div>
</div>
<div class="paragraph">
<p>is used that is <code>true</code> if user gave consent to all standard purposes.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
Currently, custom purposes are not supported.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre>Source: _dip_oil_purpose_01
Type: UDO Variable</pre>
</div>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre>Title: _dip_oil_purpose_all
Conditions: IF js._dip_oil_purpose_all EQUALS 1</pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre>Title: _dip_oil_purpose_01
Conditions: IF js._dip_oil_purpose_all EQUALS 1 OR js._dip_oil_purpose_01 EQUALS 1</pre>
</div>
</div>
<div class="paragraph">
<p>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 <code>true</code> or <code>false</code> respectively and causes
Tealium to re-evaluate it. This activates corresponding loading rule and the tag combined with it is activated or deactivated.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="customisation"><a class="anchor" href="#customisation"></a>Customisation</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="supported-a-b-testing-with-us"><a class="anchor" href="#supported-a-b-testing-with-us"></a>Supported A/B Testing with us</h3>
<div class="paragraph">
<p>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.</p>
</div>
<div class="paragraph">
<p>An example link would look like:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><script type="text/javascript" src="//static-bp.kameleoon.com/css/customers/xxxxxxxxxxx/0/kameleoon.js"></script></code></pre>
</div>
</div>
<div class="paragraph">
<p>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.</p>
</div>
</div>
<div class="sect2">
<h3 id="your-own-a-b-testing"><a class="anchor" href="#your-own-a-b-testing"></a>Your own A/B Testing</h3>
<div class="paragraph">
<p>For setting up A/B testing in your own environment, the following information could come handy.</p>
</div>
<div class="sect3">
<h4 id="enabling-oil-for-a-specific-variant-only"><a class="anchor" href="#enabling-oil-for-a-specific-variant-only"></a>Enabling OIL for a specific variant only</h4>
<div class="paragraph">
<p>For testing you can also use the preview mode to disable OIL by default and enable it in certain variants.</p>
</div>
<div class="paragraph">
<p>Add the following standard configuration to your website, which will disable OIL by default:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json"><script id="oil-configuration" type="application/configuration">
{
"preview_mode": true,
}
</script></code></pre>
</div>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript"><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></code></pre>
</div>
</div>
<div class="paragraph">
<p>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 <a href="#language-label-configuration">Language label configuration</a>).</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="styling-guide"><a class="anchor" href="#styling-guide"></a>Styling guide</h3>
<div class="paragraph">
<p>There are 5 different views you can style:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="#Opt-In Layer">The default layer</a></p>
</li>
<li>
<p><a href="#no-cookie-layer">No-cookies banner</a></p>
</li>
<li>
<p><a href="#poi-group-list">Group list</a></p>
</li>
<li>
<p><a href="#Third party List">3rd party list</a></p>
</li>
<li>
<p><a href="#advanced-settings-cpc-cookie-preference-center">Cookie Preference Center</a></p>
</li>
</ul>
</div>
<div class="paragraph">
<p>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.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">div.as-oil {
font-family: Arial;
color: #bada55;
}</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">div.as-oil-content-overlay {
background-color: #ff00ff;
box-shadow: 0 -8px 20px 0 rgba(0, 0, 0, 0.2);
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>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 <a href="#styling-examples">Styling Examples</a> you can find design examples for the opt-in layer with corresponding customized configuration and CSS styles.</p>
</div>
<div class="sect3">
<h4 id="opt-in-layer"><a class="anchor" href="#opt-in-layer"></a>Opt-In layer</h4>
<div class="imageblock">
<div class="content">
<img src="src/images/view_default.png" alt="Default View">
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
</div>
<div class="sect3">
<h4 id="no-cookie-layer"><a class="anchor" href="#no-cookie-layer"></a>No-cookie layer</h4>
<div class="imageblock">
<div class="content">
<img src="src/images/view_no_cookies.png" alt="No Cookies">
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
</div>
<div class="sect3">
<h4 id="poi-group-list"><a class="anchor" href="#poi-group-list"></a>POI group list</h4>
<div class="imageblock">
<div class="content">
<img src="src/images/view_group_list.png" alt="Group list">
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
</div>
<div class="sect3">
<h4 id="third-party-list"><a class="anchor" href="#third-party-list"></a>Third party list</h4>
<div class="imageblock">
<div class="content">
<img src="src/images/view_third_parties.png" alt="Third party list">
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
</div>
<div class="sect3">
<h4 id="advanced-settings-cpc-cookie-preference-center"><a class="anchor" href="#advanced-settings-cpc-cookie-preference-center"></a>Advanced Settings (CPC - Cookie Preference Center)</h4>
<div class="paragraph">
<p>Currently, there are two types of the Cookie Preference Center you can choose from: Standard and Tabs-based CPC. Use the
<a href="#Functional Configuration Parameters">configuration parameter</a> <code>cpc_type</code> to activate the preferred type.</p>
</div>
<div class="sect4">
<h5 id="standard-cpc"><a class="anchor" href="#standard-cpc"></a>Standard CPC</h5>
<div class="imageblock">
<div class="content">
<img src="src/images/view_cpc.png" alt="CPC">
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
</div>
<div class="sect4">
<h5 id="tab-based-cpc"><a class="anchor" href="#tab-based-cpc"></a>Tab-based CPC</h5>
<div class="imageblock">
<div class="content">
<img src="src/images/view_tab_cpc.png" alt="CPC">
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
</div>
<div class="sect4">
<h5 id="opt-out-confirmation"><a class="anchor" href="#opt-out-confirmation"></a>Opt-out confirmation</h5>
<div class="paragraph">
<p>Opt-out confirmation can be activated by setting <a href="#Functional Configuration Parameters">configuration parameter</a> <code>require_optout_confirm</code>
to <code>true</code>.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="src/images/view_cpc_optout_confirmation.png" alt="CPC Opt-out confirmation dialog">
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
</div>
</div>
<div class="sect3">
<h4 id="styling-examples"><a class="anchor" href="#styling-examples"></a>Styling Examples</h4>
<div class="paragraph">
<p>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.</p>
</div>
<div class="sect4">
<h5 id="simple-consent-banner-button-on-the-right"><a class="anchor" href="#simple-consent-banner-button-on-the-right"></a>Simple consent banner (button on the right)</h5>
<div class="imageblock">
<div class="content">
<img src="src/images/view_design_example_simple_banner_button_right.png" alt="Simple consent banner (button on the right)">
</div>
</div>
<div class="paragraph">
<p>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 <code>small</code> theme of the opt-in layer.</p>
</div>
<div class="paragraph">
<p>Here is the minimal configuration for this example:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.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;
}
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>Furthermore, an additional link has to be added:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/></code></pre>
</div>
</div>
</div>
<div class="sect4">
<h5 id="simple-consent-banner-centered-button"><a class="anchor" href="#simple-consent-banner-centered-button"></a>Simple consent banner (centered button)</h5>
<div class="imageblock">
<div class="content">
<img src="src/images/view_design_example_simple_banner_centered_button.png" alt="Simple consent banner (centered button)">
</div>
</div>
<div class="paragraph">
<p>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 <code>small</code> theme of the opt-in layer.</p>
</div>
<div class="paragraph">
<p>Here is the minimal configuration for this example:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.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%;
}
}</code></pre>
</div>
</div>
</div>
<div class="sect4">
<h5 id="consent-banner-with-cookie-preference-center"><a class="anchor" href="#consent-banner-with-cookie-preference-center"></a>Consent banner with Cookie Preference Center</h5>
<div class="imageblock">
<div class="content">
<img src="src/images/view_design_example_banner_with_cpc_link.png" alt="Consent banner with Cookie Preference Center">
</div>
</div>
<div class="paragraph">
<p>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.</p>
</div>
<div class="paragraph">
<p>This is the CPC view:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="src/images/view_design_example_cpc.png" alt="Cookie Preference Center">
</div>
</div>
<div class="paragraph">
<p>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:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><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></code></pre>
</div>
</div>
<div class="paragraph">
<p>Please note the definition of the list elements (within the <code>label_intro</code> element) using <code><span></code> tags. The opt-in layer uses a block element (a paragraph) for the banner
text. Therefore, usage of a <code><ul></code> based list would cause some problems we avoid with this solution. The list layout is created completely
by CSS.</p>
</div>
<div class="paragraph">
<p>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):</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.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;
}
}</code></pre>
</div>
</div>
</div>
</div>
<div class="sect3">
<h4 id="thank-you-screen"><a class="anchor" href="#thank-you-screen"></a>"Thank you" Screen</h4>
<div class="paragraph">
<p>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.</p>
</div>
<div class="paragraph">
<p>This code will listen to OIL events to show another window after the user finished the conversion process explaining the nature of the test.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">(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);
}());</code></pre>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="adding-scripts-programmatically"><a class="anchor" href="#adding-scripts-programmatically"></a>Adding Scripts programmatically</h3>
<div class="sect3">
<h4 id="adding-oil-js-configuration"><a class="anchor" href="#adding-oil-js-configuration"></a>Adding oil.js configuration</h4>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">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);</code></pre>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="tracking-user-interaction-with-oil"><a class="anchor" href="#tracking-user-interaction-with-oil"></a>Tracking user interaction with OIL</h3>
<div class="paragraph">
<p>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.</p>
</div>
<div class="paragraph">
<p>To be informed about special events or user interactions relating to the layer you can use the event mechanism provided by OIL (see chapter
<a href="#oil-events">OIL Events</a>). To propagate these events to your tracking service (here: Google Analytics) you should add the following event handler
to your page:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="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) {
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);</code></pre>
</div>
</div>
<div class="paragraph">
<p>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 <code>oil_</code>). If such an event was detected it is propagated to Google Analytics using its API call <code>ga</code>. To be able to create
specific dashboards for OIL events the handler uses <code>OIL</code> 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:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="src/images/ga_dashboard_all_events.png" alt="Google Analytics Dashboard showing information about all detected OIL events">
</div>
</div>
<div class="imageblock">
<div class="content">
<img src="src/images/ga_dashboard_events_by_actions.png" alt="Google Analytics Dashboard showing information for specific OIL events">
</div>
</div>
<div class="paragraph">
<p>For details how to create plots, tables and dashboards in Google Analytics please consult documentation provided by Google.</p>
</div>
<div class="paragraph">
<p>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 <a href="#oil-events">OIL Events</a> for the complete list of events sent by OIL.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="appendix"><a class="anchor" href="#appendix"></a>Appendix</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="glossary"><a class="anchor" href="#glossary"></a>Glossary</h3>
<table class="tableblock frame-all grid-all spread">
<colgroup>
<col style="width: 33.3333%;">
<col style="width: 66.6667%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Term</th>
<th class="tableblock halign-left valign-top">Explanation</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">OIL</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">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.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Site Opt-In (SOI)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The <em>Site Opt-In</em> stores a user’s opt-in permit for the current site only. Also known as domain opt-in.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Power Opt-In (POI)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The <em>Power Opt-In</em> 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. <em>POI</em> is implemented via an iframe solution, see also <em>Hub</em> . Also known as group opt-in.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Hub</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><em>POI</em> 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.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Subscriber</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">A site that subscribes to a POI hub</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
Last updated 2019-05-10 12:00:18 Coordinated Universal Time
</div>
</div>
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:300,400,600" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" async></script>
<script>
(function () {
document.title = ("oil.js documentation - 1.3.1-alpha-RELEASE");
}());
$(function () {
var newElement = '<li>'
+ '<a href="https://www.axelspringerideas.de">Built and designed<br />by Ideas Engineering.</a>'
+ '</li>';
var sectLevelOne = $('.sectlevel1');
sectLevelOne.append(newElement);
})
$('a[href*="#"]').on('click', function (e) {
// Prevent default anchor click behavior
e.preventDefault();
// Store hash
var target = this.hash;
var $target = $(target);
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds
// it takes to scroll to the specified area
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 80
}, 600, 'swing', function () {
// Add hash (#) to URL when done scrolling (default click behavior)
if (history.pushState) {
history.pushState(null, null, target);
} else {
location.hash = target;
}
});
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlighting()</script>
</body>
</html>