From 3764ca268c29b20741a1faec0090ce7917648137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Glauber=20Magalh=C3=A3es?= Date: Mon, 30 Sep 2024 17:58:47 -0300 Subject: [PATCH 1/3] add gtag --- src/a.js | 5 +++++ src/controls.js | 6 ++++++ src/indexes.js | 14 +++++++++++++- src/s.js | 5 +++++ src/summary.js | 14 ++++++++++++++ views/a.html | 1 + views/google-analytics.mustache | 9 +++++++++ views/m.html | 1 + views/s.html | 1 + 9 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 views/google-analytics.mustache diff --git a/src/a.js b/src/a.js index f3d2ee4..a19f4d5 100644 --- a/src/a.js +++ b/src/a.js @@ -532,6 +532,11 @@ function drawer_init() { this.classList.contains('active') ? null : this.getAttribute('for'), ); + gtag('event', 'button_click', { + 'event_category': 'Option', + 'event_label': 'User selects an option from the left panel', + 'value': this.getAttribute('description') + }); }; a.onmouseenter = function() { diff --git a/src/controls.js b/src/controls.js index 11efe14..1f0dbfd 100644 --- a/src/controls.js +++ b/src/controls.js @@ -213,6 +213,12 @@ function toggle_switch(init, callback) { let status = init || false; + if (status) gtag('event', 'checkbox_checked', { + 'event_category': 'Layer', + 'event_label': 'User adds a layer to the map', + 'value': init.id + }); + const active = getComputedStyle(document.body).getPropertyValue('--the-yellow'); svg diff --git a/src/indexes.js b/src/indexes.js index ca6a350..dc008da 100644 --- a/src/indexes.js +++ b/src/indexes.js @@ -64,6 +64,11 @@ function radio(init, callback) { .attr('cy', (size/2)); function change(s,i) { + gtag('event', 'select_option', { + 'event_category': 'Option', + 'event_label': 'User selects an index option', + 'value': i.name + }); center .style('fill', (s ? active : 'white')) .style('stroke', (s ? active : 'white')); @@ -140,7 +145,14 @@ export function init() { cos.append(ce('option', EAE['indexes'][i]['name'], { "value": i })); cos.value = U.output; - cos.onchange = x => { O.index = x.target.value; }; + cos.onchange = x => { + O.index = x.target.value; + gtag('event', 'select_option', { + 'event_category': 'Option', + 'event_label': 'User selects an analysis option', + 'value': x.target.value + }); + }; const toolbox = qs('#index-layer-toolbox'); const tools = { diff --git a/src/s.js b/src/s.js index 6bbf87c..6d08341 100644 --- a/src/s.js +++ b/src/s.js @@ -183,6 +183,11 @@ export function init() { for (let co of geographies) { const d = ce('div', ce('h2', co.name, { "class": 'country-name' }), { "class": 'country-item', "ripple": "" }); d.onclick = async _ => { + gtag('event', 'button_click', { + 'event_category': 'Country', + 'event_label': 'User selects a country', + 'value': c.id + }); preload_boundaries(co.id); setTimeout(_ => geography(co), 350); }; diff --git a/src/summary.js b/src/summary.js index a6260b0..309d67f 100644 --- a/src/summary.js +++ b/src/summary.js @@ -54,6 +54,8 @@ async function summary() { ce('div', "High"), ); + GTAG_EVENT_LABEL = 'User selects REPORT button and then selects an option to export the data' + SUMMARY = {}; const scale = ce('div'); @@ -136,6 +138,12 @@ async function summary() { graphs_tab.classList.toggle('hidden'); tables_tab.classList.toggle('hidden'); + gtag('event', 'button_click', { + 'event_category': 'Option', + 'event_label': GTAG_EVENT_LABEL, + 'value': "Summary Graphs" + }); + this.innerText = ss ? "Summary Table" : "Summary Graphs"; }; @@ -148,6 +156,12 @@ async function summary() { return; } + gtag('event', 'button_click', { + 'event_category': 'Option', + 'event_label': GTAG_EVENT_LABEL, + 'value': "Export Presentation" + }); + loading(true); await delay(0.1); diff --git a/views/a.html b/views/a.html index f599a21..51fa1e6 100644 --- a/views/a.html +++ b/views/a.html @@ -24,6 +24,7 @@ + {{> views/google-analytics }} diff --git a/views/google-analytics.mustache b/views/google-analytics.mustache new file mode 100644 index 0000000..a72f45d --- /dev/null +++ b/views/google-analytics.mustache @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/views/m.html b/views/m.html index 7b2b323..51fc26c 100644 --- a/views/m.html +++ b/views/m.html @@ -22,6 +22,7 @@ + {{> views/google-analytics }} diff --git a/views/s.html b/views/s.html index e3842a6..f58c381 100644 --- a/views/s.html +++ b/views/s.html @@ -22,6 +22,7 @@ + {{> views/google-analytics }} From f684b3f6d8c3a7c79a7669d860ea404338188c33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Glauber=20Magalh=C3=A3es?= Date: Wed, 2 Oct 2024 11:39:05 -0300 Subject: [PATCH 2/3] submit analysis to GA4 --- src/session.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/session.js b/src/session.js index 849ff96..8606092 100644 --- a/src/session.js +++ b/src/session.js @@ -32,6 +32,7 @@ padding: 7px 12px; }); f.onsubmit = function(e) { + const user_id = user_extract('id'); e.preventDefault(); m.remove(); @@ -39,6 +40,18 @@ padding: 7px 12px; API.patch('sessions', { "time": `eq.${s.time}` }, { "payload": { "title": i.value, }}); + + gtag("set", "analysis_properties", { + "title": i.value, + "time": session.time, + "user_id": user_id, + "geography_id": GEOGRAPHY.id, + }); + gtag("event", "analysis_submit", { + "event_category": "Submit", + "event_label": "User shares analysis", + "value": this.getAttribute('description') + }); return false; }; From 60b05ff16f0b706c1863b6674a8de015bd6d2602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Glauber=20Magalh=C3=A3es?= Date: Wed, 2 Oct 2024 11:43:32 -0300 Subject: [PATCH 3/3] Revert "submit analysis to GA4" This reverts commit f684b3f6d8c3a7c79a7669d860ea404338188c33. --- src/session.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/session.js b/src/session.js index 8606092..849ff96 100644 --- a/src/session.js +++ b/src/session.js @@ -32,7 +32,6 @@ padding: 7px 12px; }); f.onsubmit = function(e) { - const user_id = user_extract('id'); e.preventDefault(); m.remove(); @@ -40,18 +39,6 @@ padding: 7px 12px; API.patch('sessions', { "time": `eq.${s.time}` }, { "payload": { "title": i.value, }}); - - gtag("set", "analysis_properties", { - "title": i.value, - "time": session.time, - "user_id": user_id, - "geography_id": GEOGRAPHY.id, - }); - gtag("event", "analysis_submit", { - "event_category": "Submit", - "event_label": "User shares analysis", - "value": this.getAttribute('description') - }); return false; };