1. 整合神策分析 SDK


將產生的程式碼放入 html 的 head 裡面，需要放在稍微靠前點的位置。

將以下程式碼放入 html 的 head 裡面，需要放在稍微靠前點的位置。 您在使用 sensors.track() 時，只要確保寫在上面引用的程式碼的下面就可以，不需要等 window.onload 後再執行。

<script>
(function(para) {
	var p = para.sdk_url, n = para.name, w = window, d = document, s = 'script',x = null,y = null;
	if(typeof(w['sensorsDataAnalytic201505']) !== 'undefined') {
    	return false;
  	}
	w['sensorsDataAnalytic201505'] = n;
	w[n] = w[n] || function(a) {return function() {(w[n]._q = w[n]._q || []).push([a, arguments]);}};
	var ifs = ['track','quick','register','registerPage','registerOnce','clearAllRegister','trackSignup', 'trackAbtest', 'setProfile','setOnceProfile','appendProfile', 'incrementProfile', 'deleteProfile', 'unsetProfile','identify','login','logout','trackLink'];
	for (var i = 0; i < ifs.length; i++) {
		w[n][ifs[i]] = w[n].call(null, ifs[i]);
	}
	if (!w[n]._t) {
		x = d.createElement(s), y = d.getElementsByTagName(s)[0];
		x.async = 1;
		x.src = p;
		x.setAttribute('charset','UTF-8');
		w[n].para = para;
		y.parentNode.insertBefore(x, y);
	}
})({
	sdk_url: '在 github 下載新版本的 sensorsdata.min.js ',
	name: 'sensors',
	server_url:'數據接收網址',
	heatmap: {
		//是否開啟點擊圖，default 表示開啟，自動採集 $WebClick 事件，可以設定 'not_collect' 表示關閉。
		clickmap:'default',
		//是否開啟處達注意力圖，not_collect 表示關閉，不會自動採集 $WebStay 事件，可以設定 'default' 表示開啟。
		scroll_notice_map:'not_collect'
	}
}); 
sensors.quick('autoTrack');
</script>
JS

如果您需要把引入程式碼和 SDK 文件整合在一个文件中，然後在頁面head藉由script src 的方式引入。你可以把引入程式碼改成如下方式，並放在下載下来的 sensorsdata.min.js 文件前面。

<script charset='UTF-8' src="https://cdn.jsdelivr.net/npm/sa-sdk-javascript@1.15.1/sensorsdata.min.js"></script>
<script>
	var sensors = window['sensorsDataAnalytic201505'];
	sensors.init({
    	sdk_url: 'https://cdn.jsdelivr.net/npm/sa-sdk-javascript@1.15.1/sensorsdata.min.js',
  		heatmap_url: 'https://cdn.jsdelivr.net/npm/sa-sdk-javascript@1.15.1/heatmap.min.js',
  		name: 'sensors',
  		server_url: 'http://test-syg.datasink.sensorsdata.cn/sa?token=27f1e21b78daf376&project=xxxxxx'    
	});
	sensors.quick('autoTrack');
</script>
JS

從 npm 取得 sdk ， npm install sa-sdk-javascript

var sensors = require('sa-sdk-javascript'); 
sensors.init({
  server_url: '數據接收網址',
  heatmap: {
     //是否開啟點擊圖，default 表示開啟，自動採集 $WebClick 事件，可以設定 'not_collect' 表示關閉。
     clickmap:'default',
     //是否開啟處達注意力圖，not_collect 表示關閉，不會自動採集 $WebStay 事件，可以設定 'default' 表示開啟。
     scroll_notice_map:'not_collect'
  }
});
sensors.quick('autoTrack'); //用於採集 $pageview 事件。
JS

從GitHub 取得 sensorsdata.amd.min.js ，假設該文件放到與 require.js 同一個目錄中

requirejs(["./sensorsdata.amd.min"], function(sensors) {
            sensors.init({
                server_url: '數據接收網址',
                heatmap:{
                    clickmap: 'default',
                    scroll_notice_map: 'not_collect'
                }
            });
            sensors.quick('autoTrack');
        });
JS
  1. 不要將頁面渲染的程式碼放在 window.onload 中。當神策伺服器異常時，Web JS SDK 傳送的圖片數據請求無法即時回應，會導致 window.onload 無法生效。如果一定要使用 window.onload 的話，建議將 send_type 參數設為jo4 'ajax'，使用 ajax 傳送數據。

  2. 不要在線上 file 協定網址的頁面中使用 Web JS SDK，因為無法寫 cookie 記錄用戶，觸發大量新增的匿名用戶數據和 profile_set_once 事件。

  3. 不要在 iframe 內嵌的跨網域 H5 頁面內使用 Web JS SDK，因為部分瀏覽器對於第三方 cookie 的限制策略會導致 SDK 無法讀寫 cookie,進而導致會觸發大量新增的匿名用戶數據和 profile_set_once 事件。

  4. ie9 瀏覽器使用 SDK 時，如果設定了 send_type: true 且頁面網址的協定與 server_url 協定不一致時，會導致數據無法發送。另外，所有設定項上的請求協定與頁面網址的協定要求保持一致。

2. SDK 基本設定

2.1. 設定專案數據接收網址

自動產生匯入程式碼時，會自動設定前專案接收網址。其他方式引入 SDK 時，需要手動將 server_url 參數設定為相應專案的數據接收網址。

2.2. 開啟全埋點

初始化 SDK 時，heatmap 參數和 quick() 介面可以設定 SDK 全埋點。全埋點的更多設定，可參考全埋點 (Web) 。

2.3. 設定事件公共屬性

對於所有事件都需要增加的屬性，可在初始化 SDK 後，呼叫 registerPage() 將屬性註冊為公共屬性：

<script>
// 初始化 SDK

// 註冊公共屬性
sensors.registerPage({
	current_url: location.href,
	referrer: document.referrer
});
</script>
JS

2.4. 用戶登入

當用戶註冊成功或者登入成功時，需要呼叫 login() 方法傳入登入 ID：

sensors.login("登入 ID")
JS

對於自動登入的用戶，SDK 初始化後，需要立即取得登入 ID 並呼叫 login() 方法。

2.5. 程式碼埋點追蹤事件

 SDK 初始後，即可以透過 track() 方法追蹤用戶行為事件，並增加自定義屬性：

sensors.track('BuyProduct', {
	ProductName: "MacBook Pro", 
	ProductPrice: 123.45, 
	IsAddedToFav: false,
});
JS

3. 除錯查看事件資訊

3.1. 事件的觸發 log

SDK 初始化時，將 show_log 設定為 true 即可打開 log 輸出功能。頁面上有事件觸發時，瀏覽器開發者工具會列印出採集的事件資訊。

3.2. 事件的傳送情况

事件數據傳送成功時，在瀏覽器開發者工具的 Network 模組中，可以看到 sa.gif 的網路請求，如果狀態為 200，則程式碼事件數據傳送成功。


4. SDK 可選設定

4.1. 設定用戶屬性

setProfile() 方法可以設定用戶屬性，同一個 key 多次設定時，value 值會進行覆蓋替換。

sensors.setProfile({email:'xxx@xx'});
JS

更多設定用戶屬性 API，可參考設定用戶屬性。

4.2. 打通 App 與 H5

對於嵌入 App 中 H5 頁面，如果 App 也整合了神策分析的 SDK ，H5 頁面數據可以透過 App 進行上報，並會自動增加 App 取得到的預設屬性。該功能預設是關閉狀態，可參考 App 打通 H5 進行開啟。

4.3. 可視化全埋點

版本要求

Web JS SDK v1.15.10 及以上版本

在整合 Web JS SDK 後，如果開啟了全埋點功能，則可視化全埋點功能也會自動開啟。詳細可參考可視化全埋點。