H-analytics NPM

@hhorg/analytics

A front-end monitoring and business analytics library designed for Huihao H5 projects. This package provides robust monitoring and business event tracking capabilities to ensure smooth operation and insightful analytics.

Installation

You can install the package using npm, yarn, or pnpm:

# Using npm
npm install @hhorg/analytics

# Using yarn
yarn add @hhorg/analytics

# Using pnpm
pnpm add @hhorg/analytics

Configuration

This package supports auto-importing APIs with the help of unplugin-auto-import. Follow the steps below to configure the library in your Vue3 project:

Install unplugin-auto-import:

npm install unplugin-auto-import --save-dev

Configure the resolver in your vite.config.ts file:

import autoImport from 'unplugin-auto-import/vite';
import { VueResolver } from '@hhorg/analytics/resolver';

export default {
  plugins: [
    autoImport({
      resolvers: [VueResolver.load()],
    }),
  ],
};

After setup, you can directly use the package APIs in your business logic without explicitly importing them.

API Usage

Initialization

Initialize the monitoring system with your Vue application instance and a configuration object. The dsn is generated in the Sentry management dashboard by creating a new project.

import { moniter, sensors } from '@hhorg/analytics/vue';

moniter.init(app, {
  // The URL of the data to be reported
  dsn: '',
  // List of allowed buried event names, leaving this option unset will allow all events
  allowEventList: []
});

// Upload user information here
moniter.login({
  username: 'dataTracker',
  email: 'dataTracker@vv.com',
  // ...other user information
});

sensors.init(app, {
  // The URL of the project monitoring report
  dsn: ''
})

// Upload user information here
sensors.login({
  username: 'errorReport',
  email: 'errorReport@vv.com',
  // ...other user information
});

// Enable automatic phone page_view
sensors.autoTrack(router)

Manual Event Reporting

You can use manual track on any VUE page, you don't need to import the package, VITE will import it automatically

And manually track specific events by providing a type and associated data:

// Type definition
declare const track: (type: string, data: Record<string, any>) => void;

// Example usage
sensors.track('EventName', {
  key1: 'value1',
  key2: 'value2',
  // ...other event attributes
});

// view_material
sensors.track('view_material', {
  user_id: 'xxx',
  card_id: 'xxx'
  // ...other event attributes
});