神策数据(www.sensorsdata.cn)jssdk的mip组件

src/mip-stats-sa/README.md

@@ -0,0 +1,73 @@
+# mip-stats-sa
+
+mip-stats-sa 组件说明
+神策 jssdk ，参考完整文档[点击这里](http://www.sensorsdata.cn/manual/js_sdk.html)。  
+目前事件追踪支持 `click`, `mouseup`, `load`，其它事件暂不支持。  
+
+标题|内容
+----|----
+类型|通用
+支持布局|responsive,fixed-height,fill,container,fixed
+所需脚本|https://c.mipcdn.com/static/v1/mip-stats-sa/mip-stats-sa.js
+
+## 示例
+
+### 1. 基本用法，引入SDK
+```html
+
+<mip-stats-sa setconfig=""></mip-stats-sa>
+
+```
+
+其中的setconfig的值，encodeURIComponent(JSON.stringify(以下神策sdk的配置)) 以下是神策jssdk的配置项参考  
+```javascript
+{
+  sdk_url: '/wmd/sa-sdk-javascript/src/sensorsdata.full.js',
+  heatmap:{},
+  web_url:'http://www.aa.vb',
+  name: 'sa',
+  server_url: 'https://test111.cloud.sensorsdata.cn:4006/sa'
+}
+```
+
+### 2. 自定义采集数据
+
+可以通过 click mouseup load 方式来触发自定义采集的数据。
+
+这是需要配置的值
+```
+var para = {"type":"click","data":["track", 'click_button',{button_name:'导航'}]}
+```
+#### type
+
+说明：对应的触发事件(load 加载触发/click 点击触发/mouseup 触发)  
+必填：是  
+格式：字符串数组  
+
+#### data
+
+说明：用于自定义采集数据  
+必填：是  
+格式：字符串
+
+### 注意
+第一个参数表示，神策里的方法 track setProfile 等。
+第二个参数是 arguments，比如上面的这行代码的含义表示 发送一个 click_button 的事件，同时有属性 button_name 是 导航。
+
+
+## 实际案例方法
+
+```html
+// 这个代码必须放在首屏，不然不会触发
+<mip-stats-sa setconfig="%7B%22sdk_url%22%3A%22http%3A%2F%2Fstatic.sensorsdata.cn%2Fsdk%2F1.10.1%2Fsensorsdata.min.js%22%2C%22heatmap_url%22%3A%22http%3A%2F%2Fstatic.sensorsdata.cn%2Fsdk%2F1.10.1%2Fheatmap.min.js%22%2C%22name%22%3A%22sa%22%2C%22server_url%22%3A%22http%3A%2F%2Ftest-syg.cloud.sensorsdata.cn%3A8006%2Fsa%3Ftoken%3D27f1e21b78daf376%22%7D"></mip-stats-sa>
+
+
+<div data-stats-sa-obj="%7B%22type%22%3A%22load%22%2C%22data%22%3A%5B%22quick%22%2C%22autoTrack%22%5D%7D"></div>
+
+```
+其中第一行表示 sdk 的配置   
+
+其中第二行表示在页面load后 执行代码 sa.quick('autoTrack') ,转换成的配置代码为 {type:'load',data:['quick','autoTrack']}   
+
+同样的，如果你希望在 click 后执行， sa.track('click_button',{button_name:'nav'}) ，只需要配置如下代码 {type:'click',data:['track','click_button',{button_name:'nav'}]}  
+

src/mip-stats-sa/mip-stats-sa.js

@@ -0,0 +1,178 @@
+/**
+ * @file 神策统计插件
+ * @author shengyonggen
+ * @email [email protected]
+ * 参考了mip-stats-baidu的实现方式
+ */
+
+define(function (require) {
+    var util = require('util');
+    var Gesture = util.Gesture;
+    var fn = require('util').fn;
+
+    var customElement = require('customElement').create();
+
+    customElement.prototype.firstInviewCallback = function () {
+
+
+        var elem = this.element;
+        var config = this.getConfig();
+        if (config) {
+            var para = config;
+            var n = para.name;
+            var x = null;
+// 使用window说明： 为了使用第三方统计神策数据JSSDK(www.sensorsdata.cn)里暴露的全局变量
+            window['sensorsDataAnalytic201505'] = n;
+            if (!window[n]) {
+                window[n] = function (a) {
+                    return function () {
+                        window[n]._q = window[n]._q || [];
+                        window[n]._q.push([a, arguments]);
+                    };
+                };
+            }
+            var ifs = ['track', 'quick', 'register', 'registerPage', 'registerOnce', 'registerSession',
+             'registerSessionOnce', 'trackSignup', 'trackAbtest', 'setProfile', 'setOnceProfile', 'appendProfile',
+             'incrementProfile', 'deleteProfile', 'unsetProfile', 'identify', 'login', 'logout', 'clearAllRegister'];
+            for (var i = 0; i < ifs.length; i++) {
+                window[n][ifs[i]] = window[n].call(null, ifs[i]);
+            }
+            if (!window[n]._t) {
+                x = document.createElement('script');
+                x.async = 1;
+                x.src = para.sdk_url;
+                elem.appendChild(x);
+                window[n].para = para;
+            }
+            this.bindEle();
+        } else {
+            console.warn('sensorsdata config is wrong');
+        }
+
+    };
+
+    customElement.prototype.getConfig = function () {
+        var config = {};
+        var setconfig = this.element.getAttribute('setconfig');
+        try {
+            config = decodeURIComponent(setconfig);
+            config = JSON.parse(config);
+        } catch (e) {
+            config = null;
+        }
+        this.saConfig = config;
+        return config;
+    };
+
+    customElement.prototype.objToArray = function (configObj) {
+        var outConfigArray = [];
+        if (!configObj) {
+            return;
+        }
+        for (var key in configObj) {
+            if (configObj.hasOwnProperty(key) && Array.isArray(configObj[key])) {
+                configObj[key].unshift(key);
+                outConfigArray.push(configObj[key]);
+            }
+        }
+        return outConfigArray;
+    };
+
+    customElement.prototype.saSend = function (data) {
+        var slice = Object.prototype.toString;
+        if (slice.call(data) !== '[object Array]') {
+            return false;
+        }
+        var type = data[0];
+        var arg = data.slice(1);
+        var name = this.saConfig.name;
+        var sa = window[name];
+        sa[type].apply(sa, arg);
+    };
+
+    // 绑定事件追踪
+    customElement.prototype.bindEle = function () {
+        var me = this;
+        // 事件触发
+        function eventHandler(event) {
+            var tempData = this.getAttribute('data-stats-sa-obj');
+            if (!tempData) {
+                return;
+            }
+            var statusJson;
+            try {
+                statusJson = JSON.parse(decodeURIComponent(tempData));
+            } catch (e) {
+                console.warn('事件追踪data-stats-sa-obj数据不正确');
+                return;
+            }
+            if (!statusJson.data) {
+                return;
+            }
+
+            var attrData = statusJson.data;
+            me.saSend(attrData);
+        }
+
+        // 获取所有需要触发的dom
+        var tagBox = document.querySelectorAll('*[data-stats-sa-obj]');
+
+        for (var index = 0; index < tagBox.length; index++) {
+            var statusData = tagBox[index].getAttribute('data-stats-sa-obj');
+
+            /**
+             * 检测statusData是否存在
+             */
+            if (!statusData) {
+                continue;
+            }
+
+            try {
+                statusData = JSON.parse(decodeURIComponent(statusData));
+            } catch (e) {
+                console.warn('事件追踪data-stats-sa-obj数据不正确');
+                continue;
+            }
+
+            var eventType = statusData.type;
+
+            /**
+             * 检测传递数据是否存在
+             */
+            if (!statusData.data) {
+                continue;
+            }
+
+            // 格式化数据
+            var data = statusData.data;
+
+            if (eventType !== 'click' && eventType !== 'mouseup' && eventType !== 'load') {
+                // 事件限制到click,mouseup,load(直接触发)
+                continue;
+            }
+
+            if (tagBox[index].classList.contains('mip-stats-eventload')) {
+                continue;
+            }
+
+            tagBox[index].classList.add('mip-stats-eventload');
+
+            if (eventType === 'load') {
+                this.saSend(data);
+            }
+            // 解决on=tap: 和click冲突短线方案
+            // TODO 这个为短线方案
+            else if (eventType === 'click'
+                && tagBox[index].hasAttribute('on')
+                && tagBox[index].getAttribute('on').match('tap:')
+                && fn.hasTouch()) {
+                var gesture = new Gesture(tagBox[index]);
+                gesture.on('tap', eventHandler);
+            } else {
+                tagBox[index].addEventListener(eventType, eventHandler, false);
+            }
+        }
+    };
+
+    return customElement;
+});

src/mip-stats-sa/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "mip-stats-sa",
+    "version": "1.0.0",
+    "description": "神策数据 javascript sdk",
+    "contributors": [
+        {
+            "name": "shengyonggen",
+            "email": "[email protected]"
+        }
+    ],
+    "engines": {
+        "mip": ">=1.1.0"
+    }
+}