DBC22-1948: Added snowplow integration and tracking

bcgov · Apr 18, 2024 · da482a8 · da482a8
1 parent 6a9f594
commit da482a8
Show file tree

Hide file tree

Showing 11 changed files with 270 additions and 100 deletions.
diff --git a/src/frontend/src/Components/Filters.js b/src/frontend/src/Components/Filters.js
@@ -18,6 +18,7 @@ import Button from 'react-bootstrap/Button';
 import Tooltip from 'react-bootstrap/Tooltip';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import {useMediaQuery} from '@uidotdev/usehooks';
+import trackEvent from './TrackEvent.js';
 
 
 // Components and functions
@@ -139,6 +140,7 @@ export default function Filters(props) {
                     name="closures"
                     id="filter--closures"
                     onChange={e => {
+                      trackEvent('click', 'map', 'Toggle closures layer')
                       toggleHandler('closures', e.target.checked);
                       toggleHandler('closuresLines', e.target.checked, true);
                       setClosures(!closures)
@@ -163,6 +165,7 @@ export default function Filters(props) {
                     name="major"
                     id="filter--major"
                     onChange={e => {
+                      trackEvent('click', 'map', 'Toggle major events layer')
                       toggleHandler('majorEvents', e.target.checked);
                       toggleHandler('majorEventsLines', e.target.checked, true);
                       setMajorEvents(!majorEvents)
@@ -188,6 +191,7 @@ export default function Filters(props) {
                     name="minor"
                     id="filter--minor"
                     onChange={e => {
+                      trackEvent('click', 'map', 'Toggle minor events layer')
                       toggleHandler('minorEvents', e.target.checked);
                       toggleHandler('minorEventsLines', e.target.checked, true);
                       setMinorEvents(!minorEvents);
@@ -213,6 +217,7 @@ export default function Filters(props) {
                     name="future events"
                     id="filter--future-events"
                     onChange={e => {
+                      trackEvent('click', 'map', 'Toggle future events layer')
                       toggleHandler('futureEvents', e.target.checked);
                       toggleHandler('futureEventsLines', e.target.checked, true);
                       setFutureEvents(!futureEvents);
@@ -241,7 +246,9 @@ export default function Filters(props) {
                     type="checkbox"
                     name="highway cameras"
                     id="filter--highway-cameras"
-                    onChange={e => {toggleHandler('highwayCams', e.target.checked); setHighwayCams(!highwayCams)}}
+                    onChange={e => {
+                      trackEvent('click', 'map', 'Toggle highway cameras layer')
+                      toggleHandler('highwayCams', e.target.checked); setHighwayCams(!highwayCams)}}
                     defaultChecked={mapContext.visible_layers.highwayCams}
                     disabled={disableFeatures}
                   />
@@ -262,6 +269,7 @@ export default function Filters(props) {
                     name="road conditions"
                     id="filter--road-conditions"
                     onChange={e => {
+                      trackEvent('click', 'map', 'Toggle road conditions layer')
                       toggleHandler('roadConditions', e.target.checked);
                       toggleHandler('roadConditionsLines', e.target.checked);
                       setRoadConditions(!roadConditions);
@@ -287,7 +295,9 @@ export default function Filters(props) {
                     type="checkbox"
                     name="inland ferries"
                     id="filter--inland-ferries"
-                    onChange={e => {toggleHandler('inlandFerries', e.target.checked); setInlandFerries(!inlandFerries)}}
+                    onChange={e => {
+                      trackEvent('click', 'map', 'Toggle inland ferries layer')
+                      toggleHandler('inlandFerries', e.target.checked); setInlandFerries(!inlandFerries)}}
                     defaultChecked={mapContext.visible_layers.inlandFerries}
                     disabled={disableFeatures}
                   />
@@ -308,6 +318,7 @@ export default function Filters(props) {
                     name="weather"
                     id="filter--weather"
                     onChange={e => {
+                      trackEvent('click', 'map', 'Toggle weather layer')
                       toggleHandler('weather', e.target.checked);
                       toggleHandler('regional', e.target.checked);
                       setWeather(!weather)}
@@ -330,15 +341,17 @@ export default function Filters(props) {
                     type="checkbox"
                     name="rest stops"
                     id="filter--rest-stops"
-                    onChange={e => {toggleHandler('restStops', e.target.checked); setRestStops(!restStops)}}
+                    onChange={e => {
+                      trackEvent('click', 'map', 'Toggle rest stops layer')
+                      toggleHandler('restStops', e.target.checked); setRestStops(!restStops)}}
                     defaultChecked={mapContext.visible_layers.restStops}
                     disabled={disableFeatures}
                   />
                   <label htmlFor="filter--rest-stops">
                     <span className="filter-item__icon">
                       <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="rest stops" aria-hidden="true" focusable="false" role="img">
                         <path className="filter-item__icon__path" d="M19 3C19 3.1875 18.9688 3.34375 18.9375 3.5C19.5625 3.9375 20 4.6875 20 5.5C20 6.90625 18.875 8 17.5 8H17L17 15C17 15.5625 16.5312 16 16 16C15.4375 16 15 15.5625 15 15V8H14.5C13.0937 8 12 6.90625 12 5.5C12 4.6875 12.4062 3.9375 13.0312 3.5C13 3.34375 13 3.1875 13 3C13 1.34375 14.3438 0 16 0C17.6562 0 19 1.34375 19 3ZM1 7C1 6.46875 1.4375 6 2 6L10 6C10.5312 6 11 6.46875 11 7V9C11 9.5625 10.5312 10 10 10L2 10C1.4375 10 1 9.5625 1 9L1 7ZM1 11L11 11C11.5312 11 12 11.4688 12 12C12 12.5625 11.5312 13 11 13V15C11 15.5625 10.5312 16 10 16C9.4375 16 9 15.5625 9 15V13L3 13L3 15C3 15.5625 2.53125 16 2 16C1.4375 16 1 15.5625 1 15L1 13C0.4375 13 0 12.5625 0 12C0 11.4688 0.4375 11 1 11Z"/>
-                      </svg>                    
+                      </svg>
                     </span>
                     Rest stops
                   </label>