payaza-analytics-fullstory

payaza-analytics-fullstory

Framework-agnostic FullStory session replay and analytics integration for Payaza frontend apps. Wraps @fullstory/browser with masking-by-default, consent gating, and per-app tagging built in, plus adapters for Nuxt 3, plain Vue 3, and React.

The package root (payaza-analytics-fullstory) is a framework-agnostic core — plain functions, no framework dependency. Every other entry point is a thin adapter around that same core:

• Any framework / plain JS: payaza-analytics-fullstory
• Nuxt 3 apps: payaza-analytics-fullstory/nuxt
• Plain Vite + Vue 3 apps (no Nuxt): payaza-analytics-fullstory/vue
• React apps: payaza-analytics-fullstory/react

Install

npm install payaza-analytics-fullstory

Usage — any framework / plain JS

If your app doesn't use Nuxt, Vue, or React (or you'd rather wire it up yourself), import the core directly:

import { initAnalytics, identify, trackEvent, anonymize } from 'payaza-analytics-fullstory'

// once consent is confirmed:
initAnalytics({
  orgId: 'XXXXX',
  appName: 'my-app',
  devMode: import.meta.env.MODE !== 'production',
})

// after login:
identify(hashedUserId, { role: 'reader' })

// custom events:
trackEvent('Article Viewed')

// on logout:
anonymize()

Usage — Nuxt 3 apps

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['payaza-analytics-fullstory/nuxt'],
  payazaAnalytics: {
    orgId: process.env.NUXT_PUBLIC_FULLSTORY_ORG_ID,
    appName: 'my-app', // pick a stable per-app slug
    devMode: process.env.NODE_ENV !== 'production',
  },
})

Anywhere in the app (the composable is auto-imported, no import statement needed):

const analytics = useAnalytics()

// once consent is confirmed:
analytics.start()

// after login:
analytics.identify(hashedUserId, { role: 'merchant' })

// custom events:
analytics.trackEvent('Checkout Started')

// on logout:
analytics.anonymize()

Usage — plain Vite + Vue 3 apps (no Nuxt)

main.ts:

import { createApp } from 'vue'
import { createPayazaAnalytics } from 'payaza-analytics-fullstory/vue'
import App from './App.vue'

const app = createApp(App)

app.use(
  createPayazaAnalytics({
    orgId: import.meta.env.VITE_FULLSTORY_ORG_ID,
    appName: 'my-app',
    devMode: import.meta.env.MODE !== 'production',
  })
)

app.mount('#app')

In any component:

import { useAnalytics } from 'payaza-analytics-fullstory/vue'

const analytics = useAnalytics()
analytics.start() // after consent is confirmed

Usage — React apps

App root:

import { PayazaAnalyticsProvider } from 'payaza-analytics-fullstory/react'

export function App() {
  return (
    <PayazaAnalyticsProvider
      options={{
        orgId: import.meta.env.VITE_FULLSTORY_ORG_ID,
        appName: 'my-app',
        devMode: import.meta.env.MODE !== 'production',
      }}
    >
      {/* rest of the app */}
    </PayazaAnalyticsProvider>
  )
}

In any component:

import { useAnalytics } from 'payaza-analytics-fullstory/react'

const analytics = useAnalytics()
analytics.start() // after consent is confirmed

Environments

FullStory doesn't have a built-in "create environment" feature — separate dev/staging/prod traffic yourself:

• Pass devMode: true for local/dev builds — those sessions don't count against your capture quota.
• For staging vs. production, either use a second FullStory org (own Org ID, own billing) or stay on one org and filter with a saved-search segment on the staging domain. Either way, set orgId per environment via your existing env var pattern — never point a non-prod build at the production org.