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 remendations.</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 ponent?
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?
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 remendations.</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 ponent?
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?
Share Improve this question asked Feb 20, 2019 at 9:10 sveti petarsveti petar 3,79714 gold badges77 silver badges159 bronze badges 1-
have you tried
v-if– mooga Commented Feb 25, 2019 at 10:01
2 Answers
Reset to default 1 +50Pretty simple solution for a pretty simple problem.
You don't have to depend on Your Vue ponent, 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/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./hotjar.js'
document.getElementsByTagName('head')[0].appendChild(hotjar)
}
</script>
</head>
I think what are you searching for is vue-head
What may be i would do as well , that i will try ht v-if
I will add a ponent in the head and then inside that ponent
i will do the logic conditions using v-if
something like that ,
if you don't like
vue-head
index.html
<script>
export default {
name : 'head_ponent',
template: '<template v-if="performanceConsent"> //import Hotjar </template>',
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>