# @app-city/analytics-browser

A browser-based analytics SDK for App City.

## Installation

```bash
npm install @app-city/analytics-browser
# or
yarn add @app-city/analytics-browser
# or
pnpm add @app-city/analytics-browser
```

## Usage

### Via NPM

```javascript
import AppCityAnalytics from '@app-city/analytics-browser';

// Initialize the SDK with your API key
AppCityAnalytics.init('your-api-key');

// Track an event
AppCityAnalytics.track('page_viewed', {
  page: window.location.pathname
});
```

### Via CDN

In the following code, replace "@latest" with the version you're using:

```html
<script src="https://unpkg.com/@app-city/analytics-browser@latest/dist/app-city-analytics.min.js"></script>
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/@app-city/analytics-browser@latest/dist/app-city-analytics.min.js"></script>

<script>
  // Initialize the SDK with your API key
  AppCityAnalytics.init('your-api-key');

  // Track an event
  AppCityAnalytics.track('page_viewed', {
    page: window.location.pathname
  });
</script>
```

## Framework-Specific Integration

### React

```jsx
// hooks/useAnalytics.js
import { useEffect } from 'react';
import AppCityAnalytics from '@app-city/analytics-browser';

export const useAnalytics = () => {
  useEffect(() => {
    // Initialize the SDK only once when the app loads
    AppCityAnalytics.init('your-api-key', {
      debug: process.env.NODE_ENV === 'development'
    });

    // Track page view on component mount
    AppCityAnalytics.track('page_viewed', {
      path: window.location.pathname,
      title: document.title
    });

    // Flush events when user navigates away
    const handleBeforeUnload = () => {
      AppCityAnalytics.flush();
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return AppCityAnalytics;
};
```

### Next.js

```typescript
// services/analytics.ts
import AppCityAnalytics from '@app-city/analytics-browser';

// Only initialize on client side
if (typeof window !== 'undefined') {
  AppCityAnalytics.init(process.env.NEXT_PUBLIC_APP_CITY_API_KEY || 'your-api-key');
}

export const Analytics = {
  pageView: (url: string) => {
    if (typeof window === 'undefined') return;
    AppCityAnalytics.track('page_viewed', { url });
  },

  event: (name: string, properties?: Record<string, unknown>) => {
    if (typeof window === 'undefined') return;
    AppCityAnalytics.track(name, properties);
  }
};

export default Analytics;
```

For more examples and full API documentation, refer to the [full documentation](https://docs.appcity.io/sdks/analytics-browser).

## License

MIT