spm-fe
TypeScript icon, indicating that this package has built-in type declarations

0.0.8-alpha.0 • Public • Published

Spm

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Spm from '../src/index';

new Spm({
  appType: 'aiSearch',
  onEventListener: (data, type) => {
    console.log(type, data)
  }
})

const Home = () => {
  return (
    <div data-spm-page="test-page-home" page-spm-url="/">
      <div data-spm-pagesize="10" page-spm-url2="12334453545" data-spm-pageno="1" data-spm-query="撒个娇">
        <div data-spm-module="test-module" data-spm-index="2">
          Home
          <Link data-spm-event="test-event-/readme" to='/readme'>切换路由</Link>
        </div>
      </div>
    </div>
  )
}

const Readme = () => {
  return (
    <div data-spm-page="test-page-readme" page-spm-url="/readme">
      <div data-spm-pagesize="10" page-spm-url2="12334453545" data-spm-pageno="1" data-spm-query="撒个娇">
        <div data-spm-module="test-module" data-spm-index="2">
          Readme
          <Link data-spm-event="test-event-/" to='/'>切换路由</Link>
        </div>
      </div>
    </div>
  )
}
const App = () => {
  return (
    <Router>
      <Switch>
        <Route key="readme" path="/readme" exact component={Readme} />
        <Route key="home" path="/" component={Home} />
      </Switch>
    </Router>
  );
};

render(
  <App />,
  document.getElementById('Test'),
);

API

参数 类型 说明 必填 默认值
appType string 应用名称 -
pageSpmName string 页面埋点命名 'data-spm-page'
moduleSpmName string 模块埋点命名 'data-spm-module'
eventSpmName string 事件埋点命名 'data-spm-event'
pageSessionName string 页面埋点在缓存中的名称 'spmPage'
moduleSessionName string 模块埋点在缓存中的名称 'spmModule'
eventSessionName string 事件埋点在缓存中的名称 'spmEvent'
fromApp string url传参三方应用名称的key 'from_app'
fromAppFix boolean fromApp是否常驻 false
headerSpm string header埋点参数命名,a.b.c.d 'log-spm'
onEventListener Function(data: 埋点数据, type: (Listener Types)) => void 事件监听触发 -
listenerEvents string[] 页面中需要监听的事件 ['click', 'keyup']
isHash boolean 是否hash路由 false
onLoadTimeMax number 页面onLoad时间上限,超过上限获取页面加载时埋点会失败,单位:毫秒 5000
onError Function(errMsg: string, type: (Listener Types)) => void 监听触发失败回调 -

Listener Types

类型名称 说明
pageLoad 页面刷新或切换
event:${eventName}(如: event:click) 触发埋点事件
initiative 主动探针触发

Package Sidebar

Install

npm i spm-fe

Weekly Downloads

4

Version

0.0.8-alpha.0

License

MIT

Unpacked Size

43.7 kB

Total Files

10

Last publish

Collaborators

  • zhoushaojun