GDPR Compliant Google Analytics Embed Plugin - jQuery cookieWall

Are you using Google Analytics on your website, but worried about how it collects and processes data? If you are, then the solution is simple. Use an alternative that is compliant with GDPR. To help you with this I'd like to share you with the GDPR Compliant Google Analytics Embed Plugin.

This plugin shows a cookie consent (data collection policy) popup on your site when a user visits your website for the first time. The popup displays how Google Analytics collects your personal data and loads the Google Analytics tracking code when your user clicks the "Accept" button. If the user doesn't agree, he can simply click "No thanks" button and the cookie consent popup will be closed.

How to use it:

1. Include the jquery.cookiewall.js script after the latest jQuery library has been loaded.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.cookiewall.js"></script>

2. Initialize the plugin, define your site info, and insert your Google Analytics tracking id to the id option as follows:

$(document).cookieWall({
  website: {
    name: 'jQuery Script',
    url: 'https://www.jqueryscript.net/'
  },
  id: 'G-1VDDWMRSTH',
});

3. Customize the cookie consent modal popup.

$(document).cookieWall({
  
  website: {
    name: 'jQuery Script',
    url: 'https://www.jqueryscript.net/'
  },
  id: 'G-1VDDWMRSTH',

  // add your site logo
  logo: {
    url: '',
    width: '',
    align: 'left',
    margin: '0'
  },

  // customize the modal popup
  modal: {
    hrColor: '#b3b3b3',
    fontColor: '#3c3c3c',
    backgroundColor: '#fafafa'
  },

  // customize the Accept and Refuse buttons
  button: {
    acceptColor: '#0a9919',
    acceptColorHover: '#076212',
    refuseColor: '#a40606',
    refuseColorHover: '#7b0505',
  },

});

4. By default the consent is kept for 10 days. You can customize the cookie-wall as follows.

$(document).cookieWall({
  
  website: {
    name: 'jQuery Script',
    url: 'https://www.jqueryscript.net/'
  },
  id: 'G-1VDDWMRSTH',

  cookie: {
    name: 'cookie-wall',
    days: 10,
    path: '/'
  },

});

5. Customize the Google Analytics cookie settings.

$(document).cookieWall({
  
  website: {
    name: 'jQuery Script',
    url: 'https://www.jqueryscript.net/'
  },
  id: 'G-1VDDWMRSTH',

  tag: {
    cookiePrefix: '',
    cookieDomain: '',
    cookieExpires: '',
    cookieUpdate: ''
  },

});

6. Set the language of the cookie consent popup. "fr' or "en".

$(document).cookieWall({
  
  website: {
    name: 'jQuery Script',
    url: 'https://www.jqueryscript.net/'
  },
  id: 'G-1VDDWMRSTH',

  lang: 'en',

});

7. Add more languages to the plugin.

const content = {
  title: {
      fr: `Politique de collecte des données`,
      en: `Data collection policy`
  },
  message: {
      fr: `<b>Des fichiers cookies sont utilisés pour analyser le trafic du site ${params.website.url} par le service Google Analytics.</b><br><br>Des informations concernant votre navigation et votre utilisation du site sont transmises ${params.website.name.length > 0 ? ' à ' + params.website.name : ''} et seront analysées <b>de façon anonyme</b> pour améliorer nos services. Les données seront transmises aux États-Unis et sont soumises à <a href="https://policies.google.com/privacy?hl=fr-FR" target="_blank" title="Politique de confidentialité de Google" style="color:inherit;font-weight:bold;">la politique de confidentialité de Google</a>.`,
      en: `<b>Cookie files are used to analyze ${params.website.url} website traffic by Google Analytics service.</b><br><br>Information about your browsing and use of the website is transmitted ${params.website.name.length > 0 ? ' to ' + params.website.name : ''} and will be analyzed <b>anonymously</b> to improve services. The data will be transmitted to the United States and are subject to <a href="https://policies.google.com/privacy?hl=en-US" target="_blank" title="Google privacy policy" style="color:inherit;font-weight:bold;">the Google privacy policy</a>.`
  },
  titleList: {
      fr: `Liste des cookies`,
      en: `List of cookies`
  },
  list: {
      fr: `<ul><li><b>_ga</b> : Utilisé pour distinguer les utilisateurs (expire au bout de 2 ans)</li><li><b>_gid</b> : Utilisé pour distinguer les utilisateurs (expire au bout de 24 heures)</li><li><b>_gat</b> : Utilisé pour limiter le taux de demande (expire au bout de 1 minute)</li></ul>`,
      en: `<ul><li><b>_ga</b>: Used to distinguish users (expires after 2 years)</li><li><b>_gid</b>: Used to distinguish users (expires after 24 hours)</li><li><b>_gat</b>: Used to limit request rate (expires after 1 minute)</li></ul>`
  },
  conservation: {
      fr: `Votre consentement est conservé pendant <b>${params.cookie.days}</b> jour${params.cookie.days > 1 ? 's' : ''}. Vous pouvez réinitialiser votre consentement en supprimant le cookie <b>${params.cookie.name}</b> des données de votre navigateur.`,
      en: `Your consent is kept for <b>${params.cookie.days}</b> day${params.cookie.days > 1 ? 's' : ''}. You can reset your consent by deleting the <b>${params.cookie.name}</b> cookie from your browser data.`
  },
  accepted: {
      fr: `Accepter`,
      en: `Accept`
  },
  refused: {
      fr: `Non merci`,
      en: `No thanks`
  }
};

---

This awesome jQuery plugin is developed by julienagullo. For more Advanced Usages, please check the demo page or visit the official website.