百度统计组件升级 (#821)

* 增加动画 * mip-showmore_maxlengthbaseviewport_shadow * mip-showmore_update_readme * mip-showmore_update_readme * mip-showmore_update_readme_v3 * shange * Update changelog.md * ISSUE=remove_color * 增加显示隐藏动画效果 * showmore * revert mip-custom * mip-custom * showmore-readme * revert_mip-custom * showmore_update * showmore_update_remove_switch_default * 过fecs * showmore_fecs * 抽象动画函数调用 * 抽象动画函数调用 * 定义动画函数，使用gpu加速 * Update mip-custom.js * Update mip-custom.js * Update README.md * Update mip-showmore.less * 增加clearTimeout * merge_showmore_PR * merge_showmore_pr_v2 * 修改cleartimeout逻辑 * update_readme * mip-ad-comm_alink_top * revert * test_pr * change_lio * change_lio * change_log * mip-custom * pmd.css_style * Update package.json * mip-custom_medtag * update readme * update * update * addicon_changestyle * icon_remove * pmd * addiconfont * iconfont_addr * mip-custom_version * mip-custom_version_name * baidu-stats * update_baidu_stats
mipengine · Oct 11, 2017 · f032efc · f032efc
1 parent abecebd
commit f032efc
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 15 deletions.
diff --git a/mip-stats-baidu/README.md b/mip-stats-baidu/README.md
@@ -8,6 +8,8 @@
 支持布局|N/S
 所需脚本|https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js
 
+## 组件说明：MIP百度统计组件基于[百度统计API](http://tongji.baidu.com/open/api/more)，请参照API将参数配置在MIP页；目前事件追踪支持`click`,`mouseup`,`load`，其它事件暂不支持。
+
 ## 示例
 
 MIP提供百度统计的插件，便于分析页面数据，需要提前到百度统计这边创建站点，在百度统计后台会自动生成js代码。从中找出token后插入到MIP组件的token
@@ -19,6 +21,100 @@ hm.src = "https://hm.baidu.com/hm.js?02890d4a309827eb62bc3335b2b28f7f";
 // hm.js? 后为你的统计 token。此例 token="02890d4a309827eb62bc3335b2b28f7f"
 ```
 
+百度统计插件引入示例:
+
+```
+<mip-stats-baidu>
+    <script type="application/json">
+        {
+            "token": "02890d4a309827eb62bc3335b2b28f7f",
+            "_setCustomVar": [1, "login", "1", 2],
+            "_setAutoPageview": [true]
+        }
+    </script>
+</mip-stats-baidu>
+
+```
+
+百度统计事件追踪示例:
+
+```
+<div data-stats-baidu-obj="{'type':'click','data':'[_trackPageview, /virtual/login]'}">
+    我是自动触发
+</div>
+ 
+```
+
+## 属性
+
+### token
+
+说明：token，从百度统计代码中截取。
+
+必填：是
+
+格式：字符串
+
+### _setCustomVar 参考([百度统计api:_setCustomVar](http://tongji.baidu.com/open/api/more?p=ref_setCustomVar))
+
+说明：指定一个自定义变量，用于追踪用户使用行为等。
+
+必填：否
+
+格式：数组
+
+### _setAutoPageview 参考([百度统计api:_setAutoPageview](http://tongji.baidu.com/open/api/more?p=ref_setAutoPageview))
+
+说明：用户访问一个安装了百度统计代码的页面时，代码会自动发送该页面的PV统计请求，如果不希望自动统计该页面的PV，就可以使用本接口。主要用于iframe嵌套页面等情况。
+
+必填：否
+
+格式：数组
+
+### _trackPageview 参考([百度统计api:_trackPageview](http://tongji.baidu.com/open/api/more?p=ref_trackPageview))
+
+说明：用于发送某个指定URL的PV统计请求，通常用于AJAX页面的PV统计。
+
+必填：否
+
+格式：数组
+
+
+## 事件追踪属性: data-stats-baidu-obj
+
+### type
+
+说明：对应的触发事件(load加载触发/click点击触发/mouseup触发)
+
+必填：是
+
+格式：字符串数组
+
+
+### data
+
+说明：用于事件追踪数据传递参考([百度统计api](http://tongji.baidu.com/open/api/))
+
+必填：是
+
+格式：字符串
+
+### 备注：
+
+`_setAccount`无需设置，`token`合法会自动执行`_hmt.push(['_setAccount',toke])`。
+
+
+# 其它使用方式(可以正常运行，但不推荐)
+
+token获取：
+
+``` javascript
+// 例：百度统计代码截取
+hm.src = "https://hm.baidu.com/hm.js?02890d4a309827eb62bc3335b2b28f7f";
+// hm.js? 后为你的统计 token。此例 token="02890d4a309827eb62bc3335b2b28f7f"
+```
+
+
 百度统计插件引入示例:
 
 ```
@@ -27,6 +123,7 @@ hm.src = "https://hm.baidu.com/hm.js?02890d4a309827eb62bc3335b2b28f7f";
 ```
 
 百度统计事件追踪示例:
+
 ```
 <div data-stats-baidu-obj="%7B%22type%22:%22click%22,%22data%22:%22%5B_trackPageview,%20/virtual/login%5D%22%7D">
     我是自动触发

diff --git a/mip-stats-baidu/mip-stats-baidu.js b/mip-stats-baidu/mip-stats-baidu.js
@@ -1,20 +1,21 @@
 /**
  * @file 百度统计插件
  *
- * @author menglingjun, Jenny_L
+ * @author menglingjun, Jenny_L, dongshihao
  * From: mip-stats-baidu
  */
 
 define(function (require) {
     var $ = require('zepto');
     var viewer = require('viewer');
+    var util = require('util');
 
     var customElement = require('customElement').create();
 
     customElement.prototype.createdCallback = function () {
         var elem = this.element;
-        var token = elem.getAttribute('token');
-        var setConfig = elem.getAttribute('setconfig');
+        var config = this.getConfig();
+        var token = config.token;
 
         /**
          * 检测token是否存在
@@ -30,25 +31,73 @@ define(function (require) {
             if (viewer.isIframed) {
                 bdSearchCase();
             }
-
-            /**
-             * 检测setconfig是否存在
-             */
-            if (setConfig) {
-                var setCustom = buildArry(decodeURIComponent(setConfig));
-                _hmt.push(setCustom);
+            if (config && Array.isArray(config.conf) && config.conf.length) {
+                var conf = config.conf;
+                for (var i = 0; i < conf.length; i++) {
+                    _hmt.push(conf[i]);
+                }
             }
-
             var hm = document.createElement('script');
             hm.src = 'https://hm.baidu.com/hm.js?' + token;
             $(elem).append(hm);
             hm.onload = function () {
                 bindEle();
             };
+        } else {
+            console.warn('token is unavailable'); // eslint-disable-line
         }
 
     };
 
+    /**
+     * get config from script has type="application/json"
+     *
+     * @return {Object} config  return stats config
+     */
+    customElement.prototype.getConfig = function () {
+        var config = {};
+        var setconfig = this.element.getAttribute('setconfig');
+        try {
+            var script = this.element.querySelector('script[type="application/json"]');
+            if (script) {
+                var textContent = JSON.parse(script.textContent);
+                if (JSON.stringify(textContent) !== '{}') {
+                    config.token = textContent.token;
+                    util.fn.del(textContent, 'token');
+                    config.conf = this.objToArray(textContent);
+                }
+                return config;
+            }
+        }
+        catch (e) {
+            console.warn('json is illegal'); // eslint-disable-line
+            console.warn(e); // eslint-disable-line
+        }
+        return {
+            'token': this.element.getAttribute('token'),
+            'conf': setconfig ? new Array(buildArry(decodeURIComponent(setconfig))) : null
+        };
+    };
+
+    /**
+     * JSON object to Array
+     *
+     * @param {Object} configObj configObj from script has type="application/json"
+     * @return {Object} outConfigArray return stats array
+     */
+    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;
+    };
 
     // 绑定事件追踪
     function bindEle() {
@@ -158,7 +207,7 @@ define(function (require) {
             if (hashEqid && isMatch(from, 'result')) {
                 hashObj.url = '';
                 hashObj.eqid = hashEqid;
-            } 
+            }
             else {
                 hashObj.word = hashWord;
             }
@@ -167,20 +216,22 @@ define(function (require) {
         }
 
     }
+
     /**
      * to determine whether from the targetFrom
      *
      * @param  {string} from  referrer from mipService
      * @param  {string} targetFrom  the target that `from` need to match.
      * @return {boolean}     return whether from the results page
      */
-    function isMatch (from, targetFrom) {
+    function isMatch(from, targetFrom) {
         if (from && targetFrom && from === targetFrom) {
             return true;
         } else {
             return false;
-        } 
+        }
     }
+
     /**
      * 生成百度统计_setReferrerOverride对应的referrer
      *

diff --git a/mip-stats-baidu/package.json b/mip-stats-baidu/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mip-stats-baidu",
-    "version": "1.0.9",
+    "version": "1.1.0",
     "description": "百度统计组件，用于统计页面数据",
     "author": {
         "name": "menglingjun",