Tracking Opt-Out and status without iframes

Jon Uhlmann — Thu, 11 Jun 2020 20:05:22 +0000

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 Track setting
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.

DEV Community: Jon Uhlmann