diff --git a/README.md b/README.md index 7faf2d5..8978a30 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,8 @@
[](https://www.npmjs.com/package/@jadecubes/analytics)
-[](https://www.npmjs.com/package/@jadecubes/analytics)
+[](https://bundlephobia.com/package/@jadecubes/analytics)
+[](https://github.com/jadecubes/Analytics/actions)
[](LICENSE)
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
@@ -43,17 +44,140 @@ Modern front-ends often require multiple analytics platforms. Analytics offers:
## 🚀 Getting Started
-### Install
+### Installation
```bash
-# npm
npm install @jadecubes/analytics
-
-# or with pnpm / yarn
+# or
pnpm add @jadecubes/analytics
+# or
yarn add @jadecubes/analytics
```
+### Basic Usage
+
+```typescript
+import { createAnalyticsProviders, AnalyticsPlatforms } from '@jadecubes/analytics'
+
+// Initialize analytics providers at app startup
+createAnalyticsProviders({
+ [AnalyticsPlatforms.GA]: {
+ measurementId: 'G-XXXXXXXXXX'
+ },
+ [AnalyticsPlatforms.META]: {
+ measurementId: 'YOUR_META_PIXEL_ID'
+ },
+ [AnalyticsPlatforms.TIKTOK]: {
+ measurementId: 'YOUR_TIKTOK_PIXEL_ID'
+ }
+})
+```
+
+### Track Events
+
+```typescript
+import { getAnalyticsInstance, AnalyticsPlatforms } from '@jadecubes/analytics'
+
+// Get analytics instance for a specific platform
+const ga = getAnalyticsInstance(AnalyticsPlatforms.GA)
+const meta = getAnalyticsInstance(AnalyticsPlatforms.META)
+const tiktok = getAnalyticsInstance(AnalyticsPlatforms.TIKTOK)
+
+// Track events for Google Analytics 4
+ga?.processAnalyticsEvent({
+ eventName: 'add_to_cart',
+ eventParams: {
+ currency: 'USD',
+ value: 99.99,
+ items: [
+ {
+ item_id: 'SKU_12345',
+ item_name: 'Product Name',
+ price: 99.99
+ }
+ ]
+ }
+})
+
+// Track events for Meta (Facebook) Pixel
+meta?.processAnalyticsEvent({
+ eventName: 'AddToCart',
+ eventParams: {
+ content_name: 'Product Name',
+ content_ids: ['SKU_12345'],
+ content_type: 'product',
+ value: 99.99,
+ currency: 'USD'
+ }
+})
+
+// Track events for TikTok Pixel
+tiktok?.processAnalyticsEvent({
+ eventName: 'AddToCart',
+ eventParams: {
+ content_id: 'SKU_12345',
+ content_name: 'Product Name',
+ value: 99.99,
+ currency: 'USD'
+ }
+})
+```
+
+### Understanding Event Processing
+
+The `processAnalyticsEvent` method:
+- **Queues events** if the analytics script isn't loaded yet
+- **Automatically sends queued events** once the platform is ready
+- **Handles lazy loading** - you can call it immediately after initialization without worrying about script load timing
+
+### React Integration
+
+```typescript
+import { useEffect } from 'react'
+import { createAnalyticsProviders, getAnalyticsInstance, AnalyticsPlatforms } from '@jadecubes/analytics'
+
+function App() {
+ useEffect(() => {
+ // Initialize on app mount
+ createAnalyticsProviders({
+ [AnalyticsPlatforms.GA]: { measurementId: 'G-XXXXXXXXXX' },
+ [AnalyticsPlatforms.META]: { measurementId: 'YOUR_PIXEL_ID' },
+ [AnalyticsPlatforms.TIKTOK]: { measurementId: 'YOUR_TIKTOK_PIXEL_ID' }
+ })
+ }, [])
+
+ const handlePurchase = () => {
+ const ga = getAnalyticsInstance(AnalyticsPlatforms.GA)
+ const meta = getAnalyticsInstance(AnalyticsPlatforms.META)
+
+ // Track purchase event
+ ga?.processAnalyticsEvent({
+ eventName: 'purchase',
+ eventParams: {
+ transaction_id: 'T_12345',
+ value: 299.99,
+ currency: 'USD',
+ items: [{
+ item_id: 'SKU_12345',
+ item_name: 'Product Name',
+ price: 299.99
+ }]
+ }
+ })
+
+ meta?.processAnalyticsEvent({
+ eventName: 'Purchase',
+ eventParams: {
+ value: 299.99,
+ currency: 'USD'
+ }
+ })
+ }
+
+ return