(feat) google analytics V4

.eslintrc

@@ -13,7 +13,9 @@
     "angular": true,
     "Fablab": true,
     "moment": true,
-    "_": true
+    "_": true,
+    "Humanize": true,
+    "GTM": true
   },
   "plugins": ["lint-erb"],
   "overrides": [

app/frontend/src/javascript/app.js

@@ -17,7 +17,7 @@ angular.module('application', ['ngCookies', 'ngResource', 'ngSanitize', 'ui.rout
   'ngUpload', 'duScroll', 'application.filters', 'application.services', 'application.directives',
   'frapontillo.bootstrap-switch', 'application.controllers', 'application.router', 'application.components',
   'ui.select', 'ui.calendar', 'angularMoment', 'Devise', 'angular-growl', 'xeditable',
-  'checklist-model', 'unsavedChanges', 'angular-loading-bar', 'ngTouch', 'angular-google-analytics',
+  'checklist-model', 'unsavedChanges', 'angular-loading-bar', 'ngTouch',
   'angularUtils.directives.dirDisqus', 'summernote', 'elasticsearch', 'angular-medium-editor', 'naif.base64',
   'minicolors', 'pascalprecht.translate', 'ngFitText', 'ngAside', 'ngCapsLock', 'vcRecaptcha', 'ui.codemirror',
   'bm.uiTour'])
@@ -27,9 +27,7 @@ angular.module('application', ['ngCookies', 'ngResource', 'ngSanitize', 'ui.rout
       // first we check the user acceptance
       const cookiesConsent = document.cookie.replace(/(?:(?:^|.*;\s*)fab-manager-cookies-consent\s*=\s*([^;]*).*$)|^.*$/, '$1');
       if (cookiesConsent === 'accept') {
-        // TODO: account configuration (Fablab.trackingId)
-        // TODO: domain configuration (Fablab.baseHostUrl)
-        // TODO: handle page change
+        GTM.enableAnalytics(Fablab.trackingId);
       } else {
         // if the cookies were not explicitly accepted, delete them
         document.cookie = '_ga=; expires=Thu, 01 Jan 1970 00:00:00 GMT';

app/frontend/src/javascript/controllers/cookies.js

@@ -13,28 +13,20 @@ Application.Controllers.controller('CookiesController', ['$scope', '$cookies', '
     // link pointed by "learn more"
     $scope.learnMoreUrl = 'https://www.cookiesandyou.com/';
 
-    // current user wallet
+    // add a cookie to the browser, saving the user choice to refuse cookies
     $scope.declineCookies = function () {
       const expires = moment().add(13, 'months').toDate();
       $cookies.put('fab-manager-cookies-consent', 'decline', { expires });
       readCookie();
     };
 
-    // current wallet transactions
+    // add a cookie to the browser, saving the user choice to accept cookies.
+    // Then enable the analytics
     $scope.acceptCookies = function () {
       const expires = moment().add(13, 'months').toDate();
       $cookies.put('fab-manager-cookies-consent', 'accept', { expires });
       readCookie();
-      // enable tracking using code provided by google analytics
-      /* eslint-disable */
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-      ga('create', Fablab.trackingId, 'auto');
-      ga('send', 'pageview');
-      /* eslint-enable */
+      GTM.enableAnalytics(Fablab.trackingId);
     };
 
     /* PRIVATE SCOPE */
@@ -44,7 +36,7 @@ Application.Controllers.controller('CookiesController', ['$scope', '$cookies', '
      */
     const initialize = function () {
       readCookie();
-      // if the privacy policy was defined, redirect the user to it
+      // if the privacy policy was defined, redirect the user to it when clicking on "read more"
       Setting.get({ name: 'privacy_body' }, data => {
         if (data.setting.value) {
           $scope.learnMoreUrl = '#!/privacy-policy';

app/frontend/src/javascript/filters/filters.js

@@ -1,8 +1,3 @@
-/* eslint-disable
-    no-undef,
-*/
-// TODO: This file was created by bulk-decaffeinate.
-// Fix any style issues and re-enable lint.
 /*
  * decaffeinate suggestions:
  * DS101: Remove unnecessary use of Array.from
@@ -135,7 +130,7 @@ Application.Filters.filter('projectsCollabored', [function () {
   };
 }]);
 
-// depend on humanize.js lib in /vendor
+// depend on app/frontend/src/javascript/lib/humanize.js
 Application.Filters.filter('humanize', [function () {
   return (element, param) => Humanize.truncate(element, param, null);
 }]);

app/frontend/src/javascript/lib/gtm.js

@@ -0,0 +1,23 @@
+// this script loads the google tag manager, used by Google Analytics V4
+(function () {
+  const GTM = {};
+
+  GTM.enableAnalytics = function (trackingId) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag () { window.dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', trackingId);
+
+    const node = document.createElement('script');
+    const firstScript = document.getElementsByTagName('script')[0];
+    node.async = true;
+    node.src = `//www.googletagmanager.com/gtag/js?id=${trackingId}`;
+    firstScript.parentNode.insertBefore(node, firstScript);
+  };
+
+  this.GTM = GTM;
+
+  if (typeof module !== 'undefined' && module !== null) {
+    module.exports = GTM;
+  }
+}).call(this);

app/models/setting.rb

@@ -195,4 +195,11 @@ class Setting < ApplicationRecord
     setting = find_or_initialize_by(name: name)
     setting.save && setting.history_values.create(invoicing_profile: user.invoicing_profile, value: value.to_s)
   end
+
+  ##
+  # Check if the given setting was set
+  ##
+  def self.set?(name)
+    find_by(name: name)&.value.nil? ? false : true
+  end
 end

config/locales/app.admin.en.yml

@@ -1381,7 +1381,7 @@ en:
             online_payment: "Is the online payment module active?"
             invoices: "Is the invoicing module active?"
             openlab: "Is the project sharing module (OpenLab) active?"
-          tracking_id_info_html: "<p>To enable the statistical tracking of the visits using Google Analytics, set your tracking ID here. It is in the form UA-000000-2. Visit <a href='https://analytics.google.com/analytics/web/' target='_blank'>the Google Analytics website</a> to get one.<br/><strong>Warning:</strong> if you enable this feature, remember to write it in your privacy policy, above.</p><p>The host name is also required to use Google Analytics. You can get it by clicking on the adjacent button. This last parameter is used elsewhere, please set it carefully.</p>"
+          tracking_id_info_html: "To enable the statistical tracking of the visits using Google Analytics V4, set your tracking ID here. It is in the form G-XXXXXX. Visit <a href='https://analytics.google.com/analytics/web/' target='_blank'>the Google Analytics website</a> to get one.<br/><strong>Warning:</strong> if you enable this feature, a cookie will be created. Remember to write it down in your privacy policy, above."
           tracking_id: "Tracking ID"
       open_api_clients:
         add_new_client: "Create new API client"

config/webpack/webpack.config.js

@@ -28,6 +28,7 @@ const customConfig = {
       'window.CodeMirror': 'codemirror',
       MediumEditor: 'medium-editor',
       Humanize: path.resolve(path.join(__dirname, '../../app/frontend/src/javascript/lib/humanize.js')),
+      GTM: path.resolve(path.join(__dirname, '../../app/frontend/src/javascript/lib/gtm.js')),
       moment: 'moment',
       Application: [path.resolve(path.join(__dirname, '../../app/frontend/src/javascript/app.js')), 'Application'],
       process: 'process/browser'