Merge pull request #63 from devinit/feature/map-analytics

Feature/Map Analytics

Author: ThatcherK

assets/core.js

@@ -139,6 +139,7 @@ function renderPeopleAffectedByCrisisLeaflet() {
     echarts: {
       onAdd: (chartNodes) => {
         Array.prototype.forEach.call(chartNodes, (chartNode) => {
+          window.dataLayer = window.dataLayer || [];
           const dichart = new window.DICharts.Chart(chartNode.parentElement);
           const map = window.L.map(chartNode, {
             maxZoom: 3,

src/charts/people-affected-by-crisis-map.js

@@ -14,9 +14,6 @@ const peopleInNeedDisabled = 'https://devinit.org/assets/svg/icons/people-in-nee
 
 const MapFilters = (props) => {
   const [dimension, setDimension] = useState('Severity_score');
-  useEffect(() => {
-    props.onSelectDimension(dimension);
-  }, [dimension]);
   const filterOptions = [
     {
       name: 'Severity_score',
@@ -50,6 +47,14 @@ const MapFilters = (props) => {
     },
   ];
 
+  useEffect(() => {
+    props.onSelectDimension(dimension);
+    window.dataLayer.push({
+      event: 'mapFilterSelected',
+      filter: filterOptions.find((opt) => opt.name === dimension).label
+    });
+  }, [dimension]);
+
   return (
     <ul>
       {filterOptions.map((option) => (

src/components/MapFilters.js

@@ -125,6 +125,10 @@ const onCloseDatabox = (e, databoxElement) => {
 const handleClickFeature = (e, mapInstance, databoxInstance, csv) => {
   databoxInstance.addTo(mapInstance);
   const layer = e.target;
+  window.dataLayer.push({
+    event: 'countryClicked',
+    country: getOriginalCountryName(csv, layer.feature.properties.iso_a3)
+  });
   databoxInstance.update(layer.feature.properties, csv);
 };