Plausible Analytics with Ghost
Plausible is a cookie-less and lightweight web analytics service. This is why I decided to use Plausible over Google Analytics. Especially for privacy reasons because it does not use cookies so there is no need to show a cookie banner for this service. Anyway I wanted to implement Plausible to my cookie banner to let the visitor decide if he allows to be tracked. The software is also open-source so it's possible to self-host, but they also offer a hosted service.
How to implement Plausible with Cookie consent?
Since Ghost doesn't offer a cookie consent banner nor built-in analytics service integration I was forced to inject code for this. Atleast this was made easy for Ghost admins because of the "Code injection" option under settings.
To get started we do need a cookie banner. I used osano for this.
Cookie Banner
Visit osano and select the free open source edition with the button "Start Coding" and start customizing the cookie banner as you wish. You can see a preview of your banner on the page itself. Configure your banner until point 5 and select "Ask users to opt into cookies (Advanced)". This is important otherwise you won't get a "Decline" button which you need if you want to give your visitors a choice.
As alternative you can use the "Just tell users that we use cookies" to just get the "Got it" button and only if the visitor clicks the button the script will be loaded. But I don't explain this type of implementation in this post.
When finished customizing you can copy your code and add this under Settings->Code Injection into your site header.
Because we wanted to load scripts only when the user decides to allow this, we need to add some more code to the banner. A short explanation to do this is written in this article by osano. But because this is a very basic and general usage explanation, I decided to write my post to explain how to edit the code and get this working.
Site Header Code:
<!-- CookieConsent by https://www.osano.com/cookieconsent/download/-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
revokable:true,
onStatusChange: function(status) {
console.log('status changed');
console.log(this.hasConsented() ?
'enable cookies' : 'disable cookies');
},
onInitialise: function (status) {
// if user revisits after consent was given in any way this is called
var type = this.options.type;
var didConsent = this.hasConsented();
// type depends on settings if opt-in
if (type == 'opt-in' && didConsent) {
// enable cookies
console.log('enable cookies');
$.loadScript('https://plausible.io/js/script.js','YOUR-DOMAIN.com', function(){
//Stuff to do after someScript has loaded
});
}
if (type == 'opt-out' && !didConsent) {
// disable cookies
}
},
onStatusChange: function(status, chosenBefore) {
// if anything is clicked on the popup this is called
var type = this.options.type;
var didConsent = this.hasConsented();
// type depends on type set in settings
if (type == 'opt-in' && didConsent) {
// enable cookies
$.loadScript('https://plausible.io/js/script.js','YOUR-DOMAIN.com', function(){
//Stuff to do after someScript has loaded
});
}
if (type == 'opt-out' && !didConsent) {
// disable cookies
}
},
onRevokeChoice: function() {
// When consent is revoked by reopen popup this is called
var type = this.options.type;
if (type == 'opt-in') {
// disable cookies
}
if (type == 'opt-out') {
// enable cookies
}
},
"palette": {
"popup": {
"background": "#252e39"
},
"button": {
"background": "#14a7d0"
}
},
"theme": "classic",
"content": {
"message": "This website only uses functional cookies and basic tracking to ensure you get the best experience on our website.",
"link": "Cookie Policy",
"href": "https://pawnda.de/cookies"
},
"type": "opt-in"
})});I think this code needs some more explanation, that's why I added some comments to the code which should help, but basically you need to add either your cookie-loader or script-loader to the following functions:
- onInitialise: This function is called if a visitor revisites the website and the cookie consent was already given in the past. Depending on the visitors past decision either "//enable cookies" or "//disable cookies" is called inside the onInitialise function.
- onStatusChanged: This function is called if the visitor clicks any button given by the banner. As above depending on the visitors decision either "//enable cookies" or "//disable cookies" is called inside the onInitialise function.
- onRevokeChoice: This function is called if the visitor reopens the banner. The consent is automatically revoked and cookies should get deleted where it says "//disable cookies"
Keep in mind that my explanation above only works and makes sense if you chose the "opt-in" type!
Script-Loader
In order to load some scripts if the visitor decides to allow tracking and/or cookies we do need some additonal jQuery code to load the Plausible analytics "tracker". Add the following to your...
Site Footer Code:
<script>
jQuery.loadScript = function (url, datadomain, callback) {
jQuery.ajax({
url: url,
'data-domain': datadomain,
dataType: 'script',
success: callback,
async: true
});
}
</script>Plausible
Sign-up at plausible.io and create your free trial account. Follow their instructions until you'll get your code snippet which should look something like this:
<script defer data-domain="YOUR-DOMAIN.COM" src="https://plausible.io/js/script.js"></script>
Edit the code above where the script is loaded by jQuery and add your domain to the code snipped:
$.loadScript('https://plausible.io/js/script.js','YOUR-DOMAIN.com', function(){
//Stuff to do after someScript has loaded
});Save the code and visit your website with your browser of choice. Don't forget to turn off any anti-tracking tools like uOrigin, otherwise the script will not load. Afterwards you will get some insights on your Plausible dashboard.
