AWolf81/Mixpanel and Cookiebot Setup README.md

## Mixpanel and Cookiebot Setup README.md

      
    Raw
  

              Mixpanel and Cookiebot Setup README.md
            
          
    Usage

Installation

Install analytics and @analytics/mixpanel with
npm install analytics @analytics/mixpanel
Add tokens to your .env file

# Mixpanel project token (https://eu.mixpanel.com/project)
NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=<your-mixpanel-token>

# Cookiebot id (https://admin.cookiebot.com/)
NEXT_PUBLIC_COOKIEBOT_ID=<your-cookiebot-token>

Also create a .env.example file with the above tokens without the token and ensure that .env is not tracked - double check at next commit. This is useful for a fresh cloned repository.
Add tokens to your production deploy

If your using Netlify head to your config https://app.netlify.com/sites/<your-site>/configuration/env and add the tokens, so they're available at the next deploy.
Add the hook to your layout

In your layout.tsx or providers.tsx (if you're using a provider component). Add the Hook and render the Consent script.
// ...other imports ...
import { useAnalytics } from '../utils/analytics' // see code from the Gist

export default function RootLayout({children}:{children: React.ReactNode}) {
  const { ConsentComponent } = useAnalytics();
  return (
    <html>
      <body>
        <div>
          { /* ... other components ... */ }
          {children}        
        </div>
        <ConsentComponent />
      </body>
    </html>
  )
}
UseAnalytics is also returning analytics object that could be used to pass to AppContext and used in your components.
Omitted in the example.
Docs for analytics api can be found here.
Why is the onload needed in anayltics.tsx?

Without it the global window.Cookiebot was undefined as the script run before the cookiebot script is loaded. With the onload it is delaying the consent check until the Cookiebot global is available and the check is working as expected.
Configure Cookiebot Domain

Go to https://admin.cookiebot.com/domain-groups/ and add your production domain. e.g. ydecide.app
I haven't tested to add localhost and also wildcards are unfortunately not supported.
Test your deployed page


On first load you should see the consent modal
Consent everything and open network tab of your browser - look for xhr requests with track for Mixpanel tracking
Disable consent & reload page

Things to improve

Very first page is not tracked because the consent mechanism is only working on page load.
Could be improved by adding an event listener CookiebotOnAccept with window.addEventListener('CookiebotOnAccept', function (e) {}).
This would also require to add useState for the consent state.
Maybe I'll add this later.

  
## src\app\utils\analytics.tsx
// License MIT
import React from 'react'
import Analytics from 'analytics'
import { Router } from 'next/router'
import mixpanelPlugin from '@analytics/mixpanel'
import Script from 'next/script'

const isProd = process.env.NODE_ENV === 'production'

const analytics = Analytics({
  app: 'ydecide-web',
  plugins: [
    mixpanelPlugin({
      token: process.env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN
    })
  ]
})

export const useAnalytics = () => {
  const [cookiebotLoaded, setLoaded] = React.useState(false)

  const handleScriptLoad = () => {
    setLoaded(true);
  }

  React.useEffect(() => {
    // Wait for cookiebotScript loaded
    if (!cookiebotLoaded) {
      return
    }
    // We have marketing consent, consent in general and user has not set browser's doNotTrack setting
    const consent = window?.Cookiebot?.consented &&
      window?.Cookiebot?.consent?.marketing &&
      !window?.Cookiebot?.doNotTrack

    // Fire initial page view
    if (isProd && consent) {
      analytics.page()
    }
    // Fire page views on routing
    const handleRouteChange = (/* url:string */) => {
      if (isProd && consent) {
        // We need to wrap it in a rAF to ensure the correct data is sent to Segment
        // https://github.com/zeit/next.js/issues/6025
        requestAnimationFrame(() => {
          analytics.page()
        })
      }
    }

    Router.events.on('routeChangeComplete', handleRouteChange)
    return () => Router.events.off('routeChangeComplete', handleRouteChange)
  }, [ cookiebotLoaded ])

  return {
    analytics,
    ConsentComponent: () => process.env.NEXT_PUBLIC_COOKIEBOT_ID && <Script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid={process.env.NEXT_PUBLIC_COOKIEBOT_ID}  data-blockingmode="auto" type="text/javascript" onLoad={handleScriptLoad}/>
  }
}
	// License MIT
	import React from 'react'
	import Analytics from 'analytics'
	import { Router } from 'next/router'
	import mixpanelPlugin from '@analytics/mixpanel'
	import Script from 'next/script'

	const isProd = process.env.NODE_ENV === 'production'

	const analytics = Analytics({
	app: 'ydecide-web',
	plugins: [
	mixpanelPlugin({
	token: process.env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN
	})
	]
	})

	export const useAnalytics = () => {
	const [cookiebotLoaded, setLoaded] = React.useState(false)

	const handleScriptLoad = () => {
	setLoaded(true);
	}

	React.useEffect(() => {
	// Wait for cookiebotScript loaded
	if (!cookiebotLoaded) {
	return
	}
	// We have marketing consent, consent in general and user has not set browser's doNotTrack setting
	const consent = window?.Cookiebot?.consented &&
	window?.Cookiebot?.consent?.marketing &&
	!window?.Cookiebot?.doNotTrack

	// Fire initial page view
	if (isProd && consent) {
	analytics.page()
	}
	// Fire page views on routing
	const handleRouteChange = (/* url:string */) => {
	if (isProd && consent) {
	// We need to wrap it in a rAF to ensure the correct data is sent to Segment
	// https://github.com/zeit/next.js/issues/6025
	requestAnimationFrame(() => {
	analytics.page()
	})
	}
	}

	Router.events.on('routeChangeComplete', handleRouteChange)
	return () => Router.events.off('routeChangeComplete', handleRouteChange)
	}, [ cookiebotLoaded ])

	return {
	analytics,
	ConsentComponent: () => process.env.NEXT_PUBLIC_COOKIEBOT_ID && <Script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid={process.env.NEXT_PUBLIC_COOKIEBOT_ID} data-blockingmode="auto" type="text/javascript" onLoad={handleScriptLoad}/>
	}
	}