npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aigen-log

v1.1.5

Published

## 统计的模式 主要分为`精确统计`和`泛统计`,下面分别介绍。

Downloads

15

Readme

static-log

统计的模式

主要分为精确统计泛统计,下面分别介绍。

精确统计

针对具体的dom元素精确埋点统计,可以记录时长,以及附带自定义信息;

  • 点击打点(type: click): 在click事件发生时打点记录
  • mouseenter开始,到mouseleave离开(type: enter-leave):记录这段时间长度,并在mouseleave事件发生时发送到后端入库;
  • focus当前元素开始,blur当前元素离开(type: focus-blur): 记录这段时间长度,并在blur离开时发送到后端入库;
  • (未实现,暂时没有场景需求)点击开始,到mouseleave离开(type: click-leave):记录这段时间长度,并在mouseleave事件发生时发送到后端入库;

其中type值就是埋点时的data-log-type值;

除此之外还有自定义的精确统计项,后续会介绍。

如何使用

只需要在元素上进行埋点就行了,格式如下:

<div data-log-type="click" 
    data-log-info={"app": "",category":"control","position":1,"content":{"function":"click","value":"click"}}>

注意不要阻止事件冒泡,因为监听都统一代理在document上;

自定义的精确统计项

对于一些非常个性化的统计逻辑,可以自己记录数据,然后在document上触发custom-log事件来记录, event.detail包含所要记录到数据的内容,格式和上面埋点的data-log-info属性的内容一样(一个JS对象);

请求接口

地址

测试:https://alpha-metrics.aidigger.com/api/v1/tracking
生产:https://metrics.aidigger.com/api/v1/tracking

参数

  • app
  • url
  • category
  • position
  • action
  • content: {function: '', value: ''}

泛统计

统计所有元素上的click,focus/blur,enter/leave事件

如何使用

需要传递额外自定义数据的话,在body标签中埋点:

<body data-log-info={"key": "value"}>
</body>

请求接口

地址

参数

  • url
  • position
  • action
  • content: '{"key": "value"}'

备注

focus/blur 是通过 focusin/focusout 来实现的; enter/leave 是通过 mouseover/mouseout 来实现的;