Giter VIP home page Giter VIP logo

mars_h5's Introduction

mars_h5

# 无痕埋点h5的简单demo的使用-v1

## 步骤 1

页面上先引入jquery的类库

## 步骤 2

工程项目上再引入mars_h5.js 或者调用的时候接入类库的cdn地址既可:http://you-cdn-url.com/html/js/mars_h5.js?t=1521186655083


## 步骤 3

在html的闭合标签下面,接入下面的js代码即可:


```javascript
  var hxs_config_maq = hxs_config_maq || [];  

  hxs_config_maq.push([ 'page_mars_sign_'+( (new Date()).getTime() ), 'JsonString-uuid' ]);
  
  (function () {  
    var ma = document.createElement('script');  
    ma.type = 'text/javascript';  
    ma.id = "hxs_config_maq"
    ma.async = true;  
    ma.src = "/html/js/mars_h5.js?"+( (new Date()).getTime() );  
    var s = document.getElementsByTagName('script')[0];  
    s.parentNode.insertBefore(ma, s);  
  })(); 
```

## 步骤 4

* 如果接入的系统是前端开发js类库是SPA框架的话,注意在页面路由离开的时候
    *  删除window对象的hxs_config_maq
    *  删除mars_h5.js文件的dmo上id=hxs_config_maq


* hxs_config_maq 是配置当前页面的初始化埋点数据的自定义变量字段


##有问题反馈
在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流

h5无痕埋点原理

h5无痕埋点原理是:在Dom页面(文档对象模型) 已经加载完毕之后,利用js动态构造img标签,指定src 为访问统计服务器的地址,带上业务组装构造的参数, img  标签向统计程序发出请求,实现统计的原理。

(1)对于页面型的埋点:
在页面加载完毕的时候,且利用js动态构造img标签,来发送一次通用或个性化定制的数据,发送请求到统计服务器端。

(2)对于事件型的埋点:
在页面加载完毕的时候,利用jquery库,全局动态绑定约定的html标签,目前只是开发了a和button的标签的自动绑定绑定的处理,对于其他标签如果配置了mars_sign自定义属性键值,埋点程序也识别出来,且利用js动态构造img标签,来发送定制的数据请求到统计服务器端,实现数据统计。

H5端实现埋点的方案:

(1)优先兼容app 好享瘦的埋点业务

(2)支持页面进入之后的,页面个性定制字段的埋点处理

(3)支持处理业务上任何a标签和button的标签默认埋点的处理

(4)支持任何标签上含有属性 mars_sign 标签 默认埋点的处理

(5)内嵌到业务代码里JsApi函数  Mar.Request.diySeed(埋点字段对象) 调用的埋点

mars_h5's People

Contributors

wwb568109135 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.