‘Do Not Track’ (DNT) with Third-party Embeds 🕵️🔎

Browsers have the ability to let users opt-out of tracking across all sites they visit with ‘Do Not Track’

One way you can respect ‘Do Not Track’ on your own site is by avoiding loading analytics or ad tracking when ‘Do Not Track’ is enabled.
However if you are embedding content from a third-party, you have no control over how they track your users.

YouTube is a good example, where users will be tracked via advertising.

Inspired by Medium.com, this component allows you to wrap any iFrame and only load it if the user has actively consented.

To see this in action you'll need to enable ‘Do Not Track’ in your browser, or I've allowed you to simulate what it'd look like.

Examples

YouTube

How to use

The code is based around adding a data-dnt-embed attribute to a standard iframe. Then to make sure the iframe does not request it's source, we change the src attribute to data-src. This allows us to only load when the user has given consent.

Markup

<iframe
  data-dnt-embed
  data-src="https://www.youtube.com/embed/5530I_pYjbo"
  title="How I Trained My Cats YouTube Video"
  frameborder="0"
  allowfullscreen
></iframe>
<noscript>
  <!-- If JavaScript fails, serve up a standard iFrame -->
  <iframe
    src="https://www.youtube.com/embed/5530I_pYjbo"
    title="How I Trained My Cats YouTube Video"
    frameborder="0"
    allowfullscreen
  ></iframe>
</noscript>

JavaScript

dnt-embed.js (~1kb gzipped)

CSS

dnt-embed.css

Features

Browser support: IE9+ (I need to do extensive testing, see below)
Writen to be accessible (but like above, needs testing before this is confirmed)
Works when JavaScript fails
YouTube embed only: Thumbnails
YouTube embed only: Privacy mode
Show's loading indication for slow connections

To do - Status: Do not use in production.

Cross browser testing.
Accessibility - Assistive technology testing.
Usability - Is it clear enough what the content is? Or do iframes normally use context to help?
Refactor: JavaScript and CSS code is scrappy and prototypy
Allow you to change the content explaining DNT.
Try making this into a custom element

Other examples

Medium.com

DuckDuckGo

Resources

View Source or Remix this in Glitch

with ❤ from @nickcolley 🐦