Web analytics with Ackee on Vercel
Bootstrapping SaaS business from Zero to Profitable is hard. You have to pay for every single must-have service like web analytics before earning a buck.
Wait, maybe you will think, why not using Google Analytics? It's free. But let face it, if you're not paying for it. You're the product of Google.
Today, I will show you how to self-hosted Ackee (Open-source web analytics) on Vercel for tracking your nextjs app.
- Setup MongoDB Altas
As Ackee requires MongoDB for storing the analytic data, let go to MongoDB Altas site and create MongoDB from there. After that, record down your connection string. We will use it to setup ackee on Vercel later.
- Deploy Ackee to Vercel
When prompted to select a directory, select the root directory.
- Configure Ackee
- Set the build command:
yarn build - Set the output directory:
dist - Set environment variables:
ACKEE_USERNAME,ACKEE_PASSWORD,ACKEE_MONGODBandACKEE_ALLOW_ORIGIN
- Login to Ackee
- Go to the newly created site and log in with your user and password specified from the environment before.
- Go to Settings > New domain and grab the embed code.
- Integrate to Nextjs
Install npm package useAckee in your nextjs app
yarn add use-ackeeInside _document.tsx, put the embed code inside head tag.
<Head>
...
<script
async
src="https://analytics.your.app/tracker.js"
data-ackee-server="https://analytics.your.app"
data-ackee-domain-id="your-domain-id">
</script>
</Head>Inside _app.tsx, add the following useEffect hook
function App ({ Component, pageProps }: AppProps) {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
useAckee(url, {
server: 'https://your.app',
domainId: 'your-domain-id'
}, {
detailed: false,
ignoreLocalhost: true,
ignoreOwnVisits: true
})
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
}Replace the server and domain id with your setting.
After this, you now have free web analytics without worry about privacy concerns.
More Stories
Local Development with Docker Compose
As the JS developer, your machine may already have many dev tools like nodejs, nvm, PostgreSQL, and so on.
Get the best Next.js boilerplate at the lowest price ever!
Today, we offer a 90% discount for the best Next.js boilerplate at the lowest price ever.