From 3fbd354ef418227f2af1fdfbffbffa92ff3d1cf7 Mon Sep 17 00:00:00 2001 From: jenkey2011 Date: Fri, 7 Dec 2018 17:35:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0tc=E7=BB=9F=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-story/mip-story-log.js | 95 ++++++++++++++++++++++++++++++ src/mip-story/mip-story-service.js | 52 +++++++++++++--- src/mip-story/mip-story-slider.js | 45 ++++++++++---- src/mip-story/mip-story.js | 12 ++++ 4 files changed, 185 insertions(+), 19 deletions(-) create mode 100644 src/mip-story/mip-story-log.js diff --git a/src/mip-story/mip-story-log.js b/src/mip-story/mip-story-log.js new file mode 100644 index 000000000..ffc2bd746 --- /dev/null +++ b/src/mip-story/mip-story-log.js @@ -0,0 +1,95 @@ +/** + * @file mip-story-log.js + * @desc 小故事日志 + * @author + */ + +define(function (require) { + var util = require('util'); + var viewer = require('viewer'); + + // 前缀 + var prefix = 'MIP-SOTRY-LOG-TC'; + var baseData = {}; + + // 事件描述 包括事件名、描述，index纯粹为了可读性 + var evtDesc = [ + { + index: 0, + evtName: 'CLOSE_STORY', + desc: '关闭' + }, + { + index: 1, + evtName: 'CLOSE_AUDIO', + desc: '关闭音频' + }, + { + index: 2, + evtName: 'REPLAY_STORY', + desc: '重播' + }, + { + index: 3, + evtName: 'LINKTO_RECOMMEND', + desc: '点击推荐链接' + }, + { + index: 4, + evtName: 'LINKTO_RECOMMEND_FROM', + desc: '点击推荐来源' + }, + { + index: 5, + evtName: 'SHARE_STORY', + desc: '点击分享' + }, + { + index: 6, + evtName: 'RECOMMEND_SHOW', + desc: '推荐链接展现量' + }, + { + index: 7, + evtName: 'VIEWED_PAGE_END', + desc: '浏览至尾页' + }, + { + index: 8, + evtName: 'VIEWED_PAGE', + desc: '浏览页面' + } + ]; + + /** + * 日志发送 + * + * @param {number} evtIndex 统计项目 + * @param {Object} data 需要发送的数据 + * @example TcLog('close', {}) 点击关闭时发送日志 + */ + function TcLog (evtIndex, data) { + if(evtIndex !== 0 && !evtIndex) return; + + var curEvt = evtDesc[evtIndex]; + + var data = data || {}; + var tcData = util.fn.extend(data, baseData, { + desc: curEvt.desc + }); + var evt = prefix + curEvt.evtName; + + viewer.sendMessage(evt, tcData); + } + + /** + * 获取基本数据 + * + */ + TcLog.prototype.initBaseData = function (data) { + baseData = data || {}; + } + + return TcLog; +}); + diff --git a/src/mip-story/mip-story-service.js b/src/mip-story/mip-story-service.js index 89ca36ab8..56e79e982 100644 --- a/src/mip-story/mip-story-service.js +++ b/src/mip-story/mip-story-service.js @@ -10,6 +10,7 @@ define(function (require) { var storyViews = []; var emitter; var viewport = require('viewport'); + var tcLog = require('./mip-story-log'); var CURRENT = 'current'; var ACTIVE = 'active'; var STYLE = 'style'; @@ -267,28 +268,59 @@ define(function (require) { var target = e.target; var eleParent = findParent(target, 'a'); e.preventDefault(); + + var recTitle = eleParent.querySelector('p').innerHTML; + var recUrl = eleParent.getAttribute('href'); + var recImg = eleParent.querySelector('img').getAttribute('src'); + var fromUrl = eleParent.querySelector('.item-from').getAttribute('data-src'); + var formTile = eleParent.querySelector('.item-from').innerHTML; + + // tclog 推荐链接基本数据 包括推荐链接、标题、图片，推荐来源链接、来源标题 + // 这里 undefined 是字符串没错…… + var recData = {}; + recData.title = recTitle === 'undefined' ? "NOT_SET_REC_TITLE" : recTitle; + recData.url = recUrl === 'undefined' ? "NOT_SET_REC_URL" : recUrl; + recData.img = recImg === 'undefined' ? "NOT_SET_REC_IMG" : recImg; + recData.fromUrl = fromUrl === 'undefined' ? "NOT_SET_FROM_URL" : fromUrl; + recData.fromTilte = formTile === 'undefined' ? "NOT_SET_FROM_TITLE" : formTile; + // 推荐链接 - if (target.nodeName.toLocaleLowerCase() !== 'span') { - var href = eleParent.getAttribute('href'); - window.top.location.href = href; + if (target.nodeName.toLocaleLowerCase() !== 'span' && recData.url !== 'NOT_SET_REC_URL') { + // tclog 推荐链接 + tcLog(3, recData); + + window.top.location.href = recUrl; return; + } else { + console.warn('没有设置推荐链接！！') } + // 来源链接 - var src = target.getAttribute('data-src'); - if (!src) { + if (recData.url !== 'NOT_SET_FROM_URL') { + // tclog 推荐来源 + tcLog(4, recData); + + window.top.location.href = fromUrl; return; + } else { + console.warn('没有设置来源链接！！') } - window.top.location.href = src; } // 返回上一页 if (this.hasClass(e, back)) { - history.back(); + // tclog 关闭小故事 + tcLog(0, {}); + + // history.back(); return; } // 静音控制 if (e.target === audio) { + // tclog 关闭音频播放 + tcLog(1, {}); + var enabled = audio.hasAttribute('muted'); enabled ? this.emitter.trigger(UNMUTE, e) : this.emitter.trigger(MUTE, e); @@ -296,6 +328,9 @@ define(function (require) { } // 重头开始播放 if (dm.contains(replay, e.target)) { + // tclog 重新播放 + tcLog(2, {}); + this.emitter.trigger(REPLAY); this.progress.updateProgress(0, 1); return; @@ -304,6 +339,9 @@ define(function (require) { else if (dm.contains(backend, e.target)) { // 弹出分享 if (dm.contains(shareBtn, e.target)) { + // tclog 点击分享 + tcLog(5, {}); + this.share.showShareLayer(); } // 关闭结尾页-只有点击交互的时候触发 diff --git a/src/mip-story/mip-story-slider.js b/src/mip-story/mip-story-slider.js index 5db2d5265..404b27221 100644 --- a/src/mip-story/mip-story-slider.js +++ b/src/mip-story/mip-story-slider.js @@ -16,6 +16,7 @@ define(function (require) { var CURRENT = constConfig.PAGE_STATE.current; var ACTIVE = constConfig.PAGE_STATE.active; var storyState = require('./mip-story-state'); + var tcLog = require('./mip-story-log'); var STYLE = 'style'; var screenWidth = viewport.getWidth(); var screenHeight = viewport.getHeight(); @@ -36,13 +37,13 @@ define(function (require) { var recommend; // 翻页埋点 - var pageViewed = [0]; + var pageViewed = []; var isPageOneViewed = false; var pageViewedData = { 'category': '_trackEvent', 'action': '翻页进度', 'optLabel': '滑动', - 'optValue': '翻了1页' + 'optValue': '看了第1页' }; // 分享页展示次数 这里以后可能会改成推荐小故事的展示量 @@ -165,8 +166,19 @@ define(function (require) { this.currentIndex = pageState[1]; this.nextIndex = pageState[2]; + // 进入页面 自动发送当前页信息 + if(!isPageOneViewed) return; + pageViewed = [this.currentIndex]; + var pageViewedInfo = '看了第' + (parseInt(this.currentIndex, 10) + 1) + '页'; + pageViewedData.optValue = pageViewedInfo; + this.trackEvent(pageViewedData); + + // tclog 看了第几页 + tcLog(8, {viewingPage: this.currentIndex + 1}); + isPageOneViewed = true; + this.touchstartX = this.touchendX = 0; - this.moveFlag = false; + this.moveFlag = true; } function enableScroll(ele) { @@ -574,7 +586,7 @@ define(function (require) { var currentPage = storyContain[i]; if (i === this.currentIndex) { // 埋点 - if (window._hmt && pageViewed.indexOf(i) === -1) { + if (pageViewed.indexOf(i) === -1) { var pageRole = currentPage.getAttribute('page-role'); this.triggerStats(i, pageRole); } @@ -640,21 +652,29 @@ define(function (require) { // 分享页单独统计 if (role === PAGE_ROLE.sharePage && !isSharePageViewed) { isSharePageViewed = true; - return this.trackEvent(sharePagedData); - } - // 这里主要是 保证第一页发送的时机 - if (!isPageOneViewed) { - isPageOneViewed = true; - this.trackEvent(pageViewedData); + // tclog 看了尾页 + tcLog(7, {}); + + // tclog 推荐展现量，现按：到了分享页，认为所有的推荐链接都展现了 + var count = storyContain[storyContain.length - 1].querySelectorAll('.recommend-item').length - 1; + tcLog(6, {count: count}); + + return this.trackEvent(sharePagedData); } // 分享页不计入翻页 if (role === PAGE_ROLE.sharePage) { return; } + pageViewed.push(pageIndex); - var pageViewedInfo = '翻了' + (+pageViewed[pageIndex] + 1) + '页'; + var viewingPage = +pageViewed[pageViewed.length - 1] + 1; + + // tclog 看了第几页 + tcLog(8, {viewingPage: viewingPage}); + + var pageViewedInfo = '看了第' + viewingPage + '页'; pageViewedData.optValue = pageViewedInfo; this.trackEvent(pageViewedData); } @@ -675,9 +695,10 @@ define(function (require) { * @param {Object} obj 统计事件对象 */ MIPStorySlider.prototype.trackEvent = function (obj) { + // console.log(obj.optValue) var label = obj.optLabel || ''; var value = obj.optValue || ''; - window._hmt.push([obj.category, obj.action, label, value]); + window._hmt && window._hmt.push([obj.category, obj.action, label, value]); } MIPStorySlider.prototype.clearStyle = function () { diff --git a/src/mip-story/mip-story.js b/src/mip-story/mip-story.js index 5423df8be..3d7d0511f 100644 --- a/src/mip-story/mip-story.js +++ b/src/mip-story/mip-story.js @@ -9,6 +9,7 @@ define(function (require) { var customElement = require('customElement').create(); require('./mip-story-view'); require('./mip-story-layer'); + var TcLog = require('./mip-story-log'); var constConfig = require('./mip-story-config'); var MIP_I_STORY_STANDALONE = constConfig.MIP_I_STORY_STANDALONE; var Audio = require('./audio'); @@ -78,6 +79,15 @@ define(function (require) { this.storyViews = this.element.querySelectorAll('mip-story-view'); }; + MIPStory.prototype.initBaseTcData = function () { + var data = {}; + data.pageLen = this.storyViews.length; + data.originUrl = util.getOriginalUrl(window.location.href).split('?')[0].split('#')[0]; + data.reffer = encodeURIComponent(window.document.referrer); + var tcLog = new TcLog() + tcLog.initBaseData(data); + } + MIPStory.prototype.initStoryContain = function () { this.bookEndContainer = document.querySelector('.mip-backend'); for (var index = 0; index < this.storyViews.length; index++) { @@ -193,6 +203,8 @@ define(function (require) { this.initBookend(mipStoryConfigData); // 保存 story-views到storyViews中便于后期操作 this.initStoryViews(); + // 初始化打点基本数据 + this.initBaseTcData(); // 保存包括封底页面在内的所有结果页 this.initStoryContain(); // 初始化引导页