NEXTJS添加Google Analytics

2020-09-14 16:53:21

首先申请Google Analytics会获取到一个全局网站代码 (gtag.js) 如下例子(注意，每个人的 全局网站代码 (gtag.js) 都不完全一样，需要将其中部分参数替换成自己从Google Analytics获取到的参数)

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-000000000-0');
</script>

在nextjs的pages目录下创建以 "_document.js" 命名的文件，里面添加如下内容

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <Html>
                <Head>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

在<Head>标签内之间填入Google Analytics给的其中第一个<script>标签的内容

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-0"></script>

另一个<script>标签的内容则需要使用react的dangerouslySetInnerHTML,具体使用方法如下

<script dangerouslySetInnerHTML={{
                        __html:`
                        window.dataLayer = window.dataLayer || [];
                        function gtag(){dataLayer.push(arguments);}
                        gtag('js', new Date());
                      
                        gtag('config', 'UA-000000000-0');
                        `,                        
                    }} />

将上面<script>标签的内容也粘贴进<Head>标签内即可。

最终 "_document.js" 文件的代码例子如下

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <Html>
                <Head>
                    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-0"></script>
                    <script dangerouslySetInnerHTML={{
                        __html:`
                        window.dataLayer = window.dataLayer || [];
                        function gtag(){dataLayer.push(arguments);}
                        gtag('js', new Date());
                      
                        gtag('config', 'UA-000000000-0');
                        `,                        
                    }} />

                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

之后就只剩下部署到服务器上，给Google进行验证即可。