Google Analytics With Next JS

#javascript #react #typescript

With Next.js you don't have to use any npm packages to add google analytics.

You just add the scripts in<Head> element on your _document.js/tsx or in your Layout.js/tsx file or any pages you want.

Go add your project in Google Analytics and they will give you a gtag code to paste in your <head> tag.

But pasting them directory will give you an Unexpected token error because of using React Framework.

I found a very simple solution in this GitHub issue.

Just wrap the gtag code with dangerouslySetInnerHTML like the code below and that's all.

<script
    async
    src="https://www.googletagmanager.com/gtag/js?id=%your code here%" >
</script>
<script dangerouslySetInnerHTML={
    { __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){window.dataLayer.push(arguments)}
        gtag("js", new Date());
        gtag("config", "<%your code here%>");
    `}
}>
</script>