From d7c0798eeb2ae7293ea9a439dca1cb96487fb14d Mon Sep 17 00:00:00 2001 From: psiale Date: Wed, 4 May 2022 13:43:25 -0500 Subject: [PATCH 01/43] updating readme --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7d4908c..41891eb 100644 --- a/README.md +++ b/README.md @@ -31,13 +31,14 @@ import GATrack from 'ga-track'; ## Methods -### sendEvent(category, action, label) +### sendEvent(name, event_params) Manually sends an event to Google Analytics. Returns a promise. #### Parameters: +`name` - {string} -`category` - {string} - Event's category. +`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)). `action` - {string} - Event's action. From eb1f6b0b80d67b0afd2f29bbb1294819027d5cf9 Mon Sep 17 00:00:00 2001 From: psiale Date: Fri, 13 May 2022 12:08:32 -0500 Subject: [PATCH 02/43] working on G4 updates --- index.html | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..ed502a6 --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + + + + +
+ Click + Me + One + Time +
+
+ + + + +
+
+ Click me +
+ Or me +
+
+ + + + + \ No newline at end of file From 80be5353f8db3651d60c509c5a3a106ecbaa5aae Mon Sep 17 00:00:00 2001 From: psiale Date: Fri, 13 May 2022 12:12:38 -0500 Subject: [PATCH 03/43] added sendEventG4 --- index.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/index.js b/index.js index 53a07b1..b0065e2 100644 --- a/index.js +++ b/index.js @@ -5,6 +5,24 @@ class GATrack { static debug = false; static trackerName = ''; static force = null; + static g4 = false; + + static async sendEventG4(event_name, event_params) { + if(GATrack.isGTag && GATrack.g4) { + const events = event_params.map(element => ({ + [element]: element, + })); + const payload = { + events:[{ + name: event_name, + params: events + }], + } + GATrack.sendData(event_name, action, payload); + } + } + + static async sendEvent(category, action, label) { if (this.prefix) { From 80e631f695545e1e60c9b241720b173a9fac8a71 Mon Sep 17 00:00:00 2001 From: psiale Date: Fri, 13 May 2022 13:09:24 -0500 Subject: [PATCH 04/43] created sendEventG4 --- README.md | 25 ++++++++++++++++++++++--- index.js | 24 +++++++++++++++--------- 2 files changed, 37 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 41891eb..80a22d7 100644 --- a/README.md +++ b/README.md @@ -31,19 +31,30 @@ import GATrack from 'ga-track'; ## Methods -### sendEvent(name, event_params) +### sendEvent() Manually sends an event to Google Analytics. Returns a promise. #### Parameters: -`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)). `action` - {string} - Event's action. `label` - {string} - Event's label. +### sendEventV4() + +`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 +```javascript +GaTrack.G4 = true; +``` +```javascript +GATrack.sendData('read_article',[{name: 'author', value: 'David Mitchell'}, {name: 'title', value: 'Cloud Atlas'}]); +``` + ### sendData() Safely pass data to Google Analytics: @@ -54,6 +65,14 @@ GATrack.sendData('set', 'dimension2', 'member'); ## Options +### V4 +```js +import GATrack from 'ga-track'; + +GATrack.V4 = true; +``` +Allows you to use the [V4](#sendeventv4) version of sendEvent() + ### Debug Mode ```js diff --git a/index.js b/index.js index b0065e2..d66c759 100644 --- a/index.js +++ b/index.js @@ -5,24 +5,30 @@ class GATrack { static debug = false; static trackerName = ''; static force = null; - static g4 = false; + static V4 = false; - static async sendEventG4(event_name, event_params) { - if(GATrack.isGTag && GATrack.g4) { - const events = event_params.map(element => ({ - [element]: element, - })); + static async sendEventV4(event_name, event_params) { + if(GATrack.isGTag && GATrack.V4) { const payload = { events:[{ name: event_name, - params: events + params: event_params }], } - GATrack.sendData(event_name, action, payload); + + return new Promise(resolve => { + this.log(event_name, events) + if (!this.isEnabled()) { + this.log('sendEventV4', 'ga-track disabled'); + return resolve(); + } + this.sendData(payload); + }) } + null; } - + static async sendEvent(category, action, label) { if (this.prefix) { From 245559861897ed2a99fc75be9dc28d4e79861261 Mon Sep 17 00:00:00 2001 From: psiale Date: Fri, 13 May 2022 13:11:14 -0500 Subject: [PATCH 05/43] changed README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 80a22d7..8c016ed 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ import GATrack from 'ga-track'; ## Methods -### sendEvent() +### sendEvent(action, label) Manually sends an event to Google Analytics. Returns a promise. @@ -42,7 +42,7 @@ Manually sends an event to Google Analytics. Returns a promise. `label` - {string} - Event's label. -### sendEventV4() +### sendEventV4(name, event_params) `name` - {string} From 9736ceb9c6744ff12ed0a2bc33c695005935ea07 Mon Sep 17 00:00:00 2001 From: psiale Date: Fri, 13 May 2022 13:14:42 -0500 Subject: [PATCH 06/43] fixed readme --- README.md | 2 +- index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8c016ed..df8feaa 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ import GATrack from 'ga-track'; ## Methods -### sendEvent(action, label) +### sendEvent(category,action, label) Manually sends an event to Google Analytics. Returns a promise. diff --git a/index.js b/index.js index d66c759..face5ac 100644 --- a/index.js +++ b/index.js @@ -25,7 +25,7 @@ class GATrack { this.sendData(payload); }) } - null; + return; } From 4555ddb3aeceea9125275fae7ec80894708aa6a1 Mon Sep 17 00:00:00 2001 From: psiale Date: Fri, 13 May 2022 13:32:10 -0500 Subject: [PATCH 07/43] workin on example --- index.html | 62 ++++++++++++------------------------------------------ 1 file changed, 13 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index ed502a6..d247d5e 100644 --- a/index.html +++ b/index.html @@ -2,57 +2,21 @@ - - + + + - -
- Click - Me - One - Time -
-
- - - - -
-
- Click me -
- Or me -
-
- - - + \ No newline at end of file From fdd23264ef146958517c2098cd386f9043d2afd3 Mon Sep 17 00:00:00 2001 From: psiale Date: Fri, 13 May 2022 13:46:21 -0500 Subject: [PATCH 08/43] adding example --- README.md | 2 +- index.html | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index df8feaa..4ce5dfe 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ V4 GaTrack.G4 = true; ``` ```javascript -GATrack.sendData('read_article',[{name: 'author', value: 'David Mitchell'}, {name: 'title', value: 'Cloud Atlas'}]); +GATrack.sendEventV4('read_article',[{name: 'author', value: 'David Mitchell'}, {name: 'title', value: 'Cloud Atlas'}]); ``` ### sendData() diff --git a/index.html b/index.html index d247d5e..5c65caf 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,6 @@ - \ No newline at end of file From dbb2a9833fec0951bb8fd290c8604eb7108df243 Mon Sep 17 00:00:00 2001 From: psiale Date: Fri, 13 May 2022 15:13:10 -0500 Subject: [PATCH 09/43] handling error --- index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.js b/index.js index face5ac..a24fdfe 100644 --- a/index.js +++ b/index.js @@ -8,6 +8,10 @@ class GATrack { static V4 = false; static async sendEventV4(event_name, event_params) { + if (event_params.length > 25) { + console.error("can't send more than 25 event params") + return; + } if(GATrack.isGTag && GATrack.V4) { const payload = { events:[{ From 4a0ffaf2a4ba13793e2437717813bd2019308da1 Mon Sep 17 00:00:00 2001 From: psiale Date: Sat, 14 May 2022 17:57:01 -0500 Subject: [PATCH 10/43] handling error --- index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.js b/index.js index a24fdfe..e4db37e 100644 --- a/index.js +++ b/index.js @@ -8,6 +8,11 @@ class GATrack { static V4 = false; static async sendEventV4(event_name, event_params) { + 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; From 3db9b498ca782964a35fb9575408db3022a13fb0 Mon Sep 17 00:00:00 2001 From: psiale Date: Sat, 14 May 2022 18:01:06 -0500 Subject: [PATCH 11/43] handling error --- index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.js b/index.js index e4db37e..81f9386 100644 --- a/index.js +++ b/index.js @@ -8,6 +8,11 @@ class GATrack { static V4 = false; static async sendEventV4(event_name, event_params) { + if (GATrack.V4 === false) { + console.error('to use sendEventV4 change GATrack.V4 to true') + return; + } + if(event_name === '' || event_name === null) { console.error("event name is required"); return; From b19b96a896b307ec1bcdf56fc10746a9a8cb1394 Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 16 May 2022 14:02:47 -0500 Subject: [PATCH 12/43] error handling --- index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.js b/index.js index 81f9386..fca421e 100644 --- a/index.js +++ b/index.js @@ -13,6 +13,11 @@ class GATrack { return; } + 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; From 5bec4582f4b089790aa0e7402b325ca2c7bdf862 Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 16 May 2022 15:28:39 -0500 Subject: [PATCH 13/43] solved error --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index fca421e..5efb82a 100644 --- a/index.js +++ b/index.js @@ -36,7 +36,7 @@ class GATrack { } return new Promise(resolve => { - this.log(event_name, events) + this.log(event_name, event_params) if (!this.isEnabled()) { this.log('sendEventV4', 'ga-track disabled'); return resolve(); From 2d0c902c9513fe4d6f417c3cd0dd64bb1dd5f709 Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 16 May 2022 18:57:16 -0500 Subject: [PATCH 14/43] console log args" --- index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/index.js b/index.js index 5efb82a..7871c2c 100644 --- a/index.js +++ b/index.js @@ -47,8 +47,6 @@ class GATrack { return; } - - static async sendEvent(category, action, label) { if (this.prefix) { category = `${this.prefix}-${category}`; @@ -101,7 +99,7 @@ class GATrack { } if (this.isGTag()) { - window.gtag.apply(null, args); + console.log(window.gtag.apply(null, args)); } else if (this.isGA()) { if (this.trackerName) { args[0] = `${this.trackerName}.${args[0]}`; From 81676a92421efb1222934cb22851893ae4f84296 Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 16 May 2022 19:04:29 -0500 Subject: [PATCH 15/43] debugging --- index.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 7871c2c..f1d409b 100644 --- a/index.js +++ b/index.js @@ -27,7 +27,20 @@ class GATrack { console.error("can't send more than 25 event params") return; } - if(GATrack.isGTag && GATrack.V4) { + + if (GATrack.isGA()) { + console.error("I'm GA") + } + + if (GATrack.isGAQ()) { + console.error("I'm GAQ") + } + + if (GATrack.isGTag()) { + console.error("I'm GTag") + } + + if(GATrack.isGTag() && GATrack.V4) { const payload = { events:[{ name: event_name, From 217b1bed7b9bd48ac35c5b77634c6a89ccdcad5f Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 16 May 2022 19:12:11 -0500 Subject: [PATCH 16/43] debugging --- index.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/index.js b/index.js index f1d409b..5c9de12 100644 --- a/index.js +++ b/index.js @@ -28,17 +28,7 @@ class GATrack { return; } - if (GATrack.isGA()) { - console.error("I'm GA") - } - - if (GATrack.isGAQ()) { - console.error("I'm GAQ") - } - - if (GATrack.isGTag()) { - console.error("I'm GTag") - } + console.log(this.isEnabled()); if(GATrack.isGTag() && GATrack.V4) { const payload = { @@ -49,7 +39,7 @@ class GATrack { } return new Promise(resolve => { - this.log(event_name, event_params) + this.log(payload) if (!this.isEnabled()) { this.log('sendEventV4', 'ga-track disabled'); return resolve(); From 571e30b1444f53e2b84af007e0f2b605e543471e Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 16 May 2022 19:17:11 -0500 Subject: [PATCH 17/43] debugging --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 5c9de12..a11c57f 100644 --- a/index.js +++ b/index.js @@ -28,7 +28,7 @@ class GATrack { return; } - console.log(this.isEnabled()); + this.log(this.isEnabled()); if(GATrack.isGTag() && GATrack.V4) { const payload = { From c784013fc90769e91d87d7a9cfc6857cb8ea0a3f Mon Sep 17 00:00:00 2001 From: psiale Date: Tue, 17 May 2022 12:23:59 -0500 Subject: [PATCH 18/43] debugging --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index a11c57f..f402649 100644 --- a/index.js +++ b/index.js @@ -28,9 +28,9 @@ class GATrack { return; } - this.log(this.isEnabled()); if(GATrack.isGTag() && GATrack.V4) { + this.log(this.isEnabled()); const payload = { events:[{ name: event_name, From 1ce074ec3317e95a99c7917d21a489af8056f8b1 Mon Sep 17 00:00:00 2001 From: psiale Date: Tue, 17 May 2022 12:32:28 -0500 Subject: [PATCH 19/43] debugging --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index f402649..7de1477 100644 --- a/index.js +++ b/index.js @@ -30,7 +30,6 @@ class GATrack { if(GATrack.isGTag() && GATrack.V4) { - this.log(this.isEnabled()); const payload = { events:[{ name: event_name, @@ -39,7 +38,8 @@ class GATrack { } return new Promise(resolve => { - this.log(payload) + this.log(payload); + this.log(this.isEnabled()); if (!this.isEnabled()) { this.log('sendEventV4', 'ga-track disabled'); return resolve(); From 834364ed2e7d07b5a69e2c206f03723dbe1f513d Mon Sep 17 00:00:00 2001 From: psiale Date: Tue, 17 May 2022 15:25:34 -0500 Subject: [PATCH 20/43] debugging --- index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 7de1477..42d8c11 100644 --- a/index.js +++ b/index.js @@ -102,12 +102,13 @@ class GATrack { } if (this.isGTag()) { - console.log(window.gtag.apply(null, args)); + window.gtag.apply(null, args); + return; } else if (this.isGA()) { if (this.trackerName) { args[0] = `${this.trackerName}.${args[0]}`; } - + console.log(window.ga.apply(null, args)); window.ga.apply(null, args); } } From a43f8ab1a40b2bdde8c9fd48673b96a71f3fb6c2 Mon Sep 17 00:00:00 2001 From: psiale Date: Tue, 17 May 2022 17:55:13 -0500 Subject: [PATCH 21/43] adding client_id --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 42d8c11..5be6708 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,7 @@ class GATrack { static force = null; static V4 = false; - static async sendEventV4(event_name, event_params) { + static async sendEventV4(client_id, event_name, event_params) { if (GATrack.V4 === false) { console.error('to use sendEventV4 change GATrack.V4 to true') return; @@ -31,6 +31,7 @@ class GATrack { if(GATrack.isGTag() && GATrack.V4) { const payload = { + client_id: client_id, events:[{ name: event_name, params: event_params From cbcb6ead05e557f475a0a56d4383a10760249f28 Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 23 May 2022 11:11:52 -0500 Subject: [PATCH 22/43] using gtag method) --- index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 5be6708..8b3ba76 100644 --- a/index.js +++ b/index.js @@ -31,7 +31,6 @@ class GATrack { if(GATrack.isGTag() && GATrack.V4) { const payload = { - client_id: client_id, events:[{ name: event_name, params: event_params @@ -102,8 +101,8 @@ class GATrack { return; } - if (this.isGTag()) { - window.gtag.apply(null, args); + if (this.isGTag() && this.V4) { + gtag("event", `${args[0].events.name}`, args[0].events.params); return; } else if (this.isGA()) { if (this.trackerName) { From 8944ea56be1f81eb10a5da9baa22623511d09a99 Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 23 May 2022 11:17:32 -0500 Subject: [PATCH 23/43] removing unnecesary check for GTAg --- index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 8b3ba76..87012dd 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,7 @@ class GATrack { static force = null; static V4 = false; - static async sendEventV4(client_id, event_name, event_params) { + static async sendEventV4(event_name, event_params) { if (GATrack.V4 === false) { console.error('to use sendEventV4 change GATrack.V4 to true') return; @@ -29,7 +29,7 @@ class GATrack { } - if(GATrack.isGTag() && GATrack.V4) { + if(GATrack.V4) { const payload = { events:[{ name: event_name, @@ -101,7 +101,7 @@ class GATrack { return; } - if (this.isGTag() && this.V4) { + if (this.V4) { gtag("event", `${args[0].events.name}`, args[0].events.params); return; } else if (this.isGA()) { From 068c92361ed3a2320f90287f51e2cd7708c4c221 Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 23 May 2022 11:30:07 -0500 Subject: [PATCH 24/43] working --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 87012dd..fad7653 100644 --- a/index.js +++ b/index.js @@ -102,7 +102,7 @@ class GATrack { } if (this.V4) { - gtag("event", `${args[0].events.name}`, args[0].events.params); + window.gtag.apply("event", `${args[0].events.name}`, args[0].events.params); return; } else if (this.isGA()) { if (this.trackerName) { From b35ebf994629d9df3ffe94d3e3ca7fb04ad2055d Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 23 May 2022 12:01:47 -0500 Subject: [PATCH 25/43] working this out --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index fad7653..87012dd 100644 --- a/index.js +++ b/index.js @@ -102,7 +102,7 @@ class GATrack { } if (this.V4) { - window.gtag.apply("event", `${args[0].events.name}`, args[0].events.params); + gtag("event", `${args[0].events.name}`, args[0].events.params); return; } else if (this.isGA()) { if (this.trackerName) { From a9ab204b4d3b9566884b37f16ed5cebbaecc80f1 Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 23 May 2022 12:05:37 -0500 Subject: [PATCH 26/43] working this out --- index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 87012dd..69c66c7 100644 --- a/index.js +++ b/index.js @@ -102,8 +102,10 @@ class GATrack { } if (this.V4) { - gtag("event", `${args[0].events.name}`, args[0].events.params); - return; + setTimeout(() => { + gtag("event", `${args[0].events.name}`, args[0].events.params); + return; + }, 3000); } else if (this.isGA()) { if (this.trackerName) { args[0] = `${this.trackerName}.${args[0]}`; From 4a8c2400dc2901266b58a254be452239dcc5f6d1 Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 23 May 2022 12:19:58 -0500 Subject: [PATCH 27/43] changed sendEvent method to also use V4 --- README.md | 3 +-- index.js | 16 +++++++++++++++- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4ce5dfe..2cf7b1a 100644 --- a/README.md +++ b/README.md @@ -32,8 +32,7 @@ import GATrack from 'ga-track'; ## Methods ### sendEvent(category,action, label) - -Manually sends an event to Google Analytics. Returns a promise. +Manually sends an event to Google Analytics. Returns a promise.; #### Parameters: diff --git a/index.js b/index.js index 69c66c7..1110e69 100644 --- a/index.js +++ b/index.js @@ -56,6 +56,20 @@ class GATrack { } return new Promise(resolve => { + let payload = {} + if (this.V4) { + payload = { + events:[{ + name: action, + params: { + event_category: category, + event_label: label + } + }], + } + this.sendData(payload); + return; + } this.log(category, action, label); if (!this.isEnabled()) { @@ -68,7 +82,7 @@ class GATrack { window._gaq.push(resolve); } else if (this.isGTag()) { // Gtag check needs to go before since gtag creates a ga variable - const payload = { + payload = { event_category: category, event_label: label, event_callback: resolve From 76626e61791c2a2bbc1bf4af94e65bc8cb41d465 Mon Sep 17 00:00:00 2001 From: Alexis Sanchez Date: Tue, 24 May 2022 11:23:30 -0500 Subject: [PATCH 28/43] Update README.md Co-authored-by: Troy Whiteley <24781+dawnerd@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2cf7b1a..3d857a3 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ import GATrack from 'ga-track'; ## Methods ### sendEvent(category,action, label) -Manually sends an event to Google Analytics. Returns a promise.; +Manually sends an event to Google Analytics. Returns a promise. #### Parameters: From a982b21d1b503a39cd53c41e96a800cb6ec4dd6c Mon Sep 17 00:00:00 2001 From: psiale Date: Tue, 24 May 2022 11:31:46 -0500 Subject: [PATCH 29/43] done with requested changes --- index.html | 22 ----------------- index.js | 71 +++++++++++++----------------------------------------- 2 files changed, 17 insertions(+), 76 deletions(-) delete mode 100644 index.html diff --git a/index.html b/index.html deleted file mode 100644 index 5c65caf..0000000 --- a/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - \ No newline at end of file diff --git a/index.js b/index.js index 1110e69..f484272 100644 --- a/index.js +++ b/index.js @@ -7,48 +7,6 @@ class GATrack { static force = null; static V4 = false; - static async sendEventV4(event_name, event_params) { - if (GATrack.V4 === false) { - console.error('to use sendEventV4 change GATrack.V4 to true') - return; - } - - 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(GATrack.V4) { - const payload = { - events:[{ - name: event_name, - params: event_params - }], - } - - return new Promise(resolve => { - this.log(payload); - this.log(this.isEnabled()); - if (!this.isEnabled()) { - this.log('sendEventV4', 'ga-track disabled'); - return resolve(); - } - this.sendData(payload); - }) - } - return; - } static async sendEvent(category, action, label) { if (this.prefix) { @@ -56,8 +14,24 @@ class GATrack { } return new Promise(resolve => { + this.log(category, action, label); + + if (!this.isEnabled()) { + this.log('sendEvent', 'ga-track disabled'); + return resolve(); + } + let payload = {} if (this.V4) { + 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, @@ -68,13 +42,6 @@ class GATrack { }], } this.sendData(payload); - return; - } - this.log(category, action, label); - - if (!this.isEnabled()) { - this.log('sendEvent', 'ga-track disabled'); - return resolve(); } if (this.isGAQ()) { @@ -116,15 +83,11 @@ class GATrack { } if (this.V4) { - setTimeout(() => { - gtag("event", `${args[0].events.name}`, args[0].events.params); - return; - }, 3000); + gtag("event", `${args[0].events.name}`, args[0].events.params); } else if (this.isGA()) { if (this.trackerName) { args[0] = `${this.trackerName}.${args[0]}`; } - console.log(window.ga.apply(null, args)); window.ga.apply(null, args); } } From d4a6a3746aabac62a82a64e05483e78587247c3e Mon Sep 17 00:00:00 2001 From: psiale Date: Wed, 1 Jun 2022 15:34:51 -0500 Subject: [PATCH 30/43] working on GA using dataLayer --- index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index f484272..2014942 100644 --- a/index.js +++ b/index.js @@ -83,7 +83,11 @@ class GATrack { } if (this.V4) { - gtag("event", `${args[0].events.name}`, args[0].events.params); + dataLayer.push({ + 'event': `${args[0].events.name}`, + 'event_category': [args[0].events.params.event_category], + 'event_label': [args[0].events.params.event_label], + }); } else if (this.isGA()) { if (this.trackerName) { args[0] = `${this.trackerName}.${args[0]}`; From 6a00989da95752c81f50fbcd8c30400d052a68b5 Mon Sep 17 00:00:00 2001 From: psiale Date: Wed, 1 Jun 2022 15:49:09 -0500 Subject: [PATCH 31/43] working on GA using dataLayer --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index 2014942..578b712 100644 --- a/index.js +++ b/index.js @@ -83,6 +83,7 @@ class GATrack { } if (this.V4) { + this.log(args) dataLayer.push({ 'event': `${args[0].events.name}`, 'event_category': [args[0].events.params.event_category], From 0186efd11aa44e3a306d0932e1619a7b8ca7aa36 Mon Sep 17 00:00:00 2001 From: psiale Date: Wed, 1 Jun 2022 15:53:33 -0500 Subject: [PATCH 32/43] working on GA using dataLayer --- index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 578b712..450dff3 100644 --- a/index.js +++ b/index.js @@ -83,11 +83,11 @@ class GATrack { } if (this.V4) { - this.log(args) + this.log(args[0].events[0]) dataLayer.push({ - 'event': `${args[0].events.name}`, - 'event_category': [args[0].events.params.event_category], - 'event_label': [args[0].events.params.event_label], + 'event': `${args[0].events[0].name}`, + 'event_category': [args[0].events[0].params.event_category], + 'event_label': [args[0].events[0].params.event_label], }); } else if (this.isGA()) { if (this.trackerName) { From 77c90dd5157c9a02823c26666944c003de60ada3 Mon Sep 17 00:00:00 2001 From: psiale Date: Wed, 1 Jun 2022 16:00:23 -0500 Subject: [PATCH 33/43] working on GA using dataLayer --- index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 450dff3..1aa6b1c 100644 --- a/index.js +++ b/index.js @@ -83,11 +83,12 @@ class GATrack { } if (this.V4) { - this.log(args[0].events[0]) + this.log(args[0].name) + this.log(args[0].params) dataLayer.push({ - 'event': `${args[0].events[0].name}`, - 'event_category': [args[0].events[0].params.event_category], - 'event_label': [args[0].events[0].params.event_label], + 'event': `${args[0].name}`, + 'event_category': [args[0].params.event_category], + 'event_label': [args[0].params.event_label], }); } else if (this.isGA()) { if (this.trackerName) { From 1d8b387e587d57df1c462f616f9e48c8207e5489 Mon Sep 17 00:00:00 2001 From: psiale Date: Wed, 1 Jun 2022 16:04:50 -0500 Subject: [PATCH 34/43] working on GA using dataLayer --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index 1aa6b1c..cb0a7cf 100644 --- a/index.js +++ b/index.js @@ -83,6 +83,7 @@ class GATrack { } if (this.V4) { + this.log(args[0]) this.log(args[0].name) this.log(args[0].params) dataLayer.push({ From 7496b1d94794acabf8316c30f7d399e45b6743fe Mon Sep 17 00:00:00 2001 From: psiale Date: Wed, 1 Jun 2022 16:07:41 -0500 Subject: [PATCH 35/43] working on GA using dataLayer --- index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index cb0a7cf..c0818ef 100644 --- a/index.js +++ b/index.js @@ -83,9 +83,9 @@ class GATrack { } if (this.V4) { - this.log(args[0]) - this.log(args[0].name) - this.log(args[0].params) + this.log(args[0].events) + this.log(args[0].events[0].name) + this.log(args[0].events[0].params) dataLayer.push({ 'event': `${args[0].name}`, 'event_category': [args[0].params.event_category], From 87ea009374f8b720e2ed7b3537ac9d8abad9a0bd Mon Sep 17 00:00:00 2001 From: psiale Date: Wed, 1 Jun 2022 16:10:47 -0500 Subject: [PATCH 36/43] working on GA using dataLayer --- index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index c0818ef..6c85531 100644 --- a/index.js +++ b/index.js @@ -87,9 +87,9 @@ class GATrack { this.log(args[0].events[0].name) this.log(args[0].events[0].params) dataLayer.push({ - 'event': `${args[0].name}`, - 'event_category': [args[0].params.event_category], - 'event_label': [args[0].params.event_label], + 'event': `${args[0].events.name}`, + 'event_category': [args[0].events[0].params.event_category], + 'event_label': [args[0].events[0].params.event_label], }); } else if (this.isGA()) { if (this.trackerName) { From af11a5972207ad0393ff445305070e54a740eda8 Mon Sep 17 00:00:00 2001 From: psiale Date: Wed, 1 Jun 2022 22:57:26 -0500 Subject: [PATCH 37/43] working on GA using dataLayer --- index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 6c85531..ac91903 100644 --- a/index.js +++ b/index.js @@ -83,10 +83,9 @@ class GATrack { } if (this.V4) { + window.dataLayer = window.dataLayer || []; this.log(args[0].events) - this.log(args[0].events[0].name) - this.log(args[0].events[0].params) - dataLayer.push({ + window.dataLayer.push({ 'event': `${args[0].events.name}`, 'event_category': [args[0].events[0].params.event_category], 'event_label': [args[0].events[0].params.event_label], From 2fe291fa3465ec0cfd2649161f5400bf49b8f587 Mon Sep 17 00:00:00 2001 From: psiale Date: Thu, 2 Jun 2022 09:50:52 -0500 Subject: [PATCH 38/43] working on GA using dataLayer --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index ac91903..43f9102 100644 --- a/index.js +++ b/index.js @@ -85,6 +85,7 @@ class GATrack { if (this.V4) { window.dataLayer = window.dataLayer || []; this.log(args[0].events) + this.log(args[0].events.name) window.dataLayer.push({ 'event': `${args[0].events.name}`, 'event_category': [args[0].events[0].params.event_category], From dfa7e735ac299d973a783ae883f704ecab2e0a42 Mon Sep 17 00:00:00 2001 From: psiale Date: Thu, 2 Jun 2022 09:53:36 -0500 Subject: [PATCH 39/43] working on GA using dataLayer --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 43f9102..6c7d924 100644 --- a/index.js +++ b/index.js @@ -87,7 +87,7 @@ class GATrack { this.log(args[0].events) this.log(args[0].events.name) window.dataLayer.push({ - 'event': `${args[0].events.name}`, + 'event': `${args[0].events[0].name}`, 'event_category': [args[0].events[0].params.event_category], 'event_label': [args[0].events[0].params.event_label], }); From e6eb5b301a20cab5ed75322248ae955c2947010d Mon Sep 17 00:00:00 2001 From: psiale Date: Thu, 2 Jun 2022 09:56:37 -0500 Subject: [PATCH 40/43] working on GA using dataLayer --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 6c7d924..3647302 100644 --- a/index.js +++ b/index.js @@ -85,7 +85,7 @@ class GATrack { if (this.V4) { window.dataLayer = window.dataLayer || []; this.log(args[0].events) - this.log(args[0].events.name) + this.log(args[0].events[0].name) window.dataLayer.push({ 'event': `${args[0].events[0].name}`, 'event_category': [args[0].events[0].params.event_category], From 097ca1981818973719be2b174fb26a99bf86c9d5 Mon Sep 17 00:00:00 2001 From: psiale Date: Thu, 2 Jun 2022 10:03:36 -0500 Subject: [PATCH 41/43] changing object structure --- index.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/index.js b/index.js index 3647302..7cdf8fa 100644 --- a/index.js +++ b/index.js @@ -14,7 +14,6 @@ class GATrack { } return new Promise(resolve => { - this.log(category, action, label); if (!this.isEnabled()) { this.log('sendEvent', 'ga-track disabled'); @@ -33,14 +32,14 @@ class GATrack { return; } payload = { - events:[{ + events: { name: action, params: { event_category: category, event_label: label } - }], } + } this.sendData(payload); } @@ -84,12 +83,10 @@ class GATrack { if (this.V4) { window.dataLayer = window.dataLayer || []; - this.log(args[0].events) - this.log(args[0].events[0].name) window.dataLayer.push({ - 'event': `${args[0].events[0].name}`, - 'event_category': [args[0].events[0].params.event_category], - 'event_label': [args[0].events[0].params.event_label], + 'event': `${args[0].events.name}`, + 'event_category': [args[0].events.params.event_category], + 'event_label': [args[0].events.params.event_label], }); } else if (this.isGA()) { if (this.trackerName) { From 779cb9e1c12ce2528ffa24250e7efd30764948aa Mon Sep 17 00:00:00 2001 From: psiale Date: Mon, 15 May 2023 16:44:15 -0600 Subject: [PATCH 42/43] changed sendEvent and created new function --- README.md | 63 ++++++++++++++++-------------------- index.js | 95 +++++++++++++++++++++++++++++++++---------------------- 2 files changed, 85 insertions(+), 73 deletions(-) diff --git a/README.md b/README.md index 3d857a3..2e5d0f1 100644 --- a/README.md +++ b/README.md @@ -31,50 +31,54 @@ import GATrack from 'ga-track'; ## Methods -### sendEvent(category,action, label) -Manually sends an event to Google Analytics. Returns a promise. -#### Parameters: - - -`action` - {string} - Event's action. - -`label` - {string} - Event's label. +### sendEvent(name, event_params) -### sendEventV4(name, event_params) +#### Parameters: `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 -```javascript -GaTrack.G4 = true; + ``` -```javascript -GATrack.sendEventV4('read_article',[{name: 'author', value: 'David Mitchell'}, {name: 'title', value: 'Cloud Atlas'}]); +GATrack.sendEvent('read_article',[{name: 'author', value: 'David Mitchell'}, {name: 'title', value: 'Cloud Atlas'}]); ``` -### sendData() -Safely pass data to Google Analytics: +### sendEventOldGA(action, category, label) +if you want to create a custom event using the old GA events structure you can use this method -```javascript -GATrack.sendData('set', 'dimension2', 'member'); +the event will be send using this structure: +``` +events: { + name: action + params: { + event_category: category + event_label: label + } +} ``` -## Options +#### Parameters: -### V4 -```js -import GATrack from 'ga-track'; +`action` - {string} -GATrack.V4 = true; +`category` - {string} + +`label` - {string} + +``` +GATrack.sendEventOldGA('click', 'books', 'sci-fi' ); ``` -Allows you to use the [V4](#sendeventv4) version of sendEvent() + + +## Options + ### Debug Mode -```js +``` import GATrack from 'ga-track'; GATrack.debug = true; @@ -88,17 +92,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 diff --git a/index.js b/index.js index 7cdf8fa..882dbde 100644 --- a/index.js +++ b/index.js @@ -5,10 +5,9 @@ class GATrack { static debug = false; static trackerName = ''; static force = null; - static V4 = false; - static async sendEvent(category, action, label) { + static async sendEventOldGA(action, category, label) { if (this.prefix) { category = `${this.prefix}-${category}`; } @@ -21,12 +20,11 @@ class GATrack { } let payload = {} - if (this.V4) { if (typeof action !== 'string') { console.error("action has to be of type string"); return; } - + if(action === '' || action === null) { console.error("action is required"); return; @@ -35,42 +33,58 @@ class GATrack { events: { name: action, params: { - event_category: category, - event_label: label + 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(); } - if (this.isGAQ()) { - window._gaq.push(['_trackEvent', category, action, label, null, false]); - window._gaq.push(resolve); - } else if (this.isGTag()) { - // Gtag check needs to go before since gtag creates a ga variable + let payload = {} + payload = { - event_category: category, - event_label: label, - event_callback: resolve - }; - - this.sendData('event', action, payload); - } else if (this.isGA()) { - const options = { - transport: 'beacon', - hitCallback: resolve - }; - - this.sendData('send', 'event', category, action, label, options); + events: { + name, + params + } } + this.sendData(payload); }); } static send(...args) { console.log(args); - if (this.isGA()) { - args.unshift('send'); - } return this.sendData(...args); } @@ -81,21 +95,26 @@ class GATrack { return; } - if (this.V4) { window.dataLayer = window.dataLayer || []; - 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 if (this.isGA()) { - if (this.trackerName) { - args[0] = `${this.trackerName}.${args[0]}`; + 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] + }); } - window.ga.apply(null, args); - } + } +static usesOldGA(...args) { + return args[0].events.params.event_category || args[0].events.params.event_label; +} + static isNullOrEnforced(provider) { return this.force === null || this.force === provider; } From 19744a58d190822b0f9e3b157ab6c44e9c4e8bde Mon Sep 17 00:00:00 2001 From: psiale Date: Fri, 19 May 2023 15:00:38 -0600 Subject: [PATCH 43/43] adding ga-track --- README.md | 12 ++++++ index.js | 111 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 116 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 2e5d0f1..3f679cb 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,18 @@ 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 diff --git a/index.js b/index.js index 882dbde..0495984 100644 --- a/index.js +++ b/index.js @@ -1,12 +1,97 @@ /* 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 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}`; @@ -111,9 +196,9 @@ class GATrack { } -static usesOldGA(...args) { - return args[0].events.params.event_category || args[0].events.params.event_label; -} + static usesOldGA(...args) { + return args[0].events.params.event_category || args[0].events.params.event_label; + } static isNullOrEnforced(provider) { return this.force === null || this.force === provider; @@ -143,4 +228,16 @@ static usesOldGA(...args) { } } +ready(() => { + if (!window._GATrack_) { + window._GATrack_ = GATrack; + + if (typeof window.gaTrackerName_ !== 'undefined') { + GATrack.trackerName = window.gaTrackerName_; + } + + GATrack.autotrack(); + } +}); + export default GATrack;