Adding custom events for analytics

src/actions/app.js

@@ -1,4 +1,5 @@
 import { UPDATE_NAV_STATE, LOG_IN } from './action-types';
+import { sendGevents } from '../utils/gevents';
 
 
 export function updateState(flag) {
@@ -8,7 +9,8 @@ export function updateState(flag) {
     });
 }
 
-export function login() {
+export function login(action) {
+    sendGevents({ narrative: action, name: 'Login'});
     return ({
         type: LOG_IN,
     });

src/components/validate/validate-rules.js

@@ -10,6 +10,7 @@ import * as Message from '../../constants/messages';
 import { validateRuleset } from '../../validations/rule-validation';
 import Loader from '../loader/loader';
 import { ViewOutcomes } from '../attributes/view-attributes';
+import { sendGevents } from '../../utils/gevents';
 
 class ValidateRules extends Component {
 
@@ -65,6 +66,7 @@ class ValidateRules extends Component {
         }).catch((e) => {
             this.setState({loading: false, error: true, errorMessage: e.error, result: true, });
         });
+        sendGevents({ narrative: 'validate rules', name: 'Validate' });
     }
 
     attributeItems = () => {

src/containers/app/app-container.js

@@ -8,6 +8,7 @@ import { updateRulesetIndex } from '../../actions/ruleset';
 import { updateState } from '../../actions/app';
 import { createHashHistory } from 'history';
 import ApperanceContext from '../../context/apperance-context';
+import { sendGevents } from '../../utils/gevents';
 
 class ApplicationContainer extends Component {
 
@@ -21,6 +22,7 @@ class ApplicationContainer extends Component {
             const theme = { ...this.state.theme, background: value };
             document.body.className = value;
             this.setState({ theme });
+            sendGevents({ narrative: 'value', name: 'Theme' });
         }
         this.state = {theme: { background: 'light', toggleBackground: this.toggleBackground }};
     }

src/containers/home/home-container.js

@@ -13,6 +13,7 @@ import Notification from '../../components/notification/notification';
 import { RULE_AVAILABLE_UPLOAD, RULE_UPLOAD_ERROR } from '../../constants/messages';
 import ApperanceContext from '../../context/apperance-context';
 import { faCloudArrowUp } from '@fortawesome/free-solid-svg-icons'
+import { sendGevents } from '../../utils/gevents';
 
 
 function readFile(file, cb) {
@@ -120,14 +121,14 @@ class HomeContainer extends Component {
     handleUpload() {
       if(this.state.ruleset.length > 0) {
         this.props.uploadRuleset(this.state.ruleset);
-        this.navigate('./ruleset');
+        this.navigate('./ruleset', 'upload');
       }
     }
 
-    navigate(location)  {
+    navigate(location, action)  {
       const history = createHashHistory();
-      this.props.login();
-      history.push(location); 
+      this.props.login(action);
+      history.push(location);
     }
 
     render() {
@@ -147,7 +148,7 @@ class HomeContainer extends Component {
             </div>
             <div className="btn-group">
               <Button label={"Upload"} onConfirm={this.handleUpload} classname="primary-btn" type="button" />
-              {!this.props.loggedIn && <Button label={"Create"} onConfirm={() => this.navigate('./create-ruleset')} classname="primary-btn" type="button" disabled={this.state.files.length > 0} />}
+              {!this.props.loggedIn && <Button label={"Create"} onConfirm={() => this.navigate('./create-ruleset', 'create')} classname="primary-btn" type="button" disabled={this.state.files.length > 0} />}
             </div>
           </TitlePanel>
         </div>
@@ -183,7 +184,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
 
-  login: () => dispatch(login()),
+  login: (action) => dispatch(login(action)),
   uploadRuleset: (ruleset) =>  dispatch(uploadRuleset(ruleset)),
 
 });

src/containers/ruleset/ruleset-container.js

@@ -15,6 +15,7 @@ import * as Message from '../../constants/messages';
 import { groupBy } from 'lodash/collection';
 import RuleErrorBoundary from '../../components/error/ruleset-error';
 import SweetAlert from 'react-bootstrap-sweetalert';
+import { sendGevents } from '../../utils/gevents';
 
 const tabs = [{name: 'Facts'}, {name: 'Decisions'}, {name: 'Validate'}, {name: 'Generate'}];
 class RulesetContainer extends Component {
@@ -40,6 +41,7 @@ class RulesetContainer extends Component {
       link.href = url;
       link.click();
       this.setState({ generateFlag: true });
+      sendGevents({ narrative: 'generate', name: 'Ruleset' });
     }
 
     cancelAlert() {

src/data-objects/footer-links.json

@@ -1,7 +1,7 @@
 [
 
     {
-        "label": "v1.0.0"
+        "label": "v1.2.0"
     },
     {
         "label": "Report issue",

src/utils/gevents.js

@@ -0,0 +1,8 @@
+
+
+export const sendGevents = (event) => {
+    gtag('event', event.name, {
+        action: event.narrative,
+        pageName: event.pageName || event.name,
+      });
+};