Matamo or other tracking tools is great if you want to own you tracking data, but the iframe integration lacks if you want to add your own style (font, margin, checkbox, etc.) to it. This little example helps you to get rid of the iframe. You can also this with the AjaxOptOut Plugin, but this solution need not plugin in your Matamo installation.
Example
Features
- No iframe
- No cookies (using HTML5 Web Storage instead)
- Fallback message for disabled JavaScript
- Fallback message for old browsers that don’t support HTML5 Web Storage
- Check for browser’s
Do Not Tracksetting - Support for multiple languages in one page
- You can use this for any tracking solution (Google Tag Manager, Google Analytics, Matamo, etc.)
The HTML for the actual opt-out checkbox
Add this to the page(s) where you want your visitors to find the opt-out checkbox – probably within the privacy statement.
You can add this HTML to one single page multiple times in different languages if you wish.
<div class="tracking-optout">
<label class="tracking-optout__label" style="display:none">
<input type="checkbox" class="tracking-optout__input">
<span class="tracking-optout__status tracking-optout__status--active" style="display:none">
Currently your visit to this website <strong>is being anonymously tracked</strong> by our Web Analytics Tool. Uncheck this box to stop being tracked.
</span>
<span class="tracking-optout__status tracking-optout__status--inactive" style="display:none">
Currently your visit to this website <strong>is not being tracked</strong> by our Web Analytics Tool. Check this box to activate anonymous tracking and help us improve our website.
</span>
</label>
<span class="tracking-optout__dnt" style="display:none">
You have activated the <em>Do Not Track</em> option in your browser settings. This setting is being respected by our Web Analytics Tool on our website. There’s no need for you to opt-out of this website’s data tracking.
</span>
<span class="tracking-optout__oldie" style="display:none">
Your browser appears to be too old to support this feature. For more privacy control please update your browser.
</span>
<noscript>
It appears you have deactived Javascript in your browser. This feature is only available with Javascript turned on. If you don’t want your data to be collected, you can still turn on <em>Do Not Track</em> in your browser which is a general setting and is being respected by our tracking installation.
</noscript>
</div>
Options
When calling trackingOptout(OPTIONS), you can set following options:
| Option | Description | Default value |
|---|---|---|
doNotTrackRespected |
Set whether you have your installation respect the browser’s DoNotTrack option | true |
storageKey |
Set the name of the key where the current status get's saved | 'trackingEnabled' |
enabledPerDefault |
Set this to true if you want the tracking enabled per default | true |
API
If you want to set the value dynamically (e.g. from a button in a cookie dialog) the following commands are available:
| Command | Description |
|---|---|
trackingOptout.doNotTrack |
true if "Do not track" is set |
trackingOptout.enabled |
true if tracking is enabled |
trackingOptout.toggle() |
Toggles the tracking behaviour |
trackingOptout.set(true) |
Enable tracking |
trackingOptout.set(false) |
Disable tracking |
If doNotTrackRespected is set to true in the OPTIONS, the functions toggle and set has no effect.
How to use
Include the Javascript in every page and wrap your Javascript tracking code embedding in this condition:
if (trackingOptout.enabled) {
// Your Tracking code
}
For example for Matomo:
if (trackingOptout.enabled) {
var _paq = _paq || [];
_paq.push(['disableCookies']);
...
})();
}
or Google Analytics:
(function(){
if (trackingOptout.enabled) {
var key = 'ga:clientId';
ga('create', 'UA-XXXXX-Y', {
'storage': 'none',
'clientId': localStorage.getItem(key)
});
ga(function(tracker) {
localStorage.setItem(key, tracker.get('clientId'));
});
ga('send', 'pageview');
}
})()
Here you can read more about disabling cookies
Note
Unlike cookies, localStorage is bound by the same-origin policy. If parts of your site are on different subdomains, or if some pages use http and others pages use https, you cannot use localStorage to measure user activity between those pages. For this reason, cookies continues to be the officially recommended way to store the Client ID.
Top comments (0)