Merge pull request mipengine#282 from apple01150525/novel-log

【小说阅读器】添加白屏日志打点和交互行为日志打点

components/mip-shell-xiaoshuo/common/events.js

@@ -4,6 +4,8 @@
  * @author liujing
  */
 import {Constant} from './constant-config'
+import {sendTCLog} from './../common/log'
+
 let event = window.MIP.util.event
 
 export default class XiaoshuoEvents {
@@ -15,6 +17,11 @@ export default class XiaoshuoEvents {
      */
     let nextPageButton = '.mip-shell-footer .page-next:not(.disabled)'
     event.delegate(document.documentElement, nextPageButton, 'click', function () {
+      // tc日志打点
+      sendTCLog('interaction', {
+        type: 'b',
+        action: 'nextShellButton'
+      })
       window.MIP.viewer.page.emitCustomEvent(window, false, {
         name: Constant.NEXT_PAGE_BUTTON_CLICK
       })
@@ -26,6 +33,11 @@ export default class XiaoshuoEvents {
      */
     let previousPageButton = '.mip-shell-footer .page-previous:not(.disabled)'
     event.delegate(document.documentElement, previousPageButton, 'click', function () {
+      // tc日志打点
+      sendTCLog('interaction', {
+        type: 'b',
+        action: 'preShellButton'
+      })
       window.MIP.viewer.page.emitCustomEvent(window, false, {
         name: Constant.PREVIOUS_PAGE_BUTTON_CLICK
       })
@@ -38,5 +50,37 @@ export default class XiaoshuoEvents {
     window.MIP.viewer.page.emitCustomEvent(window, false, {
       name: Constant.CURRENT_PAGE_READY
     })
+    this.bindPrePageButton()
+    this.bindNextPageButton()
+  }
+
+  /**
+   * 当shell内部【上一页】按钮被点击了,发送tc日志
+   *
+   * @private
+   */
+  bindPrePageButton () {
+    event.delegate(document.documentElement, '.navigator a:first-child', 'click', function () {
+      // tc日志打点
+      sendTCLog('interaction', {
+        type: 'b',
+        action: 'prePageButton'
+      })
+    })
+  }
+
+  /**
+   * 当shell内部【下一页】按钮被点击了,发送tc日志
+   *
+   * @private
+   */
+  bindNextPageButton () {
+    event.delegate(document.documentElement, '.navigator a:last-child', 'click', function () {
+      // tc日志打点
+      sendTCLog('interaction', {
+        type: 'b',
+        action: 'nextPageButton'
+      })
+    })
   }
 }

components/mip-shell-xiaoshuo/common/log.js

@@ -4,7 +4,8 @@
  */
 
 /**
- * 发送日志
+ * 发送webb性能日志
+ *
  * @param {string} type 日志类型
  * @param {Object} info 日志信息
  */
@@ -17,3 +18,27 @@ export function sendWebbLog (type, info) {
   let eventName = type + '-log'
   MIP.viewer.sendMessage(eventName, data)
 }
+
+/**
+ * 发送tc交互日志
+ *
+ * @param {string} type 日志类型
+ * @param {Object} info 日志信息
+ * @param {Object} extra 额外信息
+ */
+export function sendTCLog (type, info, extra) {
+  let eventName = type + '-log'
+  let data = Object.assign({
+    'clk_info': info
+  }, {
+    pd: 'novel'
+  })
+  if (extra) {
+    data = Object.assign({
+      ...data
+    }, {
+      extra
+    })
+  }
+  MIP.viewer.sendMessage(eventName, data)
+}

components/mip-shell-xiaoshuo/common/util.js

@@ -33,6 +33,7 @@ export const getCurrentWindow = () => {
 
 /**
  * 获取上级可scroll的元素
+ *
  * @private getClosestScrollElement
  * @param {Object} element 目标元素
  */

components/mip-shell-xiaoshuo/example/mipx-xiaoshuo-1-1.html

@@ -409,7 +409,10 @@ <h3>第1章 灵魂重生(1)</h3>
     </p>
   </div>
 </div>
-<a cache-first class="link" href="./mipx-xiaoshuo-1-2.html" mip-link="">下一页</a>
+<div class="navigator">
+  <a class="link" href="#" mip-link="">上一页</a> 
+  <a class="link" href="./mipx-xiaoshuo-1-2.html" mip-link="">下一页</a>
+</div>
 <footer id="footer">
   小说网 &copy; 2018 - 冀ICP备xxxx号
 </footer>

components/mip-shell-xiaoshuo/example/mipx-xiaoshuo-1-2.html

@@ -199,7 +199,7 @@
                     "page": 1
                 },
                 "nextPage": {
-                    "url": "mipx-xiaoshuo-1-3.html",
+                    "url": "mipx-xiaoshuo-1-66.html",
                     "chapter": 1,
                     "page": 3
                 }
@@ -409,7 +409,10 @@ <h3>第1章 灵魂重生(2)</h3>
     </p>
   </div>
 </div>
-<a  cache-first class="link" href="./mipx-xiaoshuo-1-3.html" mip-link="" replace>下一页</a>
+<div class="navigator">
+  <a class="link" href="./mipx-xiaoshuo-1-1.html" mip-link="">上一页</a> 
+  <a class="link" href="./mipx-xiaoshuo-1-3.html" mip-link="" replace>下一页</a>
+</div>
 <footer id="footer">
   小说网 &copy; 2018 - 冀ICP备xxxx号
 </footer>

components/mip-shell-xiaoshuo/example/mipx-xiaoshuo-1-3.html

@@ -409,7 +409,11 @@ <h3>第1章 灵魂重生(3)</h3>
     </p>
   </div>
 </div>
-<a  cache-first class="link" href="./mipx-xiaoshuo-1-2.html" mip-link="">下一页</a>
+<div class="navigator">
+  <a class="link" href="./mipx-xiaoshuo-1-1.html" mip-link="">上一页</a> 
+  <a class="link" href="./mipx-xiaoshuo-1-2.html" mip-link="">下一页</a>
+</div>
+
 <footer id="footer">
   小说网 &copy; 2018 - 冀ICP备xxxx号
 </footer>

components/mip-shell-xiaoshuo/example/mipx-xiaoshuo-2-1.html

@@ -409,7 +409,11 @@ <h3>第2章 敢背叛我(1)</h3>
     </p>
   </div>
 </div>
-<a  cache-first class="link" href="./mipx-xiaoshuo-1-2.html" mip-link="">下一页</a>
+<div class="navigator">
+  <a class="link" href="./mipx-xiaoshuo-1-1.html" mip-link="">上一页</a>
+  <a class="link next" href="./mipx-xiaoshuo-1-2.html" mip-link="">下一页</a>
+</div>
+
 <footer id="footer">
   小说网 &copy; 2018 - 冀ICP备xxxx号
 </footer>

components/mip-shell-xiaoshuo/example/mipx-xiaoshuo-3-1.html

@@ -418,7 +418,10 @@ <h3>第3章 灵魂重生(1)</h3>
     陆宇眼神坚定，他是魂天师，就算是废武魂，他也一样能搅动天地，称雄万世！
   </p>
 </div>
-<a  cache-first class="link" href="./mipx-xiaoshuo-1-2.html" mip-link="">下一页</a>
+<div class="navigator">
+  <a class="link" href="./mipx-xiaoshuo-1-1.html" mip-link="">上一页</a>
+  <a class="link next" href="./mipx-xiaoshuo-1-2.html" mip-link="">下一页</a>
+</div>
 <footer id="footer">
   小说网 &copy; 2018 - 冀ICP备xxxx号
 </footer>

components/mip-shell-xiaoshuo/feature/catalog.js

@@ -8,9 +8,10 @@
 
 import state from '../common/state'
 import {getCurrentWindow} from '../common/util'
-import {sendWebbLog} from './../common/log' // 日志
+import {sendWebbLog, sendTCLog} from './../common/log' // 日志
 
 let util = MIP.util
+let event = util.event
 class Catalog {
   constructor (config, book) {
     // 渲染侧边栏目录元素
@@ -202,8 +203,12 @@ class Catalog {
       $catalogSidebar.removeChild($catalogSidebar.querySelector('.mip-shell-catalog'))
       $catalogSidebar.appendChild($catalog)
     }
+    this.bindClickCatalogMessageEvent()
+    this.bindShellCatalogMessageEvent()
+    this.bindPageCatalogMessageEvent()
     return $catalogSidebar
   }
+
   /**
    * 发送目录渲染失败日志
    *
@@ -215,6 +220,49 @@ class Catalog {
       renderMethod: 'async'
     })
   }
+
+  /**
+   * 发送 搜索点出/二跳 日志
+   * 点击目录章节绑定发送日志函数
+   *
+   * @private
+   */
+  bindClickCatalogMessageEvent () {
+    event.delegate(document.documentElement, '.novel-catalog-content .catalog-page-content', 'click', () => {
+      sendTCLog('interaction', {
+        type: 'b',
+        action: 'clkShellCatalog'
+      })
+    })
+  }
+  /**
+   * 发送 目录展现日志
+   * 点击小说阅读器页面内部的目录 发送tc交互日志
+   *
+   * @private
+   */
+  bindPageCatalogMessageEvent () {
+    event.delegate(document.documentElement, '.navigator .click-cursor', 'click', () => {
+      sendTCLog('interaction', {
+        type: 'b',
+        action: 'clkPageShowCatalog'
+      })
+    })
+  }
+  /**
+   * 发送 目录展现日志
+   * 点击小说阅读器shell的目录 发送tc交互日志
+   *
+   * @private
+   */
+  bindShellCatalogMessageEvent () {
+    event.delegate(document.documentElement, '.button-wrapper div:first-child', 'click', () => {
+      sendTCLog('interaction', {
+        type: 'b',
+        action: 'clkShellShowCatalog'
+      })
+    })
+  }
   /**
    * 目录消失
    *

components/mip-shell-xiaoshuo/feature/footer.js

@@ -4,6 +4,13 @@
  */
 
 import {settingHtml} from './setting'
+import {sendTCLog} from './../common/log'
+
+let DEFAULTS = {
+  theme: 'default',
+  fontSize: 3.5
+}
+
 // 整个底 bar 控制栏
 class footer {
   constructor (config) {
@@ -84,6 +91,17 @@ class footer {
     return footerHTML
   }
 
+  // 获取偏好设置config
+  _getConfig () {
+    let config = DEFAULTS
+    const CustomStorage = MIP.util.customStorage
+    const storage = new CustomStorage(0)
+    const extend = MIP.util.fn.extend
+    try {
+      config = extend(config, JSON.parse(storage.get('mip-shell-xiaoshuo-mode')))
+    } catch (e) {}
+    return config
+  }
   /**
    * 修改footer 【上一页】【下一页】链接, 增加跳转链接及是否可以跳转
    *
@@ -112,9 +130,21 @@ class footer {
       shellElement.toggleDOM(shellElement.$buttonMask, true)
     }
     // }, 400)
+    // 唤出菜单，发送tc日志打点
+    sendTCLog('interaction', {
+      type: 'b',
+      action: 'showShellFooter'
+    })
   }
   // 隐藏底bar
   hide () {
+    sendTCLog('interaction', {
+      type: 'b',
+      action: 'styleSetting'
+    }, {
+      theme: this._getConfig().theme,
+      fontSize: this._getConfig().fontSize
+    })
     this.$footerWrapper.classList.remove('show')
   }
   // 禁止冒泡，防止从控制栏触发外层小说页面滚动

components/mip-shell-xiaoshuo/mip-shell-xiaoshuo.js

@@ -15,7 +15,8 @@ import {
 
 import XiaoshuoEvents from './common/events'
 import Strategy from './ad/strategy'
-import {getJsonld, scrollBoundary} from './common/util'
+import {getJsonld, scrollBoundary, getCurrentWindow} from './common/util'
+import {sendWebbLog, sendTCLog} from './common/log' // 日志
 
 let xiaoshuoEvents = new XiaoshuoEvents()
 let strategy = new Strategy()
@@ -95,6 +96,8 @@ export default class MipShellXiaoshuo extends MIP.builtinComponents.MipShell {
         this.pageStyle.update(e)
       }
       document.body.classList.add('show-xiaoshuo-container')
+      // 加载动画完成，发送白屏日志
+      sendWebbLog('whitescreen')
       // 初始化页面结束后需要把「mip-shell-xiaoshuo-container」的内容页显示
       let xiaoshuoContainer = document.querySelector('.mip-shell-xiaoshuo-container')
       if (xiaoshuoContainer) {
@@ -124,6 +127,26 @@ export default class MipShellXiaoshuo extends MIP.builtinComponents.MipShell {
     }
   }
 
+  // 基类方法，翻页之后执行的方法
+  // 记录翻页的白屏
+  afterSwitchPage (options) {
+    // 用于记录页面加载完成的时间
+    const startRenderTime = xiaoshuoEvents.timer
+    const currentWindow = getCurrentWindow()
+    let endRenderTimer = null
+    currentWindow.onload = function () {
+      endRenderTimer = new Date()
+    }
+    // 页面加载完成，记录时间，超过5s发送白屏日志
+    setTimeout(function () {
+      if (!endRenderTimer || endRenderTimer - startRenderTime > 5000) {
+        sendWebbLog('stability', {
+          msg: 'whiteScreen'
+        })
+      }
+    }, 5000)
+  }
+
   // 基类root方法：绑定页面可被外界调用的事件。
   // 如从跳转后的iframe内部emitEvent, 调用根页面的shell bar弹出效果
   bindRootEvents () {
@@ -166,6 +189,7 @@ export default class MipShellXiaoshuo extends MIP.builtinComponents.MipShell {
 
   /**
    * 异步渲染所有内置对象，包括底部控制栏，侧边栏，字体调整按钮，背景颜色模式切换
+   *
    * @private asyncInitObject：小说内部私有方法，用于异步渲染逻辑
    */
   asyncInitObject () {
@@ -197,6 +221,7 @@ export default class MipShellXiaoshuo extends MIP.builtinComponents.MipShell {
    * 关闭所有元素，包括弹层、目录、设置栏
    * @private closeEverything：关闭所有元素，包括弹层、目录、设置栏
    */
+
   closeEverything (e) {
     // 关闭所有可能弹出的bar
     this.toggleDOM(this.$buttonWrapper, false)
@@ -221,6 +246,11 @@ export default class MipShellXiaoshuo extends MIP.builtinComponents.MipShell {
     // 当页面左上角返回按钮点击时，关闭所有的浮层
     this.jumpHandler = event.delegate(document.documentElement, '.mip-shell-header-wrapper a', 'click', function (e) {
       me.closeEverything()
+      // 发送tc日志
+      sendTCLog('interaction', {
+        type: 'b',
+        action: 'backButton'
+      })
     })
   }