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

bp_common_two

v0.3.9

Published

> 埋点通用方法 [适用于cli创建的webpack老版本]

Downloads

15

Readme

适用说明

埋点通用方法 [适用于cli创建的webpack老版本]

bp_common_two

私有库地址: npm私有库

插件使用方法

安装 bp_common_two

npm install bp_common_two
# NOTE: or
yarn add bp_common_two

全局引入

  • vue2
import buried from 'bp_common_two'
Vue.use(buried)
  • vue3
import buried from 'bp_common_two'
app.use(buried)

埋点参数标准

行为列表

参数统一建议

// FIXME: 建议
- 存储到vuex中的参数:
{
	client_version,action_type,user_type
}
- 当前页面变动参数
{
	user_id
}
- 需要单独设置的参数
{
	action_id,
}
- 封装方法导出的参数
{
	connection_id,current_view_id,event_id,arise_time
}
- 扩展参数
 {
	phone_num,product_name,product_id,source_platform,advertising
 }

参数进行assign即可,目前的常量参数没有进行封装,后面可以进行代码级的优化

优化建议

  • 常量参数封装
  • 方法参数统一
  • 指令和全局函数使用
  • 埋点添加标识

页面使用

  • vue2
// HACK: 埋点节点 根据实际业务进行更改
<input v-track="params"/>
<button @clicl="buried">click埋点节点</button>
export default {
	data(){
		return {
			//HACK: 参数请根据埋点参数标准进行配置 此处请根据实际业务进行参数配置
			action_id: 'params_action_id of yourself',
			action_type: 'click',
			extend:{
				sourcePlatform : "",
				advertising : ""
			}
		}
	},
	methods:{
		 methods: {
			buried() {
			this.$track(this.params);
		},
	}
}
  • vue3
// HACK: 埋点节点 根据实际业务进行更改
<input v-track="params"/>
<button @clicl="buried">click埋点节点</button>
import { getCurrentInstance ,reactive} from "vue";
const { appContext } = getCurrentInstance();
const globalProxy = appContext.config.globalProperties;
// HACK: 参数请根据埋点参数标准进行配置
const params = reactive({
				action_id: 'params_action_id of yourself',
				action_type: 'click',
				extend:{
					sourcePlatform : "",
					advertising : ""
				}
})
let buried = () => {
  globalProxy.$track(params);
};

环境变量

  • vue2
# NOTE:  vue2 执行配置
NODE_ENV = 'develpoment'
VUE_APP_RUN_MODE = dev
  • vue3
# NOTE:  vue3 执行配置
NODE_ENV = 'develpoment'
VITE_RUN_MODE = dev

暴露方法和指令

1、全局挂载指令 v-track="trackData" //主要用于曝光

2、暴露全局方法 $track(this.trackData); //主要用于点击

常见问题解决

问题一: vite3项目出现process is not defined
  • 解决方式: 打开vite.config.js
define: {
		'process.env': process.env
	}
问题二: vue项目中出现VUE_APP_RUN_MODE is not define
  • 解决方式:添加对应的env文件 并添加对应的VUE_APP_RUN_MODE配置参数
问题三:vite3创建的项目无法进行环境区分
  • 解决方式: 配置package.json
 "scripts": {
   "dev": "vite serve --mode development",
   "prod": "vite serve --mode production",
  },

特殊字段:user_type: "user_id", //默认是user_id 如果存在别的officialUserId 的时候 需要将officialUserId 传到extend里面

特殊说明

埋点函数地址为公司内部使用,仅限公司内部项目使用