🚀 published-event-tracker

Publishd event logging tracker

Event Logging

Log event in Publishd react app.

1. Dependency

• amplitude-js

{
  "@types/amplitude-js": "8.16.2",
  "amplitude-js": "8.21.2"
}

2. Get Started

1. Install the event-logger package from the npm registry:

$ yarn add publishd-event-tracker

2. Import the EventLogger class in your React app:

import { EventLogger } from 'publishd-event-tracker'

3. Initialize the EventLogger class with your API key when your React app is initialized:

EventLogger.initialize({ apiKey: 'YOUR_API_KEY_HERE' })

4. Use the useEventLogging hook to log events in your React components:

import { useEventLogging } from 'event-logger'

function MyComponent() {
  const { trackButtonClick } = useEventLogging()

  function handleClick() {
    trackButtonClick({ name: 'Click publishd!' })
  }

  return <button onClick={handleClick}>Click me</button>
}

3. Hook Methods

const track = useCallback(
  ({ name, properties }: { name: string; properties?: object }) => {
    eventLogger.track(name, properties)
  },
  [eventLogger]
)

const trackButtonClick = useCallback(
  ({
    name,
    properties,
    pagePath,
  }: {
    name: string
    properties?: object
    pagePath?: string
  }) => {
    eventLogger.trackButtonClick(name, properties, pagePath)
  },
  [eventLogger]
)

const trackAction = useCallback(
  ({ name, properties }: { name: string; properties?: object }) => {
    eventLogger.trackAction(name, properties)
  },
  [eventLogger]
)

const trackPageView = useCallback(
  ({
    pagePath,
    pageName,
    properties,
  }: {
    pagePath?: string
    pageName: string
    properties?: object
  }) => {
    eventLogger.trackPageView(pagePath, pageName, properties)
  },
  [eventLogger]
)

const trackShow = useCallback(
  ({
    name,
    pagePath,
    properties,
  }: {
    name: string
    pagePath?: string
    properties?: object
  }) => {
    eventLogger.trackShow(name, pagePath, properties)
  },
  [eventLogger]
)

4. Recommendations

Install Amplitude Event Explorer Chrome Extension to monitor event logging.