V4

README.md

@@ -29,33 +29,68 @@ yarn add ga-track
 import GATrack from 'ga-track';
 ```
 
+Any element with `data-ga-track` as an attribute, will be tracked on click. Here's a quick reference:
+
+|  Attribute             | Description  | Default  |
+|------------------------|-----------------------|---|
+| `data-ga-track`        | Needed for autotracking. If a value is given it serves as the event's name. | `ga-track`  |
+| `data-ga-track-name`        | Name of the event. This Field is required. | `click`    |
+| `data-ga-track-params`        | Params of the event. This Field is required. | `{ name: `Element's textContent`, value: `Element's href` }`  |
+| `data-ga-track-label`  | Label of the event. Optional Field. |  not set |
+| `data-ga-track-action` | Action of the event. Optional Field. |  not set |
+| `data-ga-track-category` | Category of the event. Optional Field. |  not set |
+| `data-ga-track-href`   | Should this be `false` the link **won't** be navigated to. Otherwise `ga-track` will wait till the track happens and then navigates.  |  Element's `href` |
+
 ## Methods
 
-### sendEvent(category, action, label)
 
-Manually sends an event to Google Analytics. Returns a promise.
+### sendEvent(name, event_params)
 
 #### Parameters:
 
-`category` - {string} - Event's category.
+`name` - {string}
+
+`event_params` - {Array of strings} - custom or [recommend](https://support.google.com/analytics/answer/9267735) event params ([25 max](https://support.google.com/analytics/answer/9267744?hl=en)).
+V4
+
+```
+GATrack.sendEvent('read_article',[{name: 'author', value: 'David Mitchell'}, {name: 'title', value: 'Cloud Atlas'}]);
+```
+
 
-`action` - {string} - Event's action.
+### sendEventOldGA(action, category, label)
+if you want to create a custom event using the old GA events structure you can use this method
 
-`label` - {string} - Event's label.
+the event will be send using this structure:
+```
+events: {
+  name: action
+  params: {
+    event_category: category
+    event_label: label
+  }
+}
+```
+
+#### Parameters:
+
+`action` - {string}
 
-### sendData()
+`category` - {string}
 
-Safely pass data to Google Analytics:
+`label` - {string}
 
-```javascript
-GATrack.sendData('set', 'dimension2', 'member');
+```
+GATrack.sendEventOldGA('click', 'books', 'sci-fi' );
 ```
 
+
 ## Options
 
+
 ### Debug Mode
 
-```js
+```
 import GATrack from 'ga-track';
 
 GATrack.debug = true;
@@ -69,17 +104,6 @@ import GATrack from 'ga-track';
 GATrack.trackerName = 'SomeTrackerName';
 ```
 
-### Forcing a provider
-
-Supported values: `''`, `'ga'`, `'gaq'`, `'gtag'`
-
-This is useful if you have multiple tags on the same page but only want to use one of them.
-
-```js
-import GATrack from 'ga-track';
-
-GATrack.force = 'ga';
-```
 
 ### Category Prefix
 

index.js

@@ -1,44 +1,170 @@
 /* global window */
 
+import { on, find, ready, closest, matches } from 'domassist';
+import aug from 'aug';
 class GATrack {
-  static prefix = null;
-  static debug = false;
-  static trackerName = '';
-  static force = null;
-
-  static async sendEvent(category, action, label) {
-    if (GATrack.prefix) {
-      category = `${GATrack.prefix}-${category}`;
+
+
+  static defaults = {
+    debug: (typeof window.localStorage === 'object' && window.localStorage.getItem('GATrackDebug')),
+    prefix: null,
+    trackerName: '',
+    force: null,
+    defaults: {
+      timeout: 1000
+    },
+    autotracking: false,
+  }
+
+
+  onTrackedClick(element, event, options) {
+    const data = GATrack.getData(element, options);
+    const target = element.getAttribute('target');
+    if (element.dataset.gaTrackHref === 'false') {
+      event.preventDefault();
+    } else if (data.href && !event.metaKey && event.which === 1 && target !== '_blank') {
+      event.preventDefault();
+    }
+    if (data.name && data.params) {
+      GATrack.sendEvent(data.name, data.params);
+    } else if (!data.name && !data.params) {
+      GATrack.sendEventOldGA(data.action, data.category, data.label);
+    }
+  }
+
+  track(element, options = {}) {
+    if (Array.isArray(element)) {
+      element.forEach(data => {
+        find(data.element).forEach(el => {
+          GATrack.track(el, data);
+        });
+      });
+
+      return;
+    }
+
+    if (typeof element.dataset.gaTrackInitialised !== 'undefined') {
+      return;
+    }
+
+    element.dataset.gaTrackInitialised = 'true';
+
+    options = aug({}, GATrack.defaults, options);
+
+    this.log('tracking', element, options);
+    on(element, 'click', event => {
+      GATrack.onTrackedClick(element, event, options);
+    });
+  }
+
+  // since we now use {name: string, params: []} instead of action, category, label
+  //  I'm defaulting the values of name and params for the autotracking
+  getData(element, options = {}) {
+    const href = element.dataset.gaTrackHref || element.getAttribute('href');
+    const category = element.dataset.gaTrackName || options.category;
+    const label = element.dataset.gaTrackParams || options.label;
+    const action = element.dataset.gaTrackAction || options.action;
+    const params = element.dataset.gaTrackParams || options.params || { name: element.textContent.trim(), value: href };
+    const name = element.dataset.gaTrackName || options.name || element.dataset.gaTrack || 'click';
+
+
+    return { href, category, label, action, params, name };
+  }
+
+  autotrack() {
+    if (GATrack.autotracking === true) {
+      return;
+    }
+
+    GATrack.autotracking = true;
+    const selector = '[data-ga-track]';
+
+    on(document.body, 'click', event => {
+      let element = event.target;
+
+      if (!matches(element, selector)) {
+        element = closest(element, selector);
+      }
+
+      if (element) {
+        GATrack.onTrackedClick(element, event, GATrack.defaults);
+      }
+    });
+  }
+
+  static async sendEventOldGA(action, category, label) {
+    if (this.prefix) {
+      category = `${this.prefix}-${category}`;
     }
 
     return new Promise(resolve => {
-      GATrack.log(category, action, label);
 
       if (!GATrack.isEnabled()) {
         GATrack.log('sendEvent', 'ga-track disabled');
         return resolve();
       }
 
-      if (GATrack.isGAQ()) {
-        window._gaq.push(['_trackEvent', category, action, label, null, false]);
-        window._gaq.push(resolve);
-      } else if (GATrack.isGTag()) {
-        // Gtag check needs to go before since gtag creates a ga variable
-        const payload = {
-          event_category: category,
-          event_label: label,
-          event_callback: resolve
-        };
-
-        GATrack.sendData('event', action, payload);
-      } else if (GATrack.isGA()) {
-        const options = {
-          transport: 'beacon',
-          hitCallback: resolve
-        };
-
-        GATrack.sendData('send', 'event', category, action, label, options);
+      let payload = {}
+        if (typeof action !== 'string') {
+          console.error("action has to be of type string");
+          return;
+        }
+
+        if(action === '' || action === null) {
+          console.error("action is required");
+          return;
+        }
+        payload = {
+          events: {
+            name: action,
+            params: {
+              event_category: category || '',
+              event_label: label || ''
+            }
+        }
+      }
+        this.sendData(payload);
+    });
+  }
+
+  static async sendEvent(name, params) {
+
+    if (typeof event_name !== 'string') {
+      console.error("event_name has to be of type string");
+      return;
+    }
+
+    if(event_name === '' || event_name === null) {
+      console.error("event name is required");
+      return;
+    }
+
+    if (event_params.length > 25) {
+      console.error("can't send more than 25 event params")
+      return;
+    }
+
+    if (this.prefix) {
+      name = `${this.prefix}-${name}`;
+    }
+
+
+    return new Promise(resolve => {
+
+      if (!this.isEnabled()) {
+        this.log('sendEvent', 'ga-track disabled');
+        return resolve();
+      }
+
+      let payload = {}
+
+        payload = {
+          events: {
+            name,
+            params
+        }
       }
+        this.sendData(payload);
     });
   }
 
@@ -48,7 +174,8 @@ class GATrack {
   // with how we previously did it in leanin-web and optionb /web
   static send(...args) {
     console.log(args);
-    return GATrack.sendData(...args);
+
+    return this.sendData(...args);
   }
 
   static sendData(...args) {
@@ -57,17 +184,24 @@ class GATrack {
       return;
     }
 
-    if (GATrack.isGTag()) {
-      console.log('sendData', 'gtag', ...args); //eslint-disable-line no-console
-      window.gtag.apply(null, args);
-    } else if (GATrack.isGA()) {
-      if (GATrack.trackerName) {
-        args[0] = `${GATrack.trackerName}.${args[0]}`;
+      window.dataLayer = window.dataLayer || [];
+      if (usesOldGA) {
+        window.dataLayer.push({
+          'event': `${args[0].events.name}`,
+          'event_category': [args[0].events.params.event_category],
+          'event_label': [args[0].events.params.event_label],
+        });
+      } else {
+        window.dataLayer.push({
+          'event': `${args[0].events.name}`,
+          'event_params': [args[0].events.params]
+        });
       }
-      console.log('sendData', 'ga', ...args); //eslint-disable-line no-console
-      window.ga.apply(null, args);
-    }
-    console.log('sendData', 'failed'); //eslint-disable-line no-console
+
+  }
+
+  static usesOldGA(...args) {
+    return args[0].events.params.event_category || args[0].events.params.event_label;
   }
 
   static isNullOrEnforced(provider) {
@@ -98,4 +232,16 @@ class GATrack {
   }
 }
 
+ready(() => {
+  if (!window._GATrack_) {
+    window._GATrack_ = GATrack;
+
+    if (typeof window.gaTrackerName_ !== 'undefined') {
+      GATrack.trackerName = window.gaTrackerName_;
+    }
+
+    GATrack.autotrack();
+  }
+});
+
 export default GATrack;