@djoppa/leadhub-nextjs
v1.0.0
Published
Next.js integration for Leadhub tracking
Maintainers
djoppaReadme
@leadhub/nextjs
Next.js integration pre Leadhub tracking.
Inštalácia
npm install @leadhub/nextjs
# alebo
yarn add @leadhub/nextjsZákladné použitie
1. Pridanie scriptu do _document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { LeadhubScript } from '@leadhub/nextjs';
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<LeadhubScript trackingId="YOUR_TRACKING_ID" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}2. Nastavenie providera v _app.tsx
import type { AppProps } from 'next/app';
import { LeadhubProvider } from '@leadhub/nextjs';
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<LeadhubProvider config={{ trackingId: 'YOUR_TRACKING_ID' }}>
<Component {...pageProps} />
</LeadhubProvider>
);
}3. Automatické sledovanie route zmien
import { useRouterPageview } from '@leadhub/nextjs';
export default function MyApp({ Component, pageProps }: AppProps) {
useRouterPageview(); // Automaticky sleduje zmeny route
return (
<LeadhubProvider config={{ trackingId: 'YOUR_TRACKING_ID' }}>
<Component {...pageProps} />
</LeadhubProvider>
);
}4. Tracking v komponentoch
import { useTracking } from '@leadhub/nextjs';
export default function ProductPage({ product }) {
const { trackViewContent, trackPurchase } = useTracking();
useEffect(() => {
// Sledovanie zobrazenia produktu
trackViewContent({
products: [{ product_id: product.id }]
});
}, [product]);
const handlePurchase = () => {
trackPurchase({
email: '[email protected]',
value: product.price,
currency: 'EUR',
products: [{
product_id: product.id,
quantity: 1,
value: product.price,
currency: 'EUR'
}]
});
};
return (
<div>
<h1>{product.name}</h1>
<button onClick={handlePurchase}>Kúpiť</button>
</div>
);
}