@scaleway/use-segment
v1.1.5
Published
A small hook to handle segment
Downloads
8,393
Readme
@scaleway/use-segment
A tiny hooks to handle segment events
Install
$ pnpm add @scaleway/use-segment
Usage
Event directory
Create an events directory with all you specific events.
events
┣ pageTypes
┃ ┗ index.ts
┣ 📂loginEvent
┃ ┗ index.ts
┃ index.ts ( export all you functions )
Each event will have a format like this:
const pageVisited =
(analytics?: Analytics) =>
async (args: Args): Promise<void> => {
// here do what you have to do with analytics
await analytics?.page(args)
}
export default pageVisited
import pageTypes from './pageTypes'
import testEvents from './testEvents'
export default {
pageTypes,
testEvents,
}
Context Load
Inside you global app you have to use our Segment Provider to allow loading of segment from your settting app. This will trigger a load and return analitycs function inside you provider.
import SegmentProvider from '@scaleway/use-segment'
import { captureMessage } from '@sentry/browser'
import events from './events'
const App = () => (
<SegmentProvider
settings={{ cdn: 'https://cdn.url', writeKey: 'WRITE_KEY' }} // check your gtm writeKey
events={events}
onError={e => captureMessage(`Error on Segment: ${e.message}`)}
>
<App />
</SegmentProvider>
)
Hook utility
Now you maybe want to use your events inside your app . If you are using typescript, you may
import { useSegment } from '@scaleway/use-segment'
import type { Events } from 'types/events'
import { Form, Submit } from '@scaleway/form'
const Login = () => {
const { events } = useSegment<Events>()
const onSubmit = async args => {
// make you api calls
await events.login()
}
return (
<Form onSubmit={onSubmit}>
// others fields
<Submit />
</Form>
)
}