1. 目的：因營運管理需要，欲瞭解於網頁活動的會員，其於電腦/手機/平板之使用佔比，故安排埋入ga 事件code，以利觀測會員裝置使用狀況

方法一

1.1. 埋入ga 事件code

1. 記錄使用者與事件的互動

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

1. send: "事件的hit"這個動作，用sent指令
1. event: "hit"的種類記錄

1. 事件包含幾個要素
   1. 類別
   2. 動作
      1. 為特定網頁物件追蹤的事件或互動類型通常會以動作參數來命名
   3. 標籤 (自選，但建議使用)
   4. 值 (自選)
2. 動作和標籤的最佳做法
   1. 動作名稱必須與報表資料相關
   2. 彙整或區別使用者互動時，使用一致的動作名稱
   3. 「動作」參數不一定只追蹤「動作」
   4. 只有不重複動作會使不重複事件遞增
3. GA - Event Tracking

1.2. GTM

使用 GTM 做為 GA 接收資料的 trigger

方法二

在連結埋入參數 jobsource & jobno

目的: 記錄使用者從何種途徑到達指定的頁面，可以區分不同網頁廣告來源的點擊次數

在超連結中，新增 class="js-monitor-params"的屬性，這個屬性經由
以下 js 把參數 jobsource到下個網頁的超連結上如:

• ＰＳ： 因為這隻 js的 onload與其他隻 js的 onload衝突(衝突: 在後面執行的 js會把前面的蓋掉)，暫時的策略是把 js 放在 html 裡的 body 最後面引入

var MonitorAdParm = {};
var MonitorClass = MonitorClass || {};
MonitorAdParm = (function () {
  var getUrlParm;
  var addUrlParm;
  getUrlParm = function (queryKey) {
    var str = '';
    var result = '';
    var keyWord = queryKey;
    var url = '';
    var urlArr = [];
    url = document.location.search.toString();
    if( url.indexOf('#') !== -1 ){
        url = url.substring(0, url.indexOf('#'));
      } 
    if (url.indexOf('?') !== -1) {
      urlArr = url.split('?')[1].split('&');
      for (i in urlArr) {
        str = urlArr[i].split('=')[0];
        if (str === keyWord) {
          result = urlArr[i];
        }
      }
    }
    return result;
  };
  addUrlParm = function (urlParm, linkClass) {
    var linkDoms = document.querySelectorAll(linkClass);
    var linkDomSize = linkDoms.length;

    var hasSharpMark = function(url){
        var has = true;
        if(url.indexOf('#') === -1){
          has = false;
        }
        return has;
      }

    var hasQuestionMark = function (url) {
      var has = true;
      if (url.indexOf('?') === -1) {
        has = false;
      }
      return has;
    }

    if (linkDomSize < 0 || !urlParm) return false;

    for (var idx in linkDoms) {
      if (linkDoms.hasOwnProperty(idx)) {
        if (idx === 'length') {
          return false;
        }
        
        var changeUrl = linkDoms[idx].href;

        var sharpMark = '';
        if( hasSharpMark(changeUrl) ){
            var sharpIdx = changeUrl.indexOf('#');
            sharpMark = changeUrl.substring(sharpIdx,changeUrl.length);
            changeUrl = changeUrl.substring(0,sharpIdx);
          }

        var connection = '&';
        if (!hasQuestionMark(changeUrl)) { 
          connection = '?';
        }
        
        if(changeUrl.indexOf(urlParm) !== -1) {
            changeUrl = changeUrl + sharpMark;
            linkDoms[idx].href = changeUrl; 
          }else{
            changeUrl = changeUrl + connection + urlParm + sharpMark; 
            linkDoms[idx].href = changeUrl;
          }
          console.log(linkDoms[idx].href);
      }
    }
  };
  return {
    getUrlParm: getUrlParm,
    addUrlParm: addUrlParm
  };
}());
MonitorClass = {
  count: 0, 
  interval: {}, 
  loopLimit: 0, 
  targetClass: '.js-monitor-params',
  onFindClass: function () {},
  onUnfindClass: function () {},
  init: function (options) {
    this.onFindClass = options.onFindClass;
    this.onUnfindClass = options.onUnfindClass;
    this.loopLimit = options.loopLimit;
    this.targetClass = options.targetClass;
    var linkDoms = document.querySelectorAll(this.targetClass);
    if (linkDoms.length > 0) {
      options.onFindClass();
    } else {
      this.loop();
    }
  },
  loop: function () {
    var limit = this.loopLimit;
    var onFindClass = this.onFindClass;
    var onUnfindClass = this.onUnfindClass;
    var count = this.count;
    MonitorClass.interval = setInterval(function () {
      var linkDoms = document.querySelectorAll(this.targetClass);
      var linkDomSize = linkDoms.length;
      count = count + 1;
      if (linkDomSize > 0) { 
        clearInterval(MonitorClass.interval);
        onFindClass();
      }
      if (count === limit) { 
        clearInterval(MonitorClass.interval);
      }
      if (count === limit && linkDomSize === 0) {
        onUnfindClass();
      }
    }, 1000);
  },
};
$(function () {
  MonitorClass.init({
    targetClass: '.js-monitor-params', 
    loopLimit: 3,
    onFindClass: function () {
      var parm = MonitorAdParm.getUrlParm('jobsource');
      MonitorAdParm.addUrlParm(parm, '.js-monitor-params');
    },
    onUnfindClass: function () { 
      console.log('Can not find class name: js-monitor-params');
    },
  });
});