javascript 實現高仿 growingIO

{
    "header":{ // HTTP 頭部
        "X-Device-Id":" 550e8400-e29b-41d4-a716-446655440000", //裝置ID，用來區分使用者裝置
        "X-Source-Url":"https://www.baidu.com/", //源地址，關聯使用者的整個操作流程，用於使用者行為路徑分析，例如登入，到首頁，進入商品詳情，退出這一整個完整的路徑
        "X-Current-Url":"", //當前地址，使用者行為發生的頁面
        "X-User-Id":"",//使用者ID，統計登入使用者行為
    },
    "body":[{ // HTTP Body體
        "PageSessionID":"", //頁面標識ID，用來區分頁面事件，例如載入和離開我們會發兩個事件，這個標識可以讓我們知道這個事件是發生在一個頁面上
        "Event":"loaded", //事件型別，區分使用者行為事件
        "PageTitle":  "埋點測試頁",  //頁面標題，直觀看到使用者訪問頁面
        "CurrentTime":  “1517798922201”,  //事件發生的時間
        "ExtraInfo":  {
         }    //擴充套件欄位，對具體業務分析的傳參
    }]
}
複製程式碼

{
    "header":{ // HTTP 頭部
          "X-Device-Id"  ："550e8400-e29b-41d4-a716-446655440000"  ,      //  裝置id
    },
    "body":{ // HTTP Body體
              "DeviceType":  "web" ,   //裝置型別
             "ScreenWide"  :  768 , //  螢幕寬
             "ScreenHigh":  1366 , //  螢幕高
             "Language":    "zh-cn"  //語言
    }
}
複製程式碼

(function() {
			var collect = document.createElement('script');
			collect.type = 'text/javascript';
			collect.async = true;
			collect.src =  'http://collect.trc.com/index.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(collect, s);
	})();


//使用者自定義要進行無埋點採集的元素，如果不進行無埋點採集，可以不配置
 var _XT = [];
_XT.push(['Target','div']);
複製程式碼

//自定義事件
sdk.dispatch('customEvent',{extraInfo:'自定義事件的額外資訊'})
複製程式碼

//web 應用，通過嵌入 iframe 進行跨域 cookie 通訊，設定裝置id,
    collect.setIframe = function () {
        var that = this
        var iframe = document.createElement('iframe')
        iframe.id = "frame",
        iframe.src = 'http://collectiframe.trc.com' // 配置域名代理，目的是讓開發測試生產環境程式碼一致
        iframe.style.display='none' //iframe 設定的目的是用來生成固定的裝置id，不展示
        document.body.appendChild(iframe)

        iframe.onload = function () {
                iframe.contentWindow.postMessage('loaded','*');
        }

        //監聽message事件，iframe 載入完成，獲取裝置id ，進行相關的資料採集
        helper.on(window,"message",function(event){
            that.deviceId = event.data.deviceId

            if(event.data && event.data.type == 'loaded'){
                that.sendDevice(that.getDevice(), that.deviceUrl);
                setTimeout(function () {
                    that.send(that.beforeload)
                    that.send(that.loaded)
                },1000)
            }
        })
    }
複製程式碼

function receiveMessageFromIndex ( event ) {
    getDeviceInfo() // 獲取裝置資訊
    var data =  {
            deviceId: _deviceId,
            type:event.data
    }

    event.source.postMessage(data, '*'); // 將裝置資訊傳送給 SDK
}

//監聽message事件
if(window.addEventListener){
        window.addEventListener("message", receiveMessageFromIndex, false);
}else{
        window.attachEvent("onmessage", receiveMessageFromIndex, false)
複製程式碼

 // 改寫思路：拷貝 window 預設的 replaceState 函式，重寫 history.replaceState 在方法裡插入我們的採集行為，在重寫的 replaceState 方法最後呼叫，window 預設的 replaceState 方法

    collect = {}
    collect.onPushStateCallback : function(){}  // 自定義的採集方法

    (function(history){
        var replaceState = history.replaceState;   // 儲存原生 replaceState
        history.replaceState = function(state, param) {     // 改寫 replaceState
           var url = arguments[2];
           if (typeof collect.onPushStateCallback == "function") {
                 collect.onPushStateCallback({state: state, param: param, url: url});   //自定義的採集行為方法
           }
           return replaceState.apply(history, arguments);    // 呼叫原生的 replaceState
        };
     })(window.history);
複製程式碼

// app 與 h5 混合應用，直接將數資訊發給 app
collect.saveEvent = function (jsonString) {

    collect.dcpDeviceType && setTimeout(function () {
        if(collect.dcpDeviceType=='android'){
            android.saveEvent(jsonString)
        } else {
            window.webkit && window.webkit.messageHandlers ? window.webkit.messageHandlers.nativeBridge.postMessage(jsonString) : window.postBridgeMessage(jsonString)
        }

    },1000)
	}
複製程式碼

    var helper = {};

    // 生成一個唯一的標識，pageSessionId （用這個變數來關聯開始載入、載入完成、離開頁面的事件，計算出頁面加菜時間，停留時間）
    helper.uuid = function(){}

    // 元素繫結事件監聽，相容瀏覽器到IE8
    helper.on = function(){}

    //元素移除事件監聽的介面卡函式，相容瀏覽器到IE8
    helper.remove = function(){}

    //將json轉為字串,事件傳輸的引數型別轉化
    helper.changeJSON2Query = function(){}

    //將相對路徑解析成文件全路徑
    helper.normalize = function(){}
複製程式碼

    var collect = {
        deviceUrl:'http://collect.trc.com/rest/collect/device/h5/v1',
        eventUrl:'http://collect.trc.com/rest/collect/event/h5/v1',
        isuploadUrl:'http://collect.trc.com/rest/collect/isupload/app/v1',
        parmas:{ ExtraInfo:{} },
        device:{}
    };

    //獲取埋點配置
    collect.setParames = function(){}

    //更新訪問路徑及頁面資訊
    collect.updatePageInfo = function(){}

    //獲取事件引數
    collect.getParames = function(){}

    //獲取裝置資訊
    collect.getDevice = function(){}

    //事件採集
    collect.send = function(){}

    //裝置採集
    collect.sendDevice = function(){}

    //判斷才否採集，埋點採集的開關
    collect.isupload = function(){

        1. 判斷是否採集，不採集就登出事件監聽（專案中區分遊客身份和使用者身份的採集情況，這個方法會被判斷兩次）
        2. 採集則判斷是否已經採集過
            a.已經採集過不做任何操作
            b.沒有采集過新增事件監聽
        3. 判斷是 混合應用還是純 web 應用
            a.如果是web 應用，呼叫 collect.setIframe 設定 iframe
            b.如果是混合應用 將開始載入和載入完成事件傳輸給 app
    }

    //點選事件處理函式
    collect.clickHandler = function(){}

    //離開頁面的事件處理函式
    collect.beforeUnloadHandler = function(){}

    //頁面回退事件處理函式
    collect.onPopStateHandler = function(){}

    //系統事件初始化，註冊離開事件，瀏覽器後退事件
    collect.event = function(){}

    //獲取記錄開始載入資料資訊
    collect.getBeforeload = function(){}

    //儲存載入完成，獲取裝置型別，記錄載入完成資訊
    collect.onload = function(){

        1. 判斷cookie是否有存裝置型別資訊，有表示混合應用
        2. 採集載入完成時間等資訊
        3. 呼叫 collect.isupload 判斷是否進行採集
    }

    //web 應用，通過嵌入 iframe 進行跨域 cookie 通訊，設定裝置id
    collect.setIframe = function(){}

    //app 與 h5 混合應用，直接將數資訊發給 app,判斷裝置型別做原生方法介面卡
    collect.saveEvent = function(){}

    //採集自定義事件型別
    collect.dispatch = function(){}

    //將引數 userId 存入sessionStorage
    collect.storeUserId = function(){}

    //採集H5資訊,如果是混合應用，將採集到的資訊傳送給 app 端
    collect.saveEventInfo = function(){}

    //頁面初始化呼叫方法
    collect.init = function(){

        1. 獲取開始載入的採集資訊
        2. 獲取 SDK 配置資訊，裝置資訊
        3. 改寫 history 兩個方法，單頁面應用頁面跳轉前呼叫我們自己的方法
        4. 頁面載入完成，呼叫 collect.onload 方法

    }


    collect.init(); // 初始化

    //暴露給業務方呼叫的方法
    return {
        dispatch:collect.dispatch,
        storeUserId:collect.storeUserId,
    }
複製程式碼