add alt img and enhance analytics

control/content/index.html

@@ -33,6 +33,8 @@
     <!-- Import WYSIWYG -->
     <script src="../../../../scripts/tinymce/tinymce.min.js"></script>
 
+    <script src="../../widget/js/analyticsKey.js"></script>
+
     <!-- build:bundleCSSFiles  -->
     <!-- Sortable list css  -->
     <link rel="stylesheet" href="css/sortableList.css" />
@@ -291,6 +293,9 @@ <h1 class="section__title">Metrics</h1>
     <script src="js/authManager.js"></script>
     <script src="../settings/js/classes/settings.js"></script>
     <script src="js/breadcrumb.js"></script>
+    <script>
+      Analytics.init();
+    </script>
 
     <script src="app.js"></script>
     <!-- endbuild -->

control/content/js/classes/analytics.js

@@ -1,18 +1,36 @@
 class Analytics {
   constructor() {}
   // Register plugin events for analytics
-  static registerEvent(title, key, description, silentNotification = true) {
-    buildfire.analytics.registerEvent(
-      {
-        title: title,
-        key: key,
-        description: description,
-      },
-      { silentNotification }
-    );
-  }
+  static registerEvent = (event, options, callback) => {
+    if (event.title && event.key) {
+      let _options = options.silentNotification || true;
+      buildfire.analytics.registerEvent(event, _options, (err, res) => {
+        if (err) return callback(err, null);
+        {
+          return callback(null, res)
+        };
+      });
+    }
+  };
 
   static unregisterEvent(id) {
     buildfire.analytics.unregisterEvent(`METRIC_${id}_HISTORY_UPDATE`);
   }
-}
+
+  static init = () => {
+    AnalyticsKey.eventType.forEach((e) => {
+      Analytics.registerEvent(
+        {
+          title: e.title,
+          key: e.key,
+          description: e.description,
+        },
+        { silentNotification: false },
+        (err, res) => {
+          if (err) console.error(err);
+          else return res;
+        }
+      );
+    });
+  }
+};

widget/app.js

@@ -260,6 +260,8 @@ const checkIncreaseOrDecrease = (metrics) => {
 
   percentage = percentage.toPrecision(3);
 
+  (percentage === "100") ? Analytics.trackAction(AnalyticsKey.eventType[1].key) : false;
+
   summaryPreviousValueContainer.innerHTML = `
       <i
       class="material-icons mdc-button__icon ${situationClass} trending-icon">${situation}</i >

widget/index.html

@@ -20,6 +20,8 @@
       type="text/javascript"
     ></script>
 
+    <script src="js/analyticsKey.js"></script>
+
     <!-- Material Icons -->
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"

widget/js/analyticsKey.js

@@ -0,0 +1,14 @@
+const AnalyticsKey = {
+    eventType: [
+      {
+        key: "Matrics_Viewed",
+        title: "Matrics Viewed",
+        description: "Occurs when a user view matrics",
+      },
+      {
+        key: "Matrics_Completed",
+        title: "Matrics Completed",
+        description: "Occurs when a user completed a matrics",
+      }
+    ],
+  };

widget/js/lib/listView.js

@@ -119,6 +119,8 @@ class ListViewItem {
         });
       // local
       else img.src = this.icon;
+      let data_title = this.title || "Metric"
+      img.setAttribute("alt",data_title);
 
       ui.create("i", imgContainer, null, ["listViewItemIcon"]);
     }
@@ -200,6 +202,7 @@ class ListViewItem {
       ]);
 
       listViewItemToolbar.onclick = (e) => {
+        Analytics.trackAction(AnalyticsKey.eventType[0].key);
         t.onToolbarClicked("btnBadge", t, e);
         e.preventDefault();
         e.stopPropagation();