{"_id":"@adkit.so/meta-pixel-react","_rev":"3-6e9a7e3ec54fbc0427fad624ddc97499","name":"@adkit.so/meta-pixel-react","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@adkit.so/meta-pixel-react","version":"1.0.0","keywords":["meta","facebook","pixel","tracking","analytics","react","typescript"],"author":"","license":"MIT","_id":"@adkit.so/meta-pixel-react@1.0.0","maintainers":[{"name":"jeannen","email":"nicolas@jeannen.com"}],"dist":{"shasum":"74b4705efff5218fd022a0bb88bec158b480779c","tarball":"https://registry.npmjs.org/@adkit.so/meta-pixel-react/-/meta-pixel-react-1.0.0.tgz","fileCount":5,"integrity":"sha512-zWs4AR/Uc2uhBHBFxweU6RDB9hbf2TC3Yfn2QO9/nRZQwgoVD7k0UzcVEcH9Rnw6Ln9WdZEFpyu/J4L2R6+cKw==","signatures":[{"sig":"MEUCIQCmS8KYpbFwbqaNtWdf+TBCBPOUJSCK7GF+DAPVBO0iIQIgO/Mek7dKG7HIHaMH1tw35VuEqHjBdfYErQ3MFehIvP0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28572},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"}},"scripts":{"dev":"cd playground && npm run dev","lint":"echo 'No linting configured'","test":"playwright test --config test/playwright.config.ts","build":"unbuild","prepack":"npm run build","release":"npm run lint && npm run test:unit && npm run build && npm publish --access public","test:ui":"playwright test --config test/playwright.config.ts --ui","test:unit":"vitest run --config test/vitest.config.ts","test:unit:watch":"vitest watch --config test/vitest.config.ts"},"_npmUser":{"name":"jeannen","email":"nicolas@jeannen.com"},"_npmVersion":"11.4.2","description":"React wrapper for Meta Pixel tracking with TypeScript support","directories":{},"_nodeVersion":"23.7.0","dependencies":{"@adkit.so/meta-pixel":"^1.1.4"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","vitest":"^1.0.4","unbuild":"^2.0.0","happy-dom":"^12.10.3","react-dom":"^18.2.0","typescript":"^5.3.3","@types/react":"^18.2.0","playwright-core":"^1.56.1","@playwright/test":"^1.56.1","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^14.1.2","@testing-library/user-event":"^14.5.1"},"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/meta-pixel-react_1.0.0_1764126194827_0.2548097764245709","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to @adkit/meta-pixel-react. Install that instead; the API is unchanged."},"1.0.1":{"name":"@adkit.so/meta-pixel-react","version":"1.0.1","keywords":["meta","facebook","pixel","tracking","analytics","react","typescript"],"author":"","license":"MIT","_id":"@adkit.so/meta-pixel-react@1.0.1","maintainers":[{"name":"jeannen","email":"nicolas@jeannen.com"}],"homepage":"https://github.com/adkit-so/meta-pixel-react#readme","bugs":{"url":"https://github.com/adkit-so/meta-pixel-react/issues"},"dist":{"shasum":"592d84f36c55d05f2eed38571ae910a220bec64c","tarball":"https://registry.npmjs.org/@adkit.so/meta-pixel-react/-/meta-pixel-react-1.0.1.tgz","fileCount":5,"integrity":"sha512-iLKw7Tsxn+2myMNOn2VJPI5pYh+HquNJgvhozEVa8i0PZUIk5vKTqAgPE0eIlU2oMUBjTWNIi4Fk5tbTUEQT8Q==","signatures":[{"sig":"MEUCIHrw60ljrFJjR5Azemoh9/KplmTC6gtM4SLZ4Hf8jSEKAiEAnanABXSH/B42YdLuYW8pj/4WQWg84FAXKGLcKGRffKg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30527},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"}},"gitHead":"43a2829b37ea84d99e36275e1c7fd2bd4482e19a","scripts":{"dev":"cd playground && npm run dev","lint":"echo 'No linting configured'","test":"playwright test --config test/playwright.config.ts","build":"unbuild","prepack":"npm run build","release":"npm run lint && npm run test:unit && npm run build && npm publish --access public","test:ui":"playwright test --config test/playwright.config.ts --ui","test:unit":"vitest run --config test/vitest.config.ts","test:unit:watch":"vitest watch --config test/vitest.config.ts"},"_npmUser":{"name":"jeannen","email":"nicolas@jeannen.com"},"repository":{"url":"git+https://github.com/adkit-so/meta-pixel-react.git","type":"git"},"_npmVersion":"11.4.2","description":"React wrapper for Meta Pixel tracking with TypeScript support","directories":{},"_nodeVersion":"23.7.0","dependencies":{"@adkit.so/meta-pixel":"^1.1.4"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","vitest":"^1.0.4","unbuild":"^2.0.0","happy-dom":"^12.10.3","react-dom":"^18.2.0","typescript":"^5.3.3","@types/react":"^18.2.0","playwright-core":"^1.56.1","@playwright/test":"^1.56.1","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^14.1.2","@testing-library/user-event":"^14.5.1"},"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/meta-pixel-react_1.0.1_1764138777388_0.6467009688248704","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to @adkit/meta-pixel-react. Install that instead; the API is unchanged."}},"time":{"created":"2025-11-26T03:03:14.753Z","modified":"2026-07-30T04:03:49.774Z","1.0.0":"2025-11-26T03:03:15.036Z","1.0.1":"2025-11-26T06:32:57.596Z"},"bugs":{"url":"https://github.com/adkit-so/meta-pixel-react/issues"},"license":"MIT","homepage":"https://github.com/adkit-so/meta-pixel-react#readme","keywords":["meta","facebook","pixel","tracking","analytics","react","typescript"],"repository":{"url":"git+https://github.com/adkit-so/meta-pixel-react.git","type":"git"},"description":"React wrapper for Meta Pixel tracking with TypeScript support","maintainers":[{"name":"jeannen","email":"nicolas@jeannen.com"}],"readme":"# Meta Pixel for React\n\n[![npm version](https://img.shields.io/npm/v/@adkit.so/meta-pixel-react.svg)](https://www.npmjs.com/package/@adkit.so/meta-pixel-react)\n[![npm downloads](https://img.shields.io/npm/dm/@adkit.so/meta-pixel-react.svg)](https://www.npmjs.com/package/@adkit.so/meta-pixel-react)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n> The most powerful and developer-friendly Meta Pixel integration for React.\n\nBuilt on top of [@adkit.so/meta-pixel](https://www.npmjs.com/package/@adkit.so/meta-pixel), this package provides a seamless, type-safe Meta Pixel experience with advanced features like event deduplication, multiple pixel support, and beautiful debug logging.\n\n## 📚 Table of Contents\n\n- [Features](#-features)\n- [Quick Start](#-quick-start)\n- [Installation](#-installation)\n- [Configuration](#%EF%B8%8F-configuration)\n- [Usage](#-usage)\n- [Standard Events](#-standard-events)\n- [Event Data Parameters](#-event-data-parameters)\n- [Advanced Usage](#-advanced-usage)\n- [Alternative Patterns](#-alternative-patterns)\n- [TypeScript Support](#-typescript-support)\n- [Troubleshooting](#-troubleshooting)\n- [Official Documentation](#-official-documentation)\n- [License](#-license)\n\n## ✨ Features\n\n- ✅ **TypeScript Support** - Full TypeScript support with autocomplete for all official events and parameters\n- 🎯 **Custom Events Support** - Track custom events with full type safety and flexible data structures\n- 🚦 **Event Deduplication** - Support for preventing duplicate events with event IDs\n- 🔌 **Multiple Pixels Support** - Load and manage multiple pixel IDs effortlessly\n- 🐛 **Debug Mode** - Beautiful styled console logs for development and debugging\n- 🏠 **Localhost Support** - Easy configuration to enable/disable tracking on localhost\n- ⚛️ **React Context Pattern** - Clean Provider/Hook pattern that feels native to React\n\n## 📱 Using Next.js?\n\nUse [@adkit.so/meta-pixel-next](https://www.npmjs.com/package/@adkit.so/meta-pixel-next) instead! It provides:\n\n- **Auto PageView tracking on route changes** (this package doesn't do that)\n- Simple `<MetaPixel />` component - no Provider needed\n- Environment variable support (`NEXT_PUBLIC_META_PIXEL_ID`)\n\n```bash\nnpm install @adkit.so/meta-pixel-next\n```\n\n## ⚠️ Important: PageView Tracking on Route Changes\n\n**This package tracks PageView on initial load only.** It does NOT automatically track PageView when navigating between pages in a Single Page Application (SPA).\n\n### Why?\n\nReact apps use client-side routing (React Router, etc.) which doesn't trigger full page reloads. The Meta Pixel script only fires PageView once when the page loads.\n\n### How to handle route changes?\n\n**Option 1: Use the Next.js package** (recommended for Next.js)\n\n```bash\nnpm install @adkit.so/meta-pixel-next\n```\n\n**Option 2: Manually track PageView on route changes**\n\n```tsx\n// With React Router\nimport { useEffect } from 'react'\nimport { useLocation } from 'react-router-dom'\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction RouteChangeTracker() {\n  const location = useLocation()\n  const meta = useMetaPixel()\n  const isFirstRender = useRef(true)\n\n  useEffect(() => {\n    // Skip first render (initial PageView is auto-tracked)\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n      return\n    }\n\n    // Track PageView on route change\n    if (meta.isLoaded()) {\n      meta.track('PageView')\n    }\n  }, [location.pathname])\n\n  return null\n}\n\n// Add to your App\nfunction App() {\n  return (\n    <MetaPixelProvider pixelIds=\"YOUR_PIXEL_ID\">\n      <RouteChangeTracker />\n      <YourRoutes />\n    </MetaPixelProvider>\n  )\n}\n```\n\n## ⚡ Quick Start\n\n```bash\nnpm install @adkit.so/meta-pixel-react\n```\n\n```tsx\nimport { MetaPixelProvider, useMetaPixel } from '@adkit.so/meta-pixel-react'\n\n// 1. Wrap your app\nfunction App() {\n  return (\n    <MetaPixelProvider pixelIds=\"YOUR_PIXEL_ID\">\n      <YourApp />\n    </MetaPixelProvider>\n  )\n}\n\n// 2. Track events anywhere\nfunction ProductPage() {\n  const meta = useMetaPixel()\n  \n  function handlePurchase() {\n    meta.track('Purchase', { value: 99.99, currency: 'USD' })\n  }\n  \n  return <button onClick={handlePurchase}>Buy Now</button>\n}\n```\n\nThat's it! 🎉\n\n## 📦 Installation\n\n```bash\nnpm install @adkit.so/meta-pixel-react\n```\n\n```bash\nyarn add @adkit.so/meta-pixel-react\n```\n\n```bash\npnpm add @adkit.so/meta-pixel-react\n```\n\n## ⚙️ Configuration\n\n### Basic Setup\n\nWrap your app with the `MetaPixelProvider` component:\n\n```tsx\nimport { MetaPixelProvider } from '@adkit.so/meta-pixel-react'\n\nfunction App() {\n  return (\n    <MetaPixelProvider \n      pixelIds=\"YOUR_PIXEL_ID\"\n      autoTrackPageView={true}\n      debug={false}\n      enableLocalhost={false}\n    >\n      <YourApp />\n    </MetaPixelProvider>\n  )\n}\n```\n\n### Configuration Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `pixelIds` | `string \\| string[]` | **required** | Single pixel ID or array of pixel IDs |\n| `autoTrackPageView` | `boolean` | `true` | Automatically track PageView on initialization |\n| `debug` | `boolean` | `false` | Enable styled console logs with background colors |\n| `enableLocalhost` | `boolean` | `false` | Enable tracking on localhost (useful for testing) |\n| `children` | `ReactNode` | **required** | Your React components |\n\n### Multiple Pixels Example\n\n```tsx\n<MetaPixelProvider \n  pixelIds={['PIXEL_ID_1', 'PIXEL_ID_2', 'PIXEL_ID_3']}\n  debug={true}\n  enableLocalhost={true}\n>\n  <App />\n</MetaPixelProvider>\n```\n\n### Using Environment Variables\n\n```tsx\n// .env.local\nMETA_PIXEL_ID=123456789012345\nREACT_APP_META_PIXEL_ID=123456789012345\n```\n\n```tsx\n// App.tsx\n<MetaPixelProvider pixelIds={import.meta.env.META_PIXEL_ID}>\n  <App />\n</MetaPixelProvider>\n```\n\n## 💡 Usage\n\nThe `useMetaPixel()` hook provides direct access to the Meta Pixel instance with all tracking methods. It must be used within a `MetaPixelProvider`.\n\n### Basic Usage\n\n```tsx\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction ProductPage() {\n  const meta = useMetaPixel()\n\n  function handleAddToCart() {\n    meta.track('AddToCart', {\n      content_name: 'Wireless Headphones',\n      content_ids: ['SKU_789'],\n      value: 149.99,\n      currency: 'USD'\n    })\n  }\n\n  return <button onClick={handleAddToCart}>Add to Cart</button>\n}\n```\n\n### Tracking on Component Mount\n\n```tsx\nimport { useEffect } from 'react'\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction ProductPage({ product }) {\n  const meta = useMetaPixel()\n\n  useEffect(() => {\n    // Track page view when component mounts\n    meta.track('ViewContent', {\n      content_name: product.name,\n      content_ids: [product.id],\n      value: product.price,\n      currency: 'USD'\n    })\n  }, [product.id])\n\n  return <div>{product.name}</div>\n}\n```\n\n### With Event Deduplication\n\n```tsx\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction CheckoutPage() {\n  const meta = useMetaPixel()\n\n  async function handlePurchase() {\n    const orderId = await processOrder()\n    \n    meta.track(\n      'Purchase',\n      {\n        value: 299.99,\n        currency: 'USD',\n        content_ids: ['SKU_123']\n      },\n      {\n        eventID: `order-${orderId}` // Prevents duplicates\n      }\n    )\n  }\n\n  return <button onClick={handlePurchase}>Complete Purchase</button>\n}\n```\n\n### Check if Pixel is Loaded\n\n```tsx\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction MyComponent() {\n  const meta = useMetaPixel()\n\n  function trackIfReady() {\n    if (meta.isLoaded()) meta.track('Purchase', { value: 99.99, currency: 'USD' })\n    else console.log('Pixel not loaded yet')\n  }\n\n  return <button onClick={trackIfReady}>Buy Now</button>\n}\n```\n\n## 🐛 Debug Mode\n\nWhen `debug={true}`, you'll see beautiful styled console logs:\n\n- 🔵 **[Meta Pixel]** Info messages (blue background)\n- ✅ **[Meta Pixel]** Success messages (green background)\n- ⚠️ **[Meta Pixel]** Warning messages (orange background)\n\nExample output:\n\n```\n[Meta Pixel] Initializing Meta Pixel... { pixelIds: [...], autoTrackPageView: true }\n[Meta Pixel] ✓ Meta Pixel initialized successfully\n[Meta Pixel] Tracking standard event: \"Purchase\" { data: {...}, eventData: {...} }\n```\n\n```tsx\n<MetaPixelProvider \n  pixelIds=\"YOUR_PIXEL_ID\"\n  debug={true}\n>\n  <App />\n</MetaPixelProvider>\n```\n\n## 📊 Standard Events\n\nAll Meta Pixel standard events are supported with full TypeScript autocomplete. These events help you track important actions on your website and optimize your ad campaigns.\n\n| Event | Description | Common Use Cases |\n|-------|-------------|------------------|\n| `AddPaymentInfo` | Payment info added | Checkout flow |\n| `AddToCart` | Item added to shopping cart | E-commerce |\n| `AddToWishlist` | Item added to wishlist | E-commerce |\n| `CompleteRegistration` | User completed registration | Sign-ups, account creation |\n| `Contact` | User contacted business | Contact forms |\n| `CustomizeProduct` | Product customization started | Product configurators |\n| `Donate` | Donation made | Non-profits |\n| `FindLocation` | Location finder used | Store locators |\n| `InitiateCheckout` | Checkout process started | E-commerce funnels |\n| `Lead` | Lead submitted | Lead generation forms |\n| `Purchase` | Purchase completed | Transaction confirmation |\n| `Schedule` | Appointment scheduled | Booking systems |\n| `Search` | Search performed | Site search |\n| `StartTrial` | Trial started | SaaS applications |\n| `SubmitApplication` | Application submitted | Job boards, loan applications |\n| `Subscribe` | Subscription started | Newsletters, subscriptions |\n| `ViewContent` | Content viewed | Product pages, blog posts |\n\nYou can find the official list of standard events [here](https://developers.facebook.com/docs/meta-pixel/reference/#standard-events).\n\n### Example Usage\n\n```tsx\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction EcommerceExample() {\n  const meta = useMetaPixel()\n\n  function trackPurchase() {\n    meta.track('Purchase', {\n      value: 299.99,\n      currency: 'USD',\n      content_ids: ['SKU_12345'],\n      content_type: 'product',\n      num_items: 1\n    })\n  }\n\n  function trackLead() {\n    meta.track('Lead', { content_name: 'Newsletter Signup', content_category: 'Marketing' })\n  }\n\n  function trackSearch(query: string) {\n    meta.track('Search', { search_string: query })\n  }\n\n  return (\n    <div>\n      <button onClick={trackPurchase}>Complete Purchase</button>\n      <button onClick={trackLead}>Sign Up</button>\n      <input onChange={(e) => trackSearch(e.target.value)} placeholder=\"Search...\" />\n    </div>\n  )\n}\n```\n\n## 📋 Event Data Parameters\n\nAll event parameters are optional but help improve ad targeting and conversion tracking. Here are the most common ones:\n\n| Parameter | Type | Description | Example |\n|-----------|------|-------------|---------|\n| `value` | `number` | Monetary value of the event | `99.99` |\n| `currency` | `string` | ISO 4217 currency code | `'USD'`, `'EUR'`, `'GBP'` |\n| `content_ids` | `string[]` | Product IDs or SKUs | `['SKU_123', 'SKU_456']` |\n| `content_type` | `string` | Type of content | `'product'`, `'product_group'` |\n| `content_name` | `string` | Name of page/product | `'Blue T-Shirt'` |\n| `content_category` | `string` | Category of page/product | `'Apparel'`, `'Electronics'` |\n| `contents` | `Array<{id, quantity}>` | Detailed product information | `[{id: 'SKU_123', quantity: 2}]` |\n| `num_items` | `number` | Number of items | `3` |\n| `search_string` | `string` | Search query | `'running shoes'` |\n| `status` | `boolean` | Registration/subscription status | `true` |\n| `predicted_ltv` | `number` | Predicted lifetime value of customer | `450.00` |\n\nYou can find the list of properties [here](https://developers.facebook.com/docs/meta-pixel/reference/#object-properties).\n\n### Complete E-commerce Example\n\n```tsx\nimport { useState, useEffect } from 'react'\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction ProductPage() {\n  const meta = useMetaPixel()\n  const [product] = useState({\n    id: 'SKU_789',\n    name: 'Wireless Headphones',\n    price: 149.99,\n    category: 'Electronics'\n  })\n\n  // Track page view when component mounts\n  useEffect(() => {\n    meta.track('ViewContent', {\n      content_ids: [product.id],\n      content_type: 'product',\n      content_name: product.name,\n      content_category: product.category,\n      value: product.price,\n      currency: 'USD'\n    })\n  }, [product.id])\n\n  function handleAddToCart() {\n    meta.track('AddToCart', {\n      content_ids: [product.id],\n      content_type: 'product',\n      content_name: product.name,\n      value: product.price,\n      currency: 'USD'\n    })\n  }\n\n  async function handlePurchase() {\n    const orderId = await processOrder()\n    \n    meta.track(\n      'Purchase',\n      {\n        content_ids: [product.id],\n        content_type: 'product',\n        value: product.price,\n        currency: 'USD',\n        num_items: 1\n      },\n      {\n        eventID: orderId // For deduplication\n      }\n    )\n  }\n\n  return (\n    <div>\n      <h1>{product.name}</h1>\n      <p>${product.price}</p>\n      <button onClick={handleAddToCart}>Add to Cart</button>\n      <button onClick={handlePurchase}>Buy Now</button>\n    </div>\n  )\n}\n```\n\n## 🚀 Advanced Usage\n\n### Custom Events\n\nTrack custom events specific to your business:\n\n```tsx\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction PricingPage() {\n  const meta = useMetaPixel()\n\n  function trackPricingView() {\n    meta.trackCustom('PricingPageViewed', { plan: 'enterprise', duration: 'annual' })\n  }\n\n  function trackVideoComplete() {\n    meta.trackCustom('VideoWatched', { video_id: 'intro_2024', watch_percentage: 100 })\n  }\n\n  return (\n    <div>\n      <button onClick={trackPricingView}>View Pricing</button>\n      <video onEnded={trackVideoComplete}>Your video</video>\n    </div>\n  )\n}\n```\n\n### Event Deduplication\n\nPrevent duplicate event tracking by using unique event IDs. This is crucial when tracking conversions from both client and server (Conversions API):\n\n```tsx\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction CheckoutPage() {\n  const meta = useMetaPixel()\n\n  async function processOrder() {\n    const orderId = await createOrder()\n    \n    // Use order ID as event ID to prevent duplicates\n    meta.track(\n      'Purchase',\n      {\n        value: 299.99,\n        currency: 'USD',\n        content_ids: ['SKU_123']\n      },\n      {\n        eventID: `order-${orderId}`\n      }\n    )\n\n    // Even if this fires multiple times or from server too,\n    // Meta will deduplicate based on eventID\n  }\n\n  return <button onClick={processOrder}>Complete Order</button>\n}\n```\n\n### Conditional Tracking\n\n```tsx\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction RegisterPage() {\n  const meta = useMetaPixel()\n  const { user } = useAuth()\n\n  async function handleRegistration() {\n    // Only track if pixel is loaded\n    if (!meta.isLoaded()) {\n      console.warn('Meta Pixel not loaded yet')\n      return\n    }\n\n    // Track registration with user context\n    meta.track('CompleteRegistration', {\n      status: true,\n      content_name: user.accountType,\n      value: user.predictedLTV\n    })\n  }\n\n  return <button onClick={handleRegistration}>Sign Up</button>\n}\n```\n\n### Lead Form Example\n\n```tsx\nimport { useState, FormEvent } from 'react'\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction ContactForm() {\n  const meta = useMetaPixel()\n  const [formData, setFormData] = useState({ name: '', email: '' })\n\n  async function handleSubmit(e: FormEvent) {\n    e.preventDefault()\n    \n    // Track the lead\n    meta.track('Lead', {\n      content_name: 'Contact Form Submission',\n      content_category: 'Contact',\n      value: 10.00 // Estimated lead value\n    })\n\n    await submitForm(formData)\n  }\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input\n        type=\"text\"\n        value={formData.name}\n        onChange={(e) => setFormData({ ...formData, name: e.target.value })}\n        placeholder=\"Name\"\n        required\n      />\n      <input\n        type=\"email\"\n        value={formData.email}\n        onChange={(e) => setFormData({ ...formData, email: e.target.value })}\n        placeholder=\"Email\"\n        required\n      />\n      <button type=\"submit\">Submit</button>\n    </form>\n  )\n}\n```\n\n### Search Functionality Example\n\n```tsx\nimport { useState } from 'react'\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction SearchBar() {\n  const meta = useMetaPixel()\n  const [query, setQuery] = useState('')\n\n  function handleSearch(e: FormEvent) {\n    e.preventDefault()\n    \n    meta.track('Search', { search_string: query })\n\n    performSearch(query)\n  }\n\n  return (\n    <form onSubmit={handleSearch}>\n      <input\n        type=\"text\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        placeholder=\"Search products...\"\n      />\n      <button type=\"submit\">Search</button>\n    </form>\n  )\n}\n```\n\n## 🔄 Alternative Patterns\n\nWhile the Provider pattern is recommended for most React applications, we offer alternative patterns if you prefer different approaches:\n\n### Pattern 1: Provider (Recommended)\n\n```tsx\nimport { MetaPixelProvider, useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction App() {\n  return (\n    <MetaPixelProvider pixelIds=\"YOUR_PIXEL_ID\">\n      <Component />\n    </MetaPixelProvider>\n  )\n}\n\nfunction Component() {\n  const meta = useMetaPixel()\n  meta.track('Purchase', { value: 99, currency: 'USD' })\n}\n```\n\n**Pros:** Clean React Context pattern, explicit initialization, works well with other providers\n\n### Pattern 2: Hook with Config\n\n```tsx\nimport { useMetaPixel } from '@adkit.so/meta-pixel-react'\n\nfunction App() {\n  // Initialize once at root\n  useMetaPixel({ pixelIds: 'YOUR_PIXEL_ID' })\n  return <Component />\n}\n\nfunction Component() {\n  // Use anywhere without config\n  const meta = useMetaPixel()\n  meta.track('Purchase', { value: 99, currency: 'USD' })\n}\n```\n\n**Pros:** No wrapper component, minimal code, still uses hooks\n\n### Pattern 3: Init Function\n\n```tsx\nimport { initMetaPixel, useMetaPixel } from '@adkit.so/meta-pixel-react'\n\n// In main.tsx or index.tsx\ninitMetaPixel({ pixelIds: 'YOUR_PIXEL_ID' })\n\n// Then in your components\nfunction Component() {\n  const meta = useMetaPixel()\n  meta.track('Purchase', { value: 99, currency: 'USD' })\n}\n```\n\n**Pros:** Can initialize outside components, useful for entry files like `main.tsx`\n\n## 📝 TypeScript Support\n\nFull type safety with exported types:\n\n```tsx\nimport type { \n  StandardEvent, \n  EventData, \n  EventMetaData,\n  MetaPixelConfig \n} from '@adkit.so/meta-pixel-react'\n\nconst config: MetaPixelConfig = { pixelIds: 'YOUR_PIXEL_ID', debug: true }\n\nfunction trackEvent(event: StandardEvent, data: EventData) {\n  const meta = useMetaPixel()\n  meta.track(event, data)\n}\n```\n\nAll methods, events, and parameters have complete TypeScript definitions with IntelliSense support in your IDE.\n\n## ❓ Troubleshooting\n\n### Pixel not loading?\n\n1. **Check your pixel ID** - Make sure it's correct in your config\n2. **Enable debug mode** - Set `debug={true}` to see detailed logs\n3. **Check browser console** - Look for errors or warnings\n4. **Check Ad Blockers** - Ad blockers often block the Meta Pixel script\n5. **Enable on localhost** - Set `enableLocalhost={true}` for local testing\n\n### Hook error \"must be used within MetaPixelProvider\"?\n\nMake sure your components are wrapped with `MetaPixelProvider`:\n\n```tsx\n// ✅ Correct\n<MetaPixelProvider pixelIds=\"YOUR_PIXEL_ID\">\n  <Component />\n</MetaPixelProvider>\n\n// ❌ Wrong - Hook called outside Provider\n<Component />\n```\n\n### Events not showing in Meta Events Manager?\n\n- **Wait a few minutes** - Events can take 5-20 minutes to appear\n- **Check Test Events** - Use the Test Events tool in Meta Events Manager\n- **Verify event names** - Standard events are case-sensitive\n- **Use event deduplication** - Add unique `eventID` to prevent duplicates\n\n### TypeScript errors?\n\nMake sure you have the latest version:\n\n```bash\nnpm update @adkit.so/meta-pixel-react\n```\n\n### Multiple pixels not working?\n\n```tsx\n// ✅ Correct\n<MetaPixelProvider pixelIds={['ID_1', 'ID_2']}>\n  <App />\n</MetaPixelProvider>\n\n// ❌ Incorrect\n<MetaPixelProvider pixelIds=\"ID_1,ID_2\">\n  <App />\n</MetaPixelProvider>\n```\n\n## 📚 Official Documentation\n\nLearn more about Meta Pixel from official Facebook resources:\n\n- **[Meta Pixel Reference](https://developers.facebook.com/docs/meta-pixel/reference/)** - Complete API reference\n- **[Standard Events Guide](https://developers.facebook.com/docs/meta-pixel/implementation/conversion-tracking#standard-events)** - Detailed event documentation\n- **[Object Properties Reference](https://developers.facebook.com/docs/meta-pixel/reference/#object-properties)** - All available event parameters\n- **[Conversions API](https://developers.facebook.com/docs/marketing-api/conversions-api)** - Server-side event tracking\n- **[Events Manager](https://www.facebook.com/events_manager2)** - Monitor your pixel events\n\n## 🔗 Related Packages\n\n- [@adkit.so/meta-pixel](https://www.npmjs.com/package/@adkit.so/meta-pixel) - Core JavaScript package\n- [@adkit.so/meta-pixel-nuxt](https://www.npmjs.com/package/@adkit.so/meta-pixel-nuxt) - Nuxt module\n- [@adkit.so/meta-pixel-next](https://www.npmjs.com/package/@adkit.so/meta-pixel-next) - Next.js package with auto PageView tracking\n\n## 📖 Full Guide\n\nFor a complete step-by-step guide on installing and configuring Meta Pixel, check out our detailed tutorial:\n\n**[How to Install Meta Pixel](https://adkit.so/resources/how-to-install-meta-pixel)**\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n## 📄 License\n\nMIT\n\n---\n\n**Made with ❤️ by [Adkit](https://adkit.so)**\n\nIf this package helped you, please consider giving it a ⭐️ on [GitHub](https://github.com/AdKit-so/meta-pixel-react)!\n","readmeFilename":"README.md"}