)
}
```
--------------------------------
### Implement PlausibleProvider in _app.js for v3
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
Provider setup for v3 including domain and tracking options.
```jsx
// pages/_app.js
import PlausibleProvider from 'next-plausible'
export default function MyApp({ Component, pageProps }) {
return (
)
}
```
--------------------------------
### Setup PlausibleProvider in Pages Router
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Use PlausibleProvider at the top level of your application in _app.js for Pages Router integration. This component injects the Plausible script and initializes tracking.
```jsx
import PlausibleProvider from 'next-plausible'
export default function MyApp({ Component, pageProps }) {
return (
)
}
```
--------------------------------
### Setup PlausibleProvider in App Router
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
For Next.js 13+ App Router, place PlausibleProvider within your root layout component (layout.js). It correctly handles script tags with React Server Components.
```jsx
import PlausibleProvider from 'next-plausible'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
--------------------------------
### Configure PlausibleProvider Init Options
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Configure runtime behavior like localhost tracking, hash-based routing, automatic pageviews, file download tracking, and custom properties using the 'init' prop. These options are passed directly to plausible.init().
```jsx
import PlausibleProvider from 'next-plausible'
export default function MyApp({ Component, pageProps }) {
return (
({ page: window.location.pathname }),
}}
>
)
}
```
--------------------------------
### Configure next.config.js for v3
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
Standard proxy configuration for next-plausible v3.
```js
// next.config.js
const { withPlausibleProxy } = require('next-plausible')
module.exports = withPlausibleProxy()({})
```
--------------------------------
### Implement PlausibleProvider in _app.js for v4
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
Updated provider initialization using the init prop for v4.
```jsx
// pages/_app.js
import PlausibleProvider from 'next-plausible'
export default function MyApp({ Component, pageProps }) {
return (
)
}
```
--------------------------------
### Configure Proxy for Self-Hosted Plausible
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
For self-hosted Plausible instances, pass your instance's script URL as the `src` option. The proxy forwards requests to your server instead of plausible.io.
```javascript
// next.config.js - Self-hosted Plausible
const { withPlausibleProxy } = require('next-plausible')
module.exports = withPlausibleProxy({
src: 'https://plausible.yourcompany.com/js/pa-XXXXX.js',
})({})
```
--------------------------------
### Configure Proxy with basePath
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
When using Next.js `basePath`, `withPlausibleProxy` automatically prepends the base path to proxy URLs. No need to include it in `scriptPath` or `apiPath`.
```javascript
// next.config.js - Proxy with basePath
const { withPlausibleProxy } = require('next-plausible')
module.exports = withPlausibleProxy({
src: 'https://plausible.io/js/pa-XXXXX.js',
})({
basePath: '/app', // Script will be available at /app/js/script.js
})
```
--------------------------------
### Configure next.config.js for v4
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
Updated proxy configuration for v4 requiring a custom script source.
```js
// next.config.js
const { withPlausibleProxy } = require('next-plausible')
module.exports = withPlausibleProxy({
src: 'https://plausible.io/js/pa-XXXXX.js',
})({})
```
--------------------------------
### Configure Plausible Proxy in next.config.js
Source: https://github.com/4lejandrito/next-plausible/blob/master/README.md
Wraps the Next.js configuration to enable script proxying, which helps bypass adblockers.
```js
const { withPlausibleProxy } = require('next-plausible')
module.exports = withPlausibleProxy({
src: 'https://plausible.io/js/pa-XXXXX.js',
})({
// ...your next js config, if any
// Important! it is mandatory to pass a config object, even if empty
})
```
```js
const { withPlausibleProxy } = require('next-plausible')
module.exports = withPlausibleProxy({
src: 'https://plausible.io/js/pa-XXXXX.js',
scriptPath: '/yourpath/script.js',
apiPath: '/yourpath/api/event',
})({
// ...your next js config, if any
// Important! it is mandatory to pass a config object, even if empty
})
```
--------------------------------
### Configure Plausible proxy in next.config.js
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Wrap the Next.js configuration to proxy analytics requests through your own domain.
```js
// next.config.js - Basic proxy setup
const { withPlausibleProxy } = require('next-plausible')
module.exports = withPlausibleProxy({
src: 'https://plausible.io/js/pa-XXXXX.js',
})({
// Your existing Next.js config
reactStrictMode: true,
images: {
domains: ['example.com'],
},
})
```
```js
// next.config.js - Custom proxy paths
const { withPlausibleProxy } = require('next-plausible')
module.exports = withPlausibleProxy({
src: 'https://plausible.io/js/pa-XXXXX.js',
scriptPath: '/stats/tracker.js', // Custom script path
apiPath: '/stats/collect', // Custom API path
})({
// Your Next.js config
})
```
--------------------------------
### Include PlausibleProvider in _app.js
Source: https://github.com/4lejandrito/next-plausible/blob/master/README.md
Wrap your application with PlausibleProvider at the top level in `_app.js` to enable Plausible analytics for your entire Next.js app. Ensure you use your site-specific script URL.
```jsx
// pages/_app.js
import PlausibleProvider from 'next-plausible'
export default function MyApp({ Component, pageProps }) {
return (
)
}
```
--------------------------------
### Update PlausibleProvider feature flags to init object
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
Boolean feature props like `trackLocalhost`, `manualPageviews`, and `hash` are replaced by an `init` object passed to `plausible.init()`. Configure options like `captureOnLocalhost`, `autoCapturePageviews`, `hashBasedRouting`, and `fileDownloads` within this object.
```diff
```
--------------------------------
### Include PlausibleProvider in App Directory Layout
Source: https://github.com/4lejandrito/next-plausible/blob/master/README.md
For Next.js applications using the app directory, integrate `PlausibleProvider` within the root layout file (`app/layout.js`) to ensure analytics are available across your app.
```jsx
// app/layout.js
import PlausibleProvider from 'next-plausible'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
--------------------------------
### Track ecommerce revenue with usePlausible
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Include revenue data in events by providing currency and amount fields.
```jsx
// Ecommerce revenue tracking
import { usePlausible } from 'next-plausible'
export default function CheckoutButton({ cartTotal, currency }) {
const plausible = usePlausible()
const handlePurchase = () => {
plausible('Purchase', {
props: {
productId: 'SKU-12345',
quantity: 3,
},
revenue: {
currency: 'USD', // ISO 4217 currency code
amount: 99.99,
},
})
}
return
}
```
--------------------------------
### Update PlausibleProvider pageviewProps to init.customProperties
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
The `pageviewProps` prop is replaced by `init.customProperties`. This can be a static object or a self-contained function that receives the event name.
```diff
-
+
```
```jsx
({
author: 'Alice',
}),
}}
/>
```
--------------------------------
### Update withPlausibleProxy path options
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
The `subdirectory` and `scriptName` options are replaced by `scriptPath` and `apiPath`, which directly set the full local paths for the script and API endpoints.
```diff
module.exports = withPlausibleProxy({
+ src: 'https://plausible.io/js/pa-XXXXX.js',
- subdirectory: 'proxy',
- scriptName: 'myscript',
+ scriptPath: '/proxy/myscript.js',
+ apiPath: '/proxy/api/event',
})({ /* ... */ })
```
--------------------------------
### Update withPlausibleProxy customDomain to src
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
The `customDomain` option for `withPlausibleProxy` is removed. Provide your custom domain's script URL directly using the `src` option.
```diff
module.exports = withPlausibleProxy({
- customDomain: 'https://stats.example.com',
+ src: 'https://stats.example.com/js/pa-XXXXX.js',
})({ /* ... */ })
```
--------------------------------
### Include PlausibleProvider for a Single Page
Source: https://github.com/4lejandrito/next-plausible/blob/master/README.md
To enable Plausible analytics only on a specific page, wrap that page component with `PlausibleProvider`. This is useful for selectively tracking analytics.
```jsx
// pages/home.js
import PlausibleProvider from 'next-plausible'
export default Home() {
return (
My Site
{/* ... */}
)
}
```
--------------------------------
### PlausibleProvider requires no props when using proxy
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
When `withPlausibleProxy` is active, the `src` prop is automatically injected into `PlausibleProvider`, so no props are required for the provider itself.
```jsx
...
```
--------------------------------
### Update PlausibleProvider customDomain to src
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
The `customDomain` prop is removed. Instead, provide the custom domain's script URL directly to the `src` prop.
```diff
-
+
```
--------------------------------
### Update withPlausibleProxy to require src
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
The `withPlausibleProxy` higher-order component now requires the `src` option to specify where to forward requests. This should be the same script URL used in `PlausibleProvider`.
```diff
- module.exports = withPlausibleProxy()({
+ module.exports = withPlausibleProxy({
+ src: 'https://plausible.io/js/pa-XXXXX.js',
+ })({
// ...next config
})
```
--------------------------------
### Remove PlausibleProvider trackOutboundLinks, taggedEvents, revenue props
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
Features like `trackOutboundLinks`, `taggedEvents`, and `revenue` are now bundled into the Plausible v2 script. Remove these props, and they will function automatically when using a v2 script URL.
```diff
```
--------------------------------
### Update PlausibleProvider selfHosted to src
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
The `selfHosted` prop is removed. For self-hosted instances, provide the instance's script URL directly to the `src` prop.
```diff
-
+
```
--------------------------------
### Configure PlausibleProvider with SRI and scriptProps
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Enhance security by using Subresource Integrity (SRI) with the 'integrity' prop. The 'scriptProps' prop allows overriding script element attributes, such as CSP nonces or custom data attributes.
```jsx
import PlausibleProvider from 'next-plausible'
export default function Home() {
return (
)
}
```
--------------------------------
### PlausibleProvider Component
Source: https://github.com/4lejandrito/next-plausible/blob/master/README.md
The PlausibleProvider component is used to wrap your application or specific pages to enable Plausible Analytics tracking.
```APIDOC
## PlausibleProvider Component
### Description
Wraps the application or page to inject the Plausible Analytics script. It must be placed at the top level of the application or the specific page component.
### Props
- **src** (string) - Optional - The site-specific script URL from your Plausible dashboard.
- **init** (object) - Optional - Options passed to plausible.init().
- **enabled** (boolean) - Optional - Explicitly decide whether or not to render the script.
- **integrity** (string) - Optional - Subresource integrity attribute for the script tag.
- **scriptProps** (object) - Optional - Override props passed to the script element.
### init Options
- **customProperties** (object/function) - Optional - Set custom properties for tracking.
- **endpoint** (string) - Optional - Set a custom tracking endpoint.
- **fileDownloads** (object) - Optional - Track specific file types as downloads.
- **hashBasedRouting** (boolean) - Optional - Enable hash-based routing tracking.
- **autoCapturePageviews** (boolean) - Optional - Disable automatic pageview events.
- **captureOnLocalhost** (boolean) - Optional - Enable tracking on localhost.
```
--------------------------------
### Update PlausibleProvider domain prop to src
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
Replace the `domain` prop with `src`, which takes the full site-specific script URL from your Plausible dashboard. This change is necessary for Plausible script v2.
```diff
-
+
```
--------------------------------
### Track virtual pages with custom URLs
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Use the 'u' option to override the tracked URL, useful for single-page application navigation.
```jsx
// Custom URL tracking for virtual pages
import { usePlausible } from 'next-plausible'
export default function MultiStepForm({ step }) {
const plausible = usePlausible()
const trackStep = (stepNumber) => {
plausible('FormStep', {
props: { step: stepNumber },
u: `/form/step-${stepNumber}`, // Track virtual page
})
}
return (
)
}
```
--------------------------------
### Control PlausibleProvider Rendering with 'enabled' Prop
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Use the 'enabled' prop to explicitly control whether the analytics script is rendered. By default, it only loads in production environments. This allows for custom logic to enable or disable tracking.
```jsx
import PlausibleProvider from 'next-plausible'
export default function MyApp({ Component, pageProps }) {
return (
)
}
```
--------------------------------
### Use PlausibleProvider Component
Source: https://github.com/4lejandrito/next-plausible/blob/master/README.md
The provider component used in the application tree when the proxy is active.
```jsx
...
```
--------------------------------
### Track custom events with usePlausible
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Use the usePlausible hook to send custom events with optional properties to Plausible.
```jsx
// Tracking custom events with usePlausible
import { usePlausible } from 'next-plausible'
export default function SignupButton() {
const plausible = usePlausible()
const handleSignup = () => {
// Simple event tracking
plausible('Signup')
// Event with custom properties
plausible('Signup', {
props: {
plan: 'premium',
source: 'homepage',
},
})
}
return
}
```
--------------------------------
### Send Custom Events with usePlausible
Source: https://github.com/4lejandrito/next-plausible/blob/master/README.md
Utilizes the usePlausible hook to trigger custom events, optionally including props.
```jsx
import { usePlausible } from 'next-plausible'
export default function PlausibleButton() {
const plausible = usePlausible()
return (
<>
)
}
```
--------------------------------
### Strip Cookies via Middleware
Source: https://github.com/4lejandrito/next-plausible/blob/master/README.md
Middleware configuration to prevent tracking requests from forwarding cookies to the Plausible endpoint.
```js
import { NextResponse } from 'next/server'
export function middleware(request) {
const requestHeaders = new Headers(request.headers)
requestHeaders.set('cookie', '')
return NextResponse.next({
request: {
headers: requestHeaders,
},
})
}
export const config = {
matcher: '/proxy/api/event',
}
```
--------------------------------
### Implement type-safe event tracking with TypeScript
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Define event types to enforce property requirements and catch errors at compile time.
```tsx
// Type-safe event tracking with TypeScript
import { usePlausible } from 'next-plausible'
// Define your event types with their required props
type MyEvents = {
Signup: { plan: string; referrer: string }
Purchase: { productId: string; quantity: number }
Download: { fileType: string }
ContactForm: never // Event with no props
}
export default function TrackedComponent() {
const plausible = usePlausible()
return (
<>
{/* TypeScript ensures correct props are passed */}
{/* Events with 'never' type don't require props */}
)
}
```
--------------------------------
### Remove PlausibleProvider exclude prop
Source: https://github.com/4lejandrito/next-plausible/blob/master/MIGRATION.md
Page exclusion is now managed within your Plausible dashboard settings, not through the `exclude` prop in `PlausibleProvider`.
```diff
```
--------------------------------
### Strip Cookies from Proxy Requests using Middleware
Source: https://context7.com/4lejandrito/next-plausible/llms.txt
Use Next.js middleware to strip cookies from analytics requests for privacy compliance when using the proxy. This prevents forwarding your domain's cookies to Plausible.
```javascript
// middleware.js - Strip cookies from proxy requests
import { NextResponse } from 'next/server'
export function middleware(request) {
const requestHeaders = new Headers(request.headers)
requestHeaders.set('cookie', '')
return NextResponse.next({
request: {
headers: requestHeaders,
},
})
}
export const config = {
matcher: '/api/event', // Match your proxy API path
}
```
--------------------------------
### Type Check Custom Events with TypeScript
Source: https://github.com/4lejandrito/next-plausible/blob/master/README.md
Defines event types to ensure only valid events and props are sent via the hook.
```tsx
import { usePlausible } from 'next-plausible'
type MyEvents = {
event1: { prop1: string }
event2: { prop2: string }
event3: never
}
const plausible = usePlausible()
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.