Menu
In my project, the client wants me to implement Hotjar by placing the Hotjar code in the <head> of the page.
That's simple enough, but they also want the user to control whether or not they will allow themselves to be tracked.
The way this is set up right now is a "cookie settings" page where the user can switch this option on or off:
<template>
<form>
<div class="field">
<div class="control">
<div class="public-switch text-right is-success">
<input v-model="performanceConsent" @change="onPerformanceConsentUpdate" type="checkbox" id="performance-cookies">
<label for="performance-cookies" class="toggle-switch"></label>
<small>Performance</small>
</div>
<br>
<p class="caption">These cookies help us to improve the site’s performance. Select these cookies for faster experience and better content recommendations.</p>
</div>
</div>
</form>
</template>
And here we have our Vue code:
<script>
export default {
data() {
return {
performanceConsent: false,
};
},
methods: {
onPerformanceConsentUpdate() {
this.$cookie.set('cookie-consent-performance', this.performanceConsent ? 'yes' : 'no');
}
},
created() {
this.performanceConsent = 'no' !== this.$cookie.get('cookie-consent-performance');
this.onPerformanceConsentUpdate();
}
}
</script>
Now, my question is, how do I add the condition to the header to only include Hotjar if performanceConsent is true in the Vue component?
Is this even possible or will I have to send an Ajax request and store these settings in the database somewhere, then get them from there on page load?
967
Pretty simple solution for a pretty simple problem.
You don't have to depend on Your Vue component, as the consent is written into cookies. In the documents head You can check if the cookie exists, and if it does and amounts to true You can just append the hotjar script to the head.
Here's a simple jsfiddle with the implementation
https://jsfiddle.net/py0udsnk/
<head>
<script>
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
<script>
var consent = getCookie('cookie-consent-performance')
if (consent) {
var hotjar = document.createElement('script')
hotjar.src = 'https://hotjar.com/hotjar.js'
document.getElementsByTagName('head')[0].appendChild(hotjar)
}
</script>
</head>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With