Appearance

Analytics Store ​

File Information ​

  • Path: app/stores/analytics.ts
  • Store Name: insights
  • Purpose: Analytics and insights tracking state management
  • Type: Pinia Store

Overview ​

The Analytics Store manages analytics and insights data including transaction insights, share insights, and user agent/location information. This store is used for tracking user behavior and analytics events.

State ​

typescript
{
  InsightsTransaction: Record<string, any>,      // Transaction insights data
  InsightsTransactionShare: Record<string, any>, // Share transaction insights
  userAgentAndLocation: Record<string, any>      // User agent and location data
}

Getters ​

getInsightsTransaction ​

Returns transaction insights data.

Returns: Record<string, any> - Transaction insights object

typescript
const analyticsStore = useAnalyticStore()
const insights = analyticsStore.getInsightsTransaction

getInsightsTransactionShare ​

Returns share transaction insights data.

Returns: Record<string, any> - Share transaction insights object

typescript
const analyticsStore = useAnalyticStore()
const shareInsights = analyticsStore.getInsightsTransactionShare

getUserAgentAndLocation ​

Returns user agent and location data.

Returns: Record<string, any> - User agent and location object

typescript
const analyticsStore = useAnalyticStore()
const userInfo = analyticsStore.getUserAgentAndLocation

Actions ​

setUserAgentAndLocation(payload) ​

Sets user agent and location data.

Parameters:

  • payload: UserAgentAndLocation | null - User agent and location data

Returns: void

Usage:

typescript
const analyticsStore = useAnalyticStore()

analyticsStore.setUserAgentAndLocation({
  userAgent: navigator.userAgent,
  location: {
    country: 'US',
    city: 'New York'
  }
})

Note: If payload is null, the action returns early without updating state.

Usage Examples ​

Basic Usage ​

typescript
import { useAnalyticStore } from '~/stores/analytics'

const analyticsStore = useAnalyticStore()

// Set user agent and location
analyticsStore.setUserAgentAndLocation({
  userAgent: navigator.userAgent,
  location: {
    country: 'US',
    city: 'New York',
    timezone: 'America/New_York'
  }
})

// Get insights
const transactionInsights = analyticsStore.getInsightsTransaction
const shareInsights = analyticsStore.getInsightsTransactionShare
const userInfo = analyticsStore.getUserAgentAndLocation

In Component ​

vue
<script setup>
import { useAnalyticStore } from '~/stores/analytics'

const analyticsStore = useAnalyticStore()

onMounted(() => {
  // Set user agent and location on mount
  analyticsStore.setUserAgentAndLocation({
    userAgent: navigator.userAgent,
    location: {
      country: 'US',
      city: 'New York'
    }
  })
})

// Access insights
const insights = computed(() => analyticsStore.getInsightsTransaction)
</script>

Type Definitions ​

AnalyticsState ​

typescript
interface AnalyticsState {
  InsightsTransaction: Record<string, any>
  InsightsTransactionShare: Record<string, any>
  userAgentAndLocation: Record<string, any>
}

UserAgentAndLocation ​

typescript
interface UserAgentAndLocation {
  userAgent?: string
  location?: {
    country?: string
    city?: string
    timezone?: string
    // ... other location fields
  }
}

Store Structure ​

The store uses Pinia's Options API:

typescript
export const useAnalyticStore = defineStore('insights', {
  state: (): AnalyticsState => ({
    InsightsTransaction: {},
    InsightsTransactionShare: {},
    userAgentAndLocation: {},
  }),

  getters: {
    getInsightsTransaction: (state) => state.InsightsTransaction,
    getInsightsTransactionShare: (state) => state.InsightsTransactionShare,
    getUserAgentAndLocation: (state) => state.userAgentAndLocation,
  },

  actions: {
    setUserAgentAndLocation(payload: UserAgentAndLocation | null): void {
      if (!payload) return
      this.userAgentAndLocation = payload
    },
  },
})

Notes for Development ​

  • Store name is insights (not analytics)
  • Uses Options API (not Composition API)
  • State initialized as empty objects
  • Getters return state properties directly
  • Action validates payload before setting
  • Used for analytics tracking and insights