Script de demande d'autorisation de ciblage (pour conformité RGPD, respecte DNT)

tracking_authorization.css

dialog#tracking_authorization_dialog[open] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;

  padding: 2em calc((90vw - 990px) / 2);
  font-size: .8em;

  border: none;
  border-top: 1px solid #989898;
  box-shadow: -1em 2em 1em 2em rgba(0,0,0,.3);

  z-index: 999;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

dialog#tracking_authorization_dialog p {
  flex: 1 0;
  margin: 0;
  padding: 0 1em;
}
dialog#tracking_authorization_dialog menu {
  flex: 0 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 1em;
}
dialog#tracking_authorization_dialog button {
  padding: .3em 1em;
  margin: .3em 0;
  font-size: .85em;
  border: 1px solid currentColor;
  cursor: pointer;
}

@media only screen and (max-width: 990px) {
  dialog#tracking_authorization_dialog[open] {
    top: 50vh;
    bottom: 0;
    height: 50vh;
    flex-direction: column;
    box-shadow: none;
  }
  dialog#tracking_authorization_dialog p {
    overflow: scroll;
    box-shadow: inset 0 -3em 1em -3em rgba(0,0,0,.5);
    padding-bottom: 2em;
  }
  dialog#tracking_authorization_dialog menu {
    margin-top: 1em;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
  }
}

tracking_authorization.js

// Defaults

// Number of days for the cookie 
days = 365;

dialog_message = "L’administrateur désire collecter certaines informations relatives à votre visite à des fins de statistiques. Aucune donnée ne sera communiquée à des tiers. Pour en savoir plus, vous pouvez consulter notre page dédiée à <a href='/vie-privee'>la vie privée</a>.<br>Si vous ne désirez pas partager ces informations avec nous, veuillez cliquer sur Refuser, un <em>cookie</em> sera ajouté pour ne plus afficher ce message.<br>Si vous enclenchez l’option “Do Not Track” (“Ne pas me cibler”) sur votre navigateur vous n’aurez plus ce message, et nous ne vous ciblerons jamais.";
dialog_button_allow = "Accepter";
dialog_button_disallow = "Refuser";


// Functions
function execute_order_66 () {
  // All your tracking things are belong to here

}

// Display dialog
function display_dialog() {
  var dialogElement = document.createElement('dialog');
  dialogElement.setAttribute('id', 'tracking_authorization_dialog');
  dialogElement.innerHTML = '<p>' + dialog_message + '</p>';
  var dialog_menu = '<menu><button id="disallow_tracking">';
  dialog_menu += dialog_button_disallow;
  dialog_menu += '</button><button id="allow_tracking">';
  dialog_menu += dialog_button_allow;
  dialog_menu += '</button></menu>';
  dialogElement.innerHTML += dialog_menu;
  document.body.appendChild(dialogElement);
  dialogElement.setAttribute('open', 'open');


  var allowButton = document.getElementById('allow_tracking');
  var disallowButton = document.getElementById('disallow_tracking');

  var d = new Date;
      d.setTime(d.getTime() + 24*60*60*1000*days);

  disallowButton.addEventListener('click', function() {
    setCookie('tracking_agreement', 0, d);
    dialogElement.removeAttribute('open');
  });
  allowButton.addEventListener('click', function() {
    setCookie('tracking_agreement', 1, d);
    execute_order_66();
    dialogElement.removeAttribute('open');
  });

}

// Helper functions : GetCookie
function getCookie(name) {
    var v = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
    return v ? v[2] : null;
}
// Helper functions : SetCookie
function setCookie(name, value, days) {
    var d = new Date;
    d.setTime(d.getTime() + 24*60*60*1000*days);
    document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}

function run() {
  // Only execute if there’s no Do Not Track enabled.
  if(navigator.doNotTrack != 1) {
    // If DNT is not enabled
    console.log("You did not choose to not be tracked, don’t hesitate to check the “Do Not Track” option in your browser preferences.");

    // Check if there’s a cookie
    if(!getCookie('tracking_agreement')) {
      display_dialog();
    } else if (getCookie('tracking_agreement') == 1) {
      execute_order_66();
    } else {
      // Well, they ain’t allowed us to track them, have they?
      // Yep.
      // So we do nothin’ more.
      // Got it!
    }
  } else {
    // If DNT is enabled
    console.log("You chose not to be tracked, good for you!");
  }
};


// in case the document is already rendered
if (document.readyState!='loading') run();
// modern browsers
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
    if (document.readyState=='complete') run();
});