Add cookie check for VWO script loading

Author: JakubMastalerz

tbx/project_styleguide/templates/patterns/base_page.html

@@ -14,6 +14,9 @@
     {% endif %}
 
     {% if not request.in_preview_panel %}
+        {% if request.COOKIES.VWOCookie != 'Yes' %}
+            <template data-vwo-loader>
+        {% endif %}
         <!-- Start VWO Async SmartCode -->
         <link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com" />
         <script type='text/javascript' id='vwoCode'>
@@ -27,6 +30,13 @@
                 f=false,w=window,d=document,v=d.querySelector('#vwoCode'),cK='_vwo_'+account_id+'_settings',cc={};try{var c=JSON.parse(localStorage.getItem('_vwo_'+account_id+'_config'));cc=c&&typeof c==='object'?c:{}}catch(e){}var stT=cc.stT==='session'?w.sessionStorage:w.localStorage;code={nonce:v&&v.nonce,library_tolerance:function(){return typeof library_tolerance!=='undefined'?library_tolerance:undefined},settings_tolerance:function(){return cc.sT||settings_tolerance},hide_element_style:function(){return'{'+(cc.hES||hide_element_style)+'}'},hide_element:function(){if(performance.getEntriesByName('first-contentful-paint')[0]){return''}return typeof cc.hE==='string'?cc.hE:hide_element},getVersion:function(){return version},finish:function(e){if(!f){f=true;var t=d.getElementById('_vis_opt_path_hides');if(t)t.parentNode.removeChild(t);if(e)(new Image).src='https://dev.visualwebsiteoptimizer.com/ee.gif?a='+account_id+e}},finished:function(){return f},addScript:function(e){var t=d.createElement('script');t.type='text/javascript';if(e.src){t.src=e.src}else{t.text=e.text}v&&t.setAttribute('nonce',v.nonce);d.getElementsByTagName('head')[0].appendChild(t)},load:function(e,t){var n=this.getSettings(),i=d.createElement('script'),r=this;t=t||{};if(n){i.textContent=n;d.getElementsByTagName('head')[0].appendChild(i);if(!w.VWO||VWO.caE){stT.removeItem(cK);r.load(e)}}else{var o=new XMLHttpRequest;o.open('GET',e,true);o.withCredentials=!t.dSC;o.responseType=t.responseType||'text';o.onload=function(){if(t.onloadCb){return t.onloadCb(o,e)}if(o.status===200||o.status===304){_vwo_code.addScript({text:o.responseText})}else{_vwo_code.finish('&e=loading_failure:'+e)}};o.onerror=function(){if(t.onerrorCb){return t.onerrorCb(e)}_vwo_code.finish('&e=loading_failure:'+e)};o.send()}},getSettings:function(){try{var e=stT.getItem(cK);if(!e){return}e=JSON.parse(e);if(Date.now()>e.e){stT.removeItem(cK);return}return e.s}catch(e){return}},init:function(){if(d.URL.indexOf('__vwo_disable__')>-1)return;var e=this.settings_tolerance();w._vwo_settings_timer=setTimeout(function(){_vwo_code.finish();stT.removeItem(cK)},e);var t;if(this.hide_element()!=='body'){t=d.createElement('style');var n=this.hide_element(),i=n?n+this.hide_element_style():'',r=d.getElementsByTagName('head')[0];t.setAttribute('id','_vis_opt_path_hides');v&&t.setAttribute('nonce',v.nonce);t.setAttribute('type','text/css');if(t.styleSheet)t.styleSheet.cssText=i;else t.appendChild(d.createTextNode(i));r.appendChild(t)}else{t=d.getElementsByTagName('head')[0];var i=d.createElement('div');i.style.cssText='z-index: 2147483647 !important;position: fixed !important;left: 0 !important;top: 0 !important;width: 100% !important;height: 100% !important;background: white !important;display: block !important;';i.setAttribute('id','_vis_opt_path_hides');i.classList.add('_vis_hide_layer');t.parentNode.insertBefore(i,t.nextSibling)}var o=window._vis_opt_url||d.URL,s='https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(o)+'&vn='+version;if(w.location.search.indexOf('_vwo_xhr')!==-1){this.addScript({src:s})}else{this.load(s+'&x=true')}}};w._vwo_code=code;code.init();})();
         </script>
         <!-- End VWO Async SmartCode -->
+        {% if request.COOKIES.VWOCookie != 'Yes' %}
+            </template>
+        {% endif %}
+        <script>
+            window.VWO = window.VWO || [];
+            window.VWO.init = window.VWO.init || function(state) { window.VWO.consentState = state; }
+        </script>
     {% endif %}
 
     {# favicons #}

tbx/static_src/javascript/components/vwo-loader.js

@@ -0,0 +1,43 @@
+const getCookie = (name) => {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+};
+
+class VWOLoader {
+    static selector() {
+        return '[data-vwo-loader]';
+    }
+
+    constructor() {
+        this.template = document.querySelector(VWOLoader.selector());
+        if (!this.template) return;
+        this.initiated = false;
+        this.bindEvents();
+    }
+
+    bindEvents() {
+        window.addEventListener('CassieSubmittedConsent', () =>
+            this.toggleVWO(),
+        );
+    }
+
+    toggleVWO() {
+        const isEnabled = getCookie('VWOCookie') === 'Yes';
+        if (isEnabled) {
+            window.VWO.init(1);
+            window.VWO.push(['optInVisitor']);
+            if (!this.initiated) {
+                this.initiated = true;
+                // add the template contents after the template node
+                this.template.after(this.template.content.cloneNode(true));
+            }
+        } else {
+            window.VWO.init(3);
+            window.VWO.push(['optOutVisitor']);
+        }
+    }
+}
+
+export default VWOLoader;

tbx/static_src/javascript/main.js

@@ -9,6 +9,7 @@ import YouTubeConsentManager from './components/youtube-embed';
 import Tabs from './components/tabs';
 import TableHint from './components/table-hint';
 import ModeSwitcher from './components/mode-switcher';
+import VWOLoader from './components/vwo-loader';
 
 // IE11 polyfills
 import foreachPolyfill from './polyfills/foreach-polyfill';
@@ -40,4 +41,5 @@ document.addEventListener('DOMContentLoaded', () => {
     initComponent(TableHint);
     initComponent(ModeSwitcher);
     new DesktopCloseMenus();
+    new VWOLoader();
 });