Giter Club home page Giter Club 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

Watchers

James Cloos 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.