Merge pull request #88 from nandiheath/master

Update google analytic codes

.travis.yml

@@ -50,4 +50,4 @@ jobs:
         keep-history: true
         local-dir: web/dist # the local dir is relative to root and ignoring the one set with before_install
         on:
-          branch: master
+          tags: true

web/src/components/VueLayerMap.vue

@@ -47,9 +47,6 @@
   import Address from './../lib/models/address';
   import ResultCard from "./ResultCard";
   export default {
-    components: {
-      ResultCard,
-    },
     props: {
       markers: Array,
       filterOptions: Array

web/src/pages/MapAddressSearcher.vue

@@ -57,15 +57,13 @@ import asyncLib from "async";
 import asyncify from "async/asyncify";
 import dclookup from "./../utils/dclookup";
 import ogcioHelper from "./../utils/ogcio-helper";
-import SearchFilter from "./../components/SearchFilter";
 import VueLayerMap from "./../components/VueLayerMap";
 import ResultCard from "./../components/ResultCard";
-import { trackBatchSearch, trackBatchSearchResult } from "./../utils/ga-helper";
+import { trackMapSearch, trackPinSelected } from "./../utils/ga-helper";
 const SEARCH_LIMIT = 200;
 
 export default {
   components: {
-    SearchFilter,
     VueLayerMap,
     ResultCard
   },
@@ -103,8 +101,8 @@ export default {
         this.errorMessage = "請輸入地址";
         return;
       }
-      this.addressesToSearch = this.addressString.split("\n");
-      trackBatchSearch(this, this.addressesToSearch);
+      this.addressesToSearch = this.addressString.split("\n").filter(address => address !== undefined && address.length > 0);
+      trackMapSearch(this, this.addressesToSearch.length);
       const self = this;
       asyncLib.eachOfLimit(
         this.addressesToSearch,
@@ -124,6 +122,7 @@ export default {
       if (feature !== null) {
         const index = feature.properties.index;
         this.setSelectedFeature(index);
+        trackPinSelected(this, this.results[index][0]);
       } else {
         this.selectedFeature = null;
       }

web/src/pages/TableAddressSearcher.vue

@@ -11,9 +11,7 @@
                   為何要拆解地址？假設你在找尋
                   <span class="amber lighten-4 red--text px-1">灣仔富德樓</span> 的位置，你會用Google地圖搜尋，然後得出地址全名、座標等資料。但如果你分析過千，甚至過萬個文字地址，又要顯示在地圖上，當中格式不統一、中英混雜，難道你要逐一搜尋？
                 </p>
-                <p>
-                  香港地址解析器（Hong Kong Address Parser, HKAP）運用政府部門開放數據，比較輸入地址與搜尋結果的相似度，將香港文字地址拆解成地區、街道、門牌、大廈、座標、甚至區議會選區，方便港人分析地址資料，製作地圖。
-                </p>
+                <p>香港地址解析器（Hong Kong Address Parser, HKAP）運用政府部門開放數據，比較輸入地址與搜尋結果的相似度，將香港文字地址拆解成地區、街道、門牌、大廈、座標、甚至區議會選區，方便港人分析地址資料，製作地圖。</p>
               </h3>
               <h2 class="teal--text">三大功能</h2>
               <br>
@@ -156,7 +154,7 @@
                 <v-btn @click="submit" dark class="teal">拆地址</v-btn>
                 <download-excel
                   v-if="results.length > 0 && results.length === addressesToSearch.length"
-                  :data="normalizedResults"
+                  :fetch="prepareDownloadCSV"
                   type="csv"
                 >
                   <v-btn dark class="teal">下載 CSV</v-btn>
@@ -196,8 +194,9 @@ import dclookup from "./../utils/dclookup";
 import ogcioHelper from "./../utils/ogcio-helper";
 import SearchFilter from "./../components/SearchFilter";
 import asyncify from "async/asyncify";
-import { trackBatchSearch, trackBatchSearchResult } from "./../utils/ga-helper";
+import { trackTableSearch, trackDownloadCSV } from "./../utils/ga-helper";
 const SEARCH_LIMIT = 200;
+var asde = 200;
 
 export default {
   components: {
@@ -306,6 +305,10 @@ export default {
     // }
   },
   methods: {
+    prepareDownloadCSV: function() {
+      trackDownloadCSV(this, this.normalizedResults.length);
+      return this.normalizedResults;
+    },
     /**
      * Return an array of distinct headers from all of the ogcio results
      */
@@ -336,8 +339,10 @@ export default {
         this.errorMessage = "請輸入地址";
         return;
       }
-      this.addressesToSearch = this.addressString.split("\n");
-      trackBatchSearch(this, this.addressesToSearch);
+      this.addressesToSearch = this.addressString
+        .split("\n")
+        .filter(address => address !== undefined && address.length > 0);
+      trackTableSearch(this, this.addressesToSearch.length);
       const self = this;
       asyncLib.eachOfLimit(
         this.addressesToSearch,
@@ -372,7 +377,6 @@ async function searchSingleResult(address, key) {
     const result = records[0];
     // ! cant do the batch result here as it will exceeds the rate of GA
     // https://developers.google.com/analytics/devguides/collection/analyticsjs/limits-quotas
-    // trackBatchSearchResult(this, address, result.score | 0);
   }
   return records;
 }

web/src/utils/ga-helper.js

@@ -1,9 +1,10 @@
-const GA_CATEGORY_SINGLE_SEARCH = 'single_search';
-const GA_CATEGORY_BATCH_SEARCH = 'batch_search';
+const GA_CATEGORY_MAP_SEARCH = 'map_search';
+const GA_CATEGORY_TABLE_SEARCH = 'table_search';
 const GA_ACTION_SEARCH = 'search';
 const GA_ACTION_SEARCH_SATISFIED = 'search_satisfied';
 const GA_ACTION_SEARCH_UNSATISFIED = 'search_unsatisfied';
-const GA_ACTION_SEARCH_RESULT = 'search_result';
+const GA_ACTION_DOWNLOAD_CSV = 'download_csv';
+const GA_ACTION_SELECT_PIN = 'select_pin';
 const GA_ACTION_SATISFICATION = 'rating';
 const GA_ACTION_TOGGLE_FILTER = 'toogle_filter';
 
@@ -21,25 +22,24 @@ function trackEvent(component, param) {
  * @param {Component} component
  * @param {String} address
  */
-export const trackSingleSearch = function (component, address) {
+export const trackMapSearch = function (component, searchSize) {
   trackEvent(component, {
-    eventCategory: GA_CATEGORY_SINGLE_SEARCH,
+    eventCategory: GA_CATEGORY_MAP_SEARCH,
     eventAction: GA_ACTION_SEARCH,
-    eventLabel: address
+    eventValue: searchSize
   })
 }
 
 /**
- * Track the user has initialize a single search
- * @param {Component} component
- * @param {String} address
+ * Track the user has selected the pin in map mode
+ * @param {*} component
+ * @param {*} address
  */
-export const trackSingleSearchResult = function (component, address, score) {
+export const trackPinSelected = function (component, address) {
   trackEvent(component, {
-    eventCategory: GA_CATEGORY_SINGLE_SEARCH,
-    eventAction: GA_ACTION_SEARCH_RESULT,
-    eventLabel: address,
-    eventValue: score
+    eventCategory: GA_CATEGORY_MAP_SEARCH,
+    eventAction: GA_ACTION_SELECT_PIN,
+    eventLabel: address
   })
 }
 
@@ -62,33 +62,29 @@ export const trackSingleSearchSatisfication = function (component, address, sati
  * @param {*} component
  * @param {*} addresses
  */
-export const trackBatchSearch = function (component, addresses) {
-  addresses.forEach(address => {
-    trackEvent(component, {
-      eventCategory: GA_CATEGORY_BATCH_SEARCH,
-      eventAction: GA_ACTION_SEARCH,
-      eventLabel: address
-    })
-  });
+export const trackTableSearch = function (component, batchSize) {
+  trackEvent(component, {
+    eventCategory: GA_CATEGORY_TABLE_SEARCH,
+    eventAction: GA_ACTION_SEARCH,
+    eventValue: batchSize
+  })
 }
 
-
-
 /**
- * Track the batch search result
- * @param {Component} component
- * @param {String} address
+ * Track the user has clicked on the download button
+ * @param {*} component
+ * @param {*} batchSize
  */
-export const trackBatchSearchResult = function (component, address, score) {
+export const trackDownloadCSV = function (component, batchSize) {
   trackEvent(component, {
-    eventCategory: GA_CATEGORY_BATCH_SEARCH,
-    eventAction: GA_ACTION_SEARCH_RESULT,
-    eventLabel: address,
-    eventValue: score
+    eventCategory: GA_CATEGORY_TABLE_SEARCH,
+    eventAction: GA_ACTION_DOWNLOAD_CSV,
+    eventValue: batchSize
   })
 }
 
 
+
 export const trackToggleFilterOption = function (component, optionKey, isOn) {
   trackEvent(component, {
     eventCategory: GA_CATEGORY_SINGLE_SEARCH,