Chiffre analytics integration for Next.js
$ yarn add nextjs-chiffre
or
$ npm install nextjs-chiffreIn your _document.(jsx|tsx), add the <ChiffreAnalytics> component at the end
of <body>:
import Document, { Html, Main, NextScript } from 'next/document'
import { ChiffreAnalytics } from 'next-chiffre-analytics'
export default class MyDocument extends Document {
static async getInitialProps(ctx: any) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en">
<body>
<Main />
<NextScript />
{/* ------------------------------------*/}
<ChiffreAnalytics
projectID="yourProjectID"
publicKey="pk.yourProjectPublicKey"
/>
{/* ----------------------------------- */}
</body>
</Html>
)
}
}If you wish to use environment variables to pass the project ID and public key,
you must prefix them with NEXT_PUBLIC_ to make them available to the front-end
code:
<ChiffreAnalytics
projectID={process.env.NEXT_PUBLIC_CHIFFRE_PROJECT_ID}
publicKey={process.env.NEXT_PUBLIC_CHIFFRE_PUBLIC_KEY}
/>The only two arguments required are:
projectID: Your project ID can be found in the project url. Eg:https://chiffre.io/projects/yourProjectID.publicKey: Your public key can be found in the project settings, and looks likepk.{43 base64 characters}
You can disable the <noscript> behaviour, that logs anonymous visits for users
with JavaScript disabled:
<ChiffreAnalytics projectID="..." publicKey="..." disableNoJSAnonymousVisits />You can declare the allowed domains where analytics can be sent from, using an array of strings or regexes:
<ChiffreAnalytics
projectID="..."
publicKey="..."
allowedDomains={[
'my-project.io', // Production domain
/^my-project-.+\.vercel\.app$/ // Preview deployments on Vercel
]}
/>You can set paths to be ignored by page tracking (eg: private pages):
<ChiffreAnalytics
projectID="..."
publicKey="..."
ignorePaths={['/admin/', '/private/']}
/>If the path of the URL starts with one of the values listed, no events will be sent.
MIT - Made with ❤️ by François Best.