Check "Do Not Track" Client Hint

donottrack.js

const allowsTracking = () => {
    const dnt =
        window.doNotTrack ||
        navigator.doNotTrack ||
        navigator.msDoNotTrack
    if (dnt === 1 || dnt === '1' || dnt === 'yes') {
        return false
    }
    if ('msTrackingProtectionEnabled' in window.external) {
        return !window.external.msTrackingProtectionEnabled()
    }
    return true
}

if (allowsTracking()) {
  // Analytics Tracking Code Here 
}

As I was implementing this (thank you!), TypeScript is telling me 2 things:

• Property 'msDoNotTrack' does not exist on type 'Navigator'. Did you mean 'doNotTrack'?
• Property 'msTrackingProtectionEnabled' does not exist on type 'never'.

According to https://dev.to/corbindavenport/how-to-correctly-check-for-do-not-track-with-javascript-135d, the former is for IE 10 and older, and the latter is for all versions of IE.

So, for TypeScript, I went with this lame alternative:

interface MSNavigator extends Navigator {
  msDoNotTrack: Navigator['doNotTrack'];
}

interface MSExternal extends External {
  msTrackingProtectionEnabled(): boolean;
}

function isMSExternal(external: External): external is MSExternal {
  return 'msTrackingProtectionEnabled' in external;
}

export const allowsTracking = () => {
  const dnt =
    window.doNotTrack ||
    navigator.doNotTrack ||
    // Support for IE 10 and older
    (navigator as MSNavigator).msDoNotTrack;

  if (dnt === '1' || dnt === 'yes') {
    return false;
  }

  // All versions of IE
  if (window.external && isMSExternal(window.external)) {
    return !window.external.msTrackingProtectionEnabled();
  }

  return true;
};

I would be interested to know if people had more elegant solutions.