埋点上报技术实现方案分析

本文分析了几种常见埋点工具的使用场景、采集方式、逻辑等。一、使用场景埋点主要是用于流量分析，包含页面浏览数（PVX独立访问者数量（UVX页面停留时间、页面操作时间、页面访问次数、按钮点击次数、文件下载次数等。根据页面埋点得到的一些信息，分析用户对网站的反应，帮助提高网站流量，改进网站性能。代码埋点的优点是使用者可以比较方便地设置自定义属性、自定义事件，传递比较丰富的数据到服务端。手动代码埋点主要用在两种场景：非用户直接触发的事件，需要上报更多具体属性的事件。非用户直接出发的事件，比如用户注册成功，可以上报到后台；需要上报更多信息的事件，比如用户购买商品，不仅仅需要点击"购买"按钮这个操作信息，还需要知道商品数量、单价、总金额等信息，只能使用前端代码埋点。二采集方式访问时长：在页面加载运行js时记录当前时间，在页面要unload触发beforeunload事件时进行时间差计算得到访问时长；聚焦时间：由于页面在通过tab进行切换时，页面虽然没有unload，但实际是处于失去焦点的状态，所以也需要统计。可以利用focusIn和focusOut两个事件，在focusIn时开始计时，在focusOut时停止计时，在页面unload时将focus的时间进行累加得到聚焦时间；PV：传统意义上每次页面刷新代表着一次新的pv,也就是每次统计js执行时都+1,而现在页面很多都用到了ajax技术来进行无刷新获取展现页面来替代翻页如瀑布流页面通过下来加载新的页面这时候页面不重新刷新，因此可以在ajax请求接口处进行埋点进行pv累加；事件：以click事件为例，类似于绑定事件的过程，在click响应函数中获取元素的对象三、埋点与上报过程（Mixpanel）1、准备工作：埋点之前，需要在页面嵌入SDK，异步加载，然后调用SDK的初始化接口init方法，完成初始化操作。初始化时的参数可以包括如下：a）后台注册的token或者ID号；b）SDK的配置，如果不传，SDK内部也有默认配置：

varDEF.AJLT_CDNFIG=<'api_hc2t':'://api,'}1app_host1:'://r/'autotrack':true,lcdn,:1/cdn.ixpml.cdm1='cr-05^_subdcTiaLr_c3ok:ie':truej'pe-rsiste-nce1:1cookier,'per5i5tencE_name':1■1；Q3kie_nani-£1:11'loaded';functionf)f)j1store-g&ogle1itrue,'5ave_referrer':true,Eh1:'verbose':falsej1img1:Falser,,■zrack_pageview':true,'debug*:falsej.'■zrack_liik5_tiiieDLT':成」'cookexpiration'::365j'jpgrade':'disable^persistence1:falsej'disable_：3'Dkie':falstj1secure—cootkie1:falser'ip':true,1optMout_tr-acklng—by_de-Fault1:falsej'cpt_outcking_persis7=nce_type':'IC«lST3-'Bge',1opt^out^tr-acking—cookie_prefixBsnullj'pr-opErt/_blaclclL5t':口，{}{header:valuefheader2:value}c）SDK创建的实例的名字2、代码埋点，发送请求：1）对于页面pageview，在页面load时track；对于其他事件，在网页中埋点，mixpanel.track（事件名，属性，回调函数）来发送事件；离开页面在onbeforeunload中实现2）对于跳转链接和表单提交的发送，浏览器开始加载下一个页面停止执行），，可能track命令还没有执行，此时需要延时执行：如mixpanel，利用mixpanel.track_links（元素选择器，事件名，属性，回调函数），mixpanel.track_forms（元素选择器，事件名，属性，回调函麴，等待300ms执行回调，转到新的页面<scripttype="text/javascript">mixpanel.track_links（"#nava”,"clicknavlink",{"referrer":document.referrer}）;</script>首先从当前页面中寻找符合元素选择器的所有元素组成的数组对于每个符合要求的元素，添加监听器代码埋点封装成track(eventName，properties)接口。先获取公共参数，和用户传入的properties一起encode，再发送请求；encode方式：JSONEncode和base64Encode；四、其他产品埋点方案1、友盟dplus.track(event_name,properties,callback,timeout)参数：event_name:必选，自定义事件名称；properties:可选，随该事件一起发送的事件属性。每个属性包括属性名和属性值；一个事件可以包含多个不同的属性，写为JSON"键-值"对格式；callback:可选，事件发送后的回调函数；timeout:可选，发送事件后，等到服务器响应的最大时间；如果在该时间内收到服务器的响应，则立即执行callback回调函数；如果超过timeout时间仍无响应，则继续执行callback回调函数。dplus.track_links(query,event_name,properties,timeout);dplus.track_forms(query,event_name,properties,timeout);query:必选，DOM节点的查询query2、growingiogio('track',eventId,number,eventLevelVariables);发送事件，在添加所需要发送的事件代码之前，需要在打点管理用户界面配置事件以及事件级变量。参数名称参数类型I必须说明eventldString是事件标识符numberNumbsr否事件的数值，没有number参数时，事件默认加1;当出现number#数时,写件与增number®数值_eventLevel\ZariablesJSONObject否包含事件级变量的JSON对象r暨事件发生时所伴随的维度信息C."自定义事件"在Growing!O分析后台体现为一个"指标"，而"事件级变量"为"维度"。首先配置事件级变量，包括：1)变量名称==>GrowinglO后台维度名称变量描述==>可选，仅作备注使用变量标识符==>此变量在代码中的标识，可以为英文、下划线和数字，大小写敏感类型==>可以是字符串或数值(注意：只有在您希望对此事件级变量进行运算时，才需选择数值类型。其他情况建议您优先选择字符串类型。因为一旦选择数值类型，此变量便会作为一个运算项，而无法再图表中展示)然后配置自定义事件；名称==>GrowinglO后台指标名称描述==>可选，仅作备注使用标识符==>此事件在代码中的标识，可以为英文、下划线和数字，大小写敏感事件级变量==>此事件下属的事件级变量类型==>计数器(递增1)或数值(递增任意值)。当您的事件是计“次数”时，请选用“计数器”类型；当您的事件是计“金额”、"数量/个数”等任意累加值时，请选用“数值”类型。例如“订单金额”这个自定义事件，就需要选用“数值”类型。3、神策数据如果想记录用户在页面上点击了哪些按钮，可以先给这些按钮定义一些标志同时标记这个按钮的属性。<buttonclass="sensors-btn"sensors-name="点击邮箱”〉邮箱</button><aclass="sensors-btn"sensors-name="点击登录”〉登录</a>$('.sensors-btn').click(function(){sa.track('btn_click',{name:$(this).attr('sensors-name')})})4、GoogleAnalyticsgtag('event',<action>,{'event_category':<category>,'event_label':<label>,'value':<value>，'non_interaction':true});<action>是在GoogleAnalytics(分析)事件报告中显示为事件操作的字符串。<category>可选，是显示为事件类别的字符串。<label>可选，是显示为事件标签的字符串。<value>可选，是一个显示为事件价值的非负整数。non_interaction：为true表示是非互动事件默认的GoogleAnalytic事件：(对于未在此表中列出的事件名称(例如用户创建的任意事件名称),默认类别为"engagement"，默认标签为"notset")

F醇称add_paynent_inrcecoinmerceadd_tc_cartecomerceadd_to_wishlistecomercebegin.checkoiitecomerce{:gressecomercegen&rate_LeadengagementLoginer^aaernenTm&ch&dpurchaseecomercerefundecomerceremove_froni.cartecomercesearchengagementsearcli_termsel&ct_contentengagementcontent_typeset_Gheckout_optionecomiierceshareenga画entmethod§igni_Lmotionengagementview.search_resuItsengagementsearch.tern针对跳转新新页面的事件，拦截该事件以阻止加载下一个页面，将事件发送给GA。发送事件后，再提交表单。varform=document.getElementByld(signup-form');form.addEventListener('submit',function(event){event.preventDefault();setTimeout(submitForm,1000);varformSubmitted=false;functionsubmitForm(){if(!formSubmitted){formSubmitted=true;form.submit();}}gtag('event','signup_form_complete',{'event_callback':function(){submitForm();}});})

五、传输机制发送请求的实现，主要用的是XMLHttpRequest，如果浏览器不支持XMLHttpRequest，那么可以动态添加img/script标签的方式。GA采用第三种方式：'beacon'（使用navigator.sendBeacon方法）前两种方法如果遇到网页卸载的情况，匹配无法发送。navigator.sendBeacon方法通过将匹配异步传输到网络服务器来解决此问题，而无需设置匹配回调。gtag（'config','GA_TRACKING_ID',{'transport_type':'beacon'}）;何时上报？1、进行数据映射（简化数据，不传和具体参数值，而是根据map-key映射关系），如应用端发送（0/0、1）数据，由服务端将根据约定文档映射为（首页/模块一、第二个点击事件）；2、数据压缩之后上报；3、非即时发送数据，将多条数据压缩打包，等待网络状况良好、或定时（5min）发送至服务端；七、埋点上报的通用数据信息1、无限局域网地址（MAC地址）：定义网卡地址，又称为物理地址、硬件地址，具有全球唯一性，用于定义网络设备的位置。2、手机设备号（IMEI）:移动设备国际识别码，是手机的唯一标识码。用于区分终端唯一性，对于用户去重有一定意义；与MAC地址协同使用。3、终端系统/系统版本号：获取终端系统以及版本号，在查询某些版本上出现特定bug，具有一定辅助意义；4、应用版本号：有利于版本迭代控制，作为数据的标记；5、网络状态：获取当前网络为3G/4G/wifi等，可针对用户人群所处的网络环境，针对性开发流量节省模式，或线下活动的wifi支持等；应用终端可做到网络状态更迭及时上报；6、GPS地址：通过应用端获得GPS地址授权获得，用于分析不同地域人群的使用习惯，有利于绘制用户人群画像；7、用户ID:终端用户的唯一身份标识；8、触发时间：应用/事件触发时间，根据时间维度来分析某页面/事件等数据信息；八,csss点现在还有一种方案是CSS埋点，适用于比较简单的埋点，如下例：html:<aclass="linktitle">访问</a>CSS:.link:active::after{margin:100px100px;color:red;content:url("00:8888/HotelsServer/view/count.php?action=visit");}一count.php:$actionName=$_REQUEST["action"];〃时间格式化$time=time();$time=Date("Y-m-d",$time);echo”访问动作->”.$actionName."访问时间->”.$time;NarnexHeattesthtml?_hbt=151624D&15601登记须知_court,php?acticn=^i5it本次登记仅限于中国地区』完成登记审核通过后.生育登记服务卡可到多(镇、街道)直接领取.也可选夕择邮寄到付快递给申请人./申请登记信息需真实完整.申谓人将承担相应的法律弓访问/2requests13.4KBtransfemsdIFinish:3.30s■-ConsoleRemotedevicesSearchWhat'sNew0top■FiltsrundefinedC①192.168JJ00：8888/Hotels_Server/view/count.php?action=visit访问动作->visit访问时间->2018-01-18九、全埋点autoTrack方案，只需要在初始化SDK时，传入一个参数即可。神策JS设置autotrack后，SDK就是自动追踪页面上的按钮（a、button、input）的点击情况；mixpanel设置后，SDK会检测页面上的所有form表单、input标签、select和textarea标签产生的submit、change、click时间，并采集这些标签上的属性一起上报。1、SDK初始化时，通过register_event设置需要监听submit、change、click三类事件。在register_event中，优先采用addEventListener的方式，如果浏览器不支持会尝试使用onXXX的方式。监听到事件后，进行上报。首先找到这个事件的target，然后判断是不是autotrack要检测的事件1Xhtml根节点下面的事件不需要检测2X查看标签名字如果是html则不监听；如果是form标签下的submit事件，或者是input->button、input->submit标签的change、click事件，或者是select、textarea标签下的change、click事件，可以监听如果是其他标签，监听click事件export-Function5hauIdTracIcDomEvent(e1jevent}{d-F(JelIisTag(elj1Ihtml1}|1islEl-ementNode(el)){returnfals-ej;vartag=e1.tagName.toLowerCase()jswitch(Tag)f匚ase'ntml':■"eturnfalse;case'form':■^eturnewent,type==='submitcase'input':if(；'buttorF'submit'；.indexDf(=1.getAttribute('type'))==-1)<returnevent.Type==='zhange';}else{returnev