Git Product home page Git Product logo

stat.js's Introduction

stat.js

前端埋点通用方案,支持加载、点击、曝光统计,支持声明式、命令式。

使用方式

stat.js导出为umd模块。

脚本引入

通过script标签引入后,全局变量Stat即为模块。

<script src="//path/to/stat.js" charset="utf-8"></script>

模块引入

var Stat = require('path/to/stat.js');

HTML标签属性形式声明

支持三种行为统计:点击、曝光、加载,对应以下示例中stat-clickstat-viewstat-load属性。点击,指元素被click一次则发送一个请求。曝光,指元素进入可见范围时发送一个请求,可选择是否仅统计一次,可选择是否元素全部进入可见范围才算作曝光。加载,指元素在页面中加载时发送一个请求。

需要为统计对象定义编码,例如“首页feed流中的项”的统计编码为key1。统计编码在HTML标签中的属性名可自定义,以下示例中为stat-code

可以为统计对象通过HTML标签属性的方式指定统计请求所要携带的统计数据。统计数据在HTML标签中的属性名可自定义,以下示例中为stat-data。如果使用stat-data定义统计数据,则属性值最好是JSON字符串。也可以通过stat-data-paramname="paramvalue"的方式定义统计数据,如以下示例中的stat-data-name

<a stat-click stat-code="key1" stat-data='{"name":"a1"}' href="javascript:void(0);">click this</a>
<div stat-view stat-code="key2" stat-data='{"name":"div1"}'>view this</div>
<div stat-view stat-code="key2" stat-data-name="div2" style="position:absolute;top:2000px;left:0px;">view this</div>
<div stat-view stat-code="key4" stat-data-name="div3" stat-view-once="false" style="position:absolute;top:2100px;left:0px;">view this</div>
<a stat-click stat-view stat-load stat-code="key3" stat-data-name="a2" href="javascript:void(0);">click or view this</a>

JavaScript API调用

config

配置。

Stat.config({
    defaultDataAttr: 'stat-data', // 统计数据的HTML标签属性名
    defaultCodeAttr: 'stat-code', // 统计编码的HTML标签属性名

    'key1': {
        data: function (node) { // 通过函数定义编码为key1的统计对象需要携带的数据
            return {
                url: node.getAttribute('href')
            };
        }
    },
    'key2': {
        view: { // 设置编码为key2的统计对象的曝光统计
            once: true, // 是否仅统计一次,默认为是
            whole: false // 是否元素全部进入可见范围才算作曝光,默认为否
        }
    },

    sendBy: { // 设置统计请求的发送方式,默认为图片请求
        type: 'image',
        url: function () {
            return '//some-domain.com/some-path';
        }
    }
});

bind

绑定。

Stat.bind($target, 'click', {
    code: 'key1',
    data: (function (el) {
        return {
            url: el.href,
            text: el.innerText
        };
    })($target)
});

check

检查绑定状态。

var bindingStatus = Stat.check($target);
bindingStatus.click && console.log('Target element has bound click-type stat.');

unbind

解绑。

Stat.unbind($target, 'click');

send

发送统计请求。

Stat.send('view', $target);
Stat.send('view', {
    code: 'key1',
    data: {
        name: 'a1'
    }
});

forceAllViewStat

强制检查所有需要曝光统计的元素,一般用于动态改变html元素的情况。

Stat.forceAllViewStat();

可能发生的问题

如果在埋点统计的绑定事件执行之前,元素已绑定了事件并在事件处理时阻止了默认行为(e.preventDefault()),那么绑定的统计事件可能不会被触发。这时请考虑取消对默认行为的阻止,酌情变通。

Build

stat.js依赖jQuery或Zepto,但可以选择是否将jQuery或Zepto打包进代码中。

npm run build               # 默认包含jQuery
npm run build:jquery-in     # 包含jQuery
npm run build:jquery-out    # 不包含jQuery
npm run build:zepto-in      # 包含Zepto
npm run build:zepto-out     # 不包含Zepto

TODO

  • 区域停留时间

License

MIT

Copyright © 2017-present, shenfe

stat.js's People

Contributors

shenfe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

stat.js's Issues

sendAllLoadStat,loadScript,loadImage

sendAllLoadStat方法,在严格模式下,声明函数内不能再使用声明函数,可以改成表达式var sendAllLoadStat = function () {}

loadScript和loadImage,每次send都会创建一个元素,特别是script元素会越来越多。建议提取出来创建。

比如
var stat_script_el = document.createElement('script');
(document.getElementsByTagName('head')[0] || document.body).appendChild(stat_script_el);
function loadScript(url, callback) {}

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.