How to detect and use ‘Do Not Track’ on your website

Written with by Mustafa and Zac ❤️

A sign that says ‘Data’

What is Do Not Track?

Do Not Track or (DNT) is a feature in most browsers that lets you tell sites and advertisers that you do not consent to the tracking of websites that you’ve visited.

In practice, the implementation of this comes down to those websites and advertisers. There is no legal requirement to not track users with Do Not Track enabled.

We at Farewill remove some tracking for users who have Do Not Track enabled.

When a user on our site has Do not track enabled we don’t send information to tracking services like Google Analytics and Facebook.

We do however still send information to Intercom, the chat application we use. We use Intercom to send important information about the status of our customers wills and without that information our users wouldn’t be able to get their will. Ideally we wouldn’t track at all but in reality we have to compromise.

If you want to enable Do Not track you can read more on the Future of Privacy Forum’s website.

How can you use Do Not Track in your website?

Some browsers implement Do Not Track differently, often you can get the choice a user has made from two places:

  1. On your server using the DNT HTTP header
  2. In the browser using various browser APIs

On your server

When a page is requested to your website information can be sent through something called HTTP headers. There is a HTTP header called DNT for Do Not Track. If Do Not Track is enabled the value of this header will be the value 1. If the user has turned off Do Not Track the header won’t be sent or will be the value 0.

For example in a Express style server you can get the header with the following:

Example of getting the DNT header in an Express app

You could have a function like this where we send the request through:

Example of detecting Do Not Track on the serverside

Note: You may see doNotTrackHeader.charAt(0) we need to get the first character as from what I can tell from the specification for DNT you could send more than one character after the number.

In the browser

We can also get the Do Not Track choice in the browser. The main way is through navigator.doNotTrack.

This returns either 1, 0 or unspecified.

Like all good browser APIs there is some weird differences with some browsers:

Prior to Gecko 32, Firefox used the values yes, no or unspecified instead.

Internet Explorer 9 and 10 use a vendor prefix, i.e. navigator.msDoNotTrack. Safari 7.1.3+, Internet Explorer 11 and older versions of Edge use window.doNotTrack rather than navigator.doNotTrack.

We can create a function to move away some of this weird logic:

Example of detecting Do Not Track on the clientside

Examples

You can use both of these approaches to decide on your server whether you send tracking scripts scripts:

Example of how you could choose not to send Google scripts if Do Not Track is enabled

Or you can decide in the browser whether you send information to third parties such as Google Analytics:

Example of choose not to send information to Google Analytics when Do Not Track is enabled

We've put together a little Glitch application that shows off these examples which you can have a mess about with:

Glitch application that shows how these different parts could work together

How are you thinking about privacy? Have you implemented anything for Do Not Track? Let us know!

Thanks to Nick and Tom for proof reading.


Want to join us at Farewill? We’re hiring! 🙌