更新 GA function

designers/lists/index.html

@@ -990,253 +990,7 @@
     integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
     crossorigin="anonymous"></script>
   <script src="../../js/lists.js"></script>
-  <script src="./js/main.js?a=2"></script>
-  <script>
-  function push_GA_budget_select(budget) {
-    var eventLabel = '';
-    switch (budget) {
-        case '100萬以下':
-            eventLabel = '1M_below';
-            break;
-        case '100~200萬':
-            eventLabel = '1M_2M';
-            break;
-        case '200~300萬':
-            eventLabel = '2M_3M';
-            break;
-        case '300~400萬':
-        case '400~500萬':
-        case '500萬以上':
-            eventLabel = '3M_up';
-            break;
-        default:
-            eventLabel = 'unknown';
-    }
-    dataLayer.push({ 'event': eventLabel });
-    // 發送Facebook Pixel事件
-    fbq('trackCustom', eventLabel);
-}
-
-document.querySelectorAll('input[name="d_budget"]').forEach(function(element) {
-    element.addEventListener('click', function() {
-        var budgetLabel = this.nextElementSibling.innerText.trim();
-        console.log(budgetLabel);
-        push_GA_budget_select(budgetLabel);
-    });
-});
-
-
-
-
-
-/*
- function push_GA_style_select(key) {
-    var eventLabel = '';
-    //console.log(key);
-    switch (key) {
-        case 'nordic':
-            eventLabel = 'Scandi_style';
-            break;
-        case 'modern':
-            eventLabel = 'Modern_style';
-            break;
-        case 'industry':
-            eventLabel = 'Industrial_style';
-            break;
-        case 'american':
-            eventLabel = 'American_style';
-            break;
-        case 'leisure':
-            eventLabel = 'Leisure_style';
-            break;
-        case 'vanguard':
-            eventLabel = 'Avant_garde_style';
-            break;
-        case 'rustuc':
-            eventLabel = 'Rustic_style';
-            break;
-        case 'mashup':
-            eventLabel = 'Eclectic_style';
-            break;
-        case 'neoclassic':
-            eventLabel = 'Neoclassic_style';
-            break;
-        case 'luxurious':
-            eventLabel = 'Luxurious_style';
-            break;
-        case 'classical':
-            eventLabel = 'Classical_style';
-            break;
-        case 'exotic':
-            eventLabel = 'Exotic_style';
-            break;
-        case 'zen':
-            eventLabel = 'Zen_style';
-            break;
-        case 'oriental':
-            eventLabel = 'Oriental_style';
-            break;
-        case 'muju':
-            eventLabel = 'Muju_style';
-            break;
-        case 'minimalism':
-            eventLabel = 'Minimalism_style';
-            break;
-        case 'jpstyle':
-            eventLabel = 'JP_style';
-            break;
-        case 'entrylux':
-            eventLabel = 'Affordable_Luxury_style';
-            break;
-        default:
-            eventLabel = 'unknown';
-    }
-    dataLayer.push({ 'event': eventLabel });
-            // 发送Facebook Pixel事件
-        fbq('trackCustom', eventLabel);
-   
-    }
-
-     function push_GA_dtype_select(key) {
-    var eventLabel = '';
-    //console.log(key);
-    switch (key) {
-        case 'small':
-            eventLabel = 'small';
-            break;
-        case 'standard':
-            eventLabel = 'standard';
-            break;
-        case 'big':
-            eventLabel = 'big';
-            break;
-        case 'villa':
-            eventLabel = 'villa';
-            break;
-        case 'raisehigh':
-            eventLabel = 'raisehigh';
-            break;
-        case 'middle':
-            eventLabel = 'duplex_house';
-            break;
-        case 'sample':
-            eventLabel = 'sample';
-            break;
-        case 'workspace':
-            eventLabel = 'commercial';
-            break;
-        case 'commercial':
-            eventLabel = 'commercial';
-            break;
-        case 'homestay':
-            eventLabel = 'B&B';
-            break;
-        case 'dining':
-            eventLabel = 'dining';
-            break;
-        case 'public':
-            eventLabel = 'commercial';
-            break;
-        case 'renovation':
-            eventLabel = 'renovation_condition';
-            break;
-        default:
-            eventLabel = 'unknown';
-    }
-    dataLayer.push({ 'event': eventLabel });
-            // 发送Facebook Pixel事件
-        fbq('trackCustom', eventLabel);
-   
-    }
-
-
-
-
-
-
-    function push_GA_city_select(key) {
-    
-
-    var eventLabel = '';
-
-  switch (key) {
-    case '100':
-        eventLabel = 'Taipei';
-        break;
-    case '101':
-        eventLabel = 'New Taipei';
-        break;
-    case '102':
-        eventLabel = 'Keelung';
-        break;
-    case '103':
-        eventLabel = 'Taoyuan';
-        break;
-    case '104':
-        eventLabel = 'Hsinchu';
-        break;
-    case '105':
-        eventLabel = 'Hsinchu';
-        break;
-    case '106':
-        eventLabel = 'Miaoli';
-        break;
-    case '107':
-        eventLabel = 'Taichung';
-        break;
-    case '108':
-        eventLabel = 'Nantou';
-        break;
-    case '109':
-        eventLabel = 'Changhua';
-        break;
-    case '110':
-        eventLabel = 'Yunlin';
-        break;
-    case '111':
-        eventLabel = 'Chiayi';
-        break;
-    case '112':
-        eventLabel = 'Chiayi';
-        break;
-    case '113':
-        eventLabel = 'Tainan';
-        break;
-    case '114':
-        eventLabel = 'Kaohsiung';
-        break;
-    case '115':
-        eventLabel = 'Pingtung';
-        break;
-    case '116':
-        eventLabel = 'Yilan';
-        break;
-    case '117':
-        eventLabel = 'Hualien';
-        break;
-    case '118':
-        eventLabel = 'Taitung';
-        break;
-    case '119':
-        eventLabel = 'Penghu';
-        break;
-    case '120':
-        eventLabel = 'Kinmen';
-        break;
-    case '121':
-        eventLabel = 'Lienchiang';
-        break;
-    default:
-        eventLabel = 'unknown';
-     }
-    dataLayer.push({ 'event': eventLabel });
-            // 发送Facebook Pixel事件
-        fbq('trackCustom', eventLabel);
-   
-    }
-    */
-  
-    </script>
+  <script src="./js/main.js"></script>
 </body>
 
 </html>

designers/lists/js/main.js

@@ -206,7 +206,6 @@ function ga4_keywords() {
 }
 
 document.getElementById("keywordInput").addEventListener("keydown", function (event) {
-
   if (event.key === "Enter") {
     ga4_keywords();
   }

js/lists.js

@@ -21,6 +21,7 @@ let filterList = []; // 篩選條件
 function updateSelectedOptions(id, button, radio) {
   page = 1;
   console.log('更新篩選狀態', button, radio);
+  push_GA(button, radio); // 發送 GA
 
   if (filterList.length) {
     let exists = false; // 判斷是否已存在
@@ -272,18 +273,18 @@ $('#keywordInput').on('input', function () {
   let divList = $('#autocomplete-list');
   for (let i = 0; i < designerKeywordList.length; i++) {
     if (designerKeywordList[i].substr(0, input.length).toUpperCase() === input.toUpperCase()) {
-        let item = $('<div></div>');
-        item.html("<strong>" + designerKeywordList[i].substr(0, input.length) + "</strong>" + designerKeywordList[i].substr(input.length));
-        item.on('click', function() {
-            $('#keywordInput').val($(this).text());
-            closeAllLists();
-        });
-        item.on('mouseenter', function() {
-            $('#keywordInput').val($(this).text());
-        });
-        divList.append(item);
+      let item = $('<div></div>');
+      item.html("<strong>" + designerKeywordList[i].substr(0, input.length) + "</strong>" + designerKeywordList[i].substr(input.length));
+      item.on('click', function () {
+        $('#keywordInput').val($(this).text());
+        closeAllLists();
+      });
+      item.on('mouseenter', function () {
+        $('#keywordInput').val($(this).text());
+      });
+      divList.append(item);
     }
-}
+  }
 });
 
 // 清空自動補全列表
@@ -293,4 +294,249 @@ function closeAllLists() {
 
 $(document).on('click', function (e) {
   closeAllLists();
-});
+});
+
+// 發送 GA
+function push_GA(text, value) {
+  if (text === "接案預算") {
+    push_GA_tbudge_select(value);
+  } else if (text === "接案風格" || text === "設計風格") {
+    push_GA_style_select(value);
+  } else if (text === "接案類型" || text === "房屋類型") {
+    push_GA_dtype_select(value);
+  } else if (text === "所在縣市") {
+    push_GA_city_select(value);
+  }
+}
+
+// 接案預算 GA
+function push_GA_tbudge_select(key) {
+  console.log('push_GA_tbudge_select', key);
+  let eventLabel = '';
+
+  switch (key) {
+    case '100萬以下':
+      eventLabel = '1M_below';
+      break;
+    case '100~200萬':
+      eventLabel = '1M_2M';
+      break;
+    case '200~300萬':
+      eventLabel = '2M_3M';
+      break;
+    case '300~400萬':
+    case '400~500萬':
+    case '500萬以上':
+      eventLabel = '3M_up';
+      break;
+    default:
+      eventLabel = 'unknown';
+  }
+  dataLayer.push({ 'event': eventLabel });
+  // 發送 Facebook Pixel 事件
+  fbq('trackCustom', eventLabel);
+}
+
+// 設計風格/接案風格 GA
+function push_GA_style_select(key) {
+  console.log('push_GA_style_select', key);
+  let eventLabel = '';
+
+  switch (key) {
+    case 'nordic':
+      eventLabel = 'Scandi_style';
+      break;
+    case 'modern':
+      eventLabel = 'Modern_style';
+      break;
+    case 'industry':
+      eventLabel = 'Industrial_style';
+      break;
+    case 'american':
+      eventLabel = 'American_style';
+      break;
+    case 'leisure':
+      eventLabel = 'Leisure_style';
+      break;
+    case 'vanguard':
+      eventLabel = 'Avant_garde_style';
+      break;
+    case 'rustuc':
+      eventLabel = 'Rustic_style';
+      break;
+    case 'mashup':
+      eventLabel = 'Eclectic_style';
+      break;
+    case 'neoclassic':
+      eventLabel = 'Neoclassic_style';
+      break;
+    case 'luxurious':
+      eventLabel = 'Luxurious_style';
+      break;
+    case 'classical':
+      eventLabel = 'Classical_style';
+      break;
+    case 'exotic':
+      eventLabel = 'Exotic_style';
+      break;
+    case 'zen':
+      eventLabel = 'Zen_style';
+      break;
+    case 'oriental':
+      eventLabel = 'Oriental_style';
+      break;
+    case 'muju':
+      eventLabel = 'Muju_style';
+      break;
+    case 'minimalism':
+      eventLabel = 'Minimalism_style';
+      break;
+    case 'jpstyle':
+      eventLabel = 'JP_style';
+      break;
+    case 'entrylux':
+      eventLabel = 'Affordable_Luxury_style';
+      break;
+    default:
+      eventLabel = 'unknown';
+  }
+  dataLayer.push({ 'event': eventLabel });
+  // 發送 Facebook Pixel 事件
+  fbq('trackCustom', eventLabel);
+
+}
+
+// 接案類型/房屋類型 GA
+function push_GA_dtype_select(key) {
+  console.log('push_GA_dtype_select', key);
+  let eventLabel = '';
+
+  switch (key) {
+    case 'small':
+      eventLabel = 'small';
+      break;
+    case 'standard':
+      eventLabel = 'standard';
+      break;
+    case 'big':
+      eventLabel = 'big';
+      break;
+    case 'villa':
+      eventLabel = 'villa';
+      break;
+    case 'raisehigh':
+      eventLabel = 'raisehigh';
+      break;
+    case 'middle':
+      eventLabel = 'duplex_house';
+      break;
+    case 'sample':
+      eventLabel = 'sample';
+      break;
+    case 'workspace':
+      eventLabel = 'commercial';
+      break;
+    case 'commercial':
+      eventLabel = 'commercial';
+      break;
+    case 'homestay':
+      eventLabel = 'B&B';
+      break;
+    case 'dining':
+      eventLabel = 'dining';
+      break;
+    case 'public':
+      eventLabel = 'commercial';
+      break;
+    case 'renovation':
+      eventLabel = 'renovation_condition';
+      break;
+    default:
+      eventLabel = 'unknown';
+  }
+  dataLayer.push({ 'event': eventLabel });
+  // 發送 Facebook Pixel 事件
+  fbq('trackCustom', eventLabel);
+
+}
+
+// 所在縣市 GA 
+function push_GA_city_select(key) {
+  console.log('push_GA_city_select', key);
+  let eventLabel = '';
+
+  switch (key) {
+    case '100':
+      eventLabel = 'Taipei';
+      break;
+    case '101':
+      eventLabel = 'New Taipei';
+      break;
+    case '102':
+      eventLabel = 'Keelung';
+      break;
+    case '103':
+      eventLabel = 'Taoyuan';
+      break;
+    case '104':
+      eventLabel = 'Hsinchu';
+      break;
+    case '105':
+      eventLabel = 'Hsinchu';
+      break;
+    case '106':
+      eventLabel = 'Miaoli';
+      break;
+    case '107':
+      eventLabel = 'Taichung';
+      break;
+    case '108':
+      eventLabel = 'Nantou';
+      break;
+    case '109':
+      eventLabel = 'Changhua';
+      break;
+    case '110':
+      eventLabel = 'Yunlin';
+      break;
+    case '111':
+      eventLabel = 'Chiayi';
+      break;
+    case '112':
+      eventLabel = 'Chiayi';
+      break;
+    case '113':
+      eventLabel = 'Tainan';
+      break;
+    case '114':
+      eventLabel = 'Kaohsiung';
+      break;
+    case '115':
+      eventLabel = 'Pingtung';
+      break;
+    case '116':
+      eventLabel = 'Yilan';
+      break;
+    case '117':
+      eventLabel = 'Hualien';
+      break;
+    case '118':
+      eventLabel = 'Taitung';
+      break;
+    case '119':
+      eventLabel = 'Penghu';
+      break;
+    case '120':
+      eventLabel = 'Kinmen';
+      break;
+    case '121':
+      eventLabel = 'Lienchiang';
+      break;
+    default:
+      eventLabel = 'unknown';
+  }
+  dataLayer.push({ 'event': eventLabel });
+  // 發送 Facebook Pixel 事件
+  fbq('trackCustom', eventLabel);
+
+}