เพิ่ม Google analytics ใน Nextjs

Arnon Kijlerdphon -

สำหรับใครที่ต้องการให้ Nextjs ของเราติด Google analytics (GA) เพื่อเก็บข้อมูลสถิติผู้เข้าใช้งานเว็บ สามารถทำได้ดังนี้

Get the GA key

ให้ไปสร้าง account ที่ https://analytics.google.com/ จากนั้นเราได้เลข G-XXXXXXXXXX เก็บเอาไว้

Add to Environment

มาที่ Nextjs ของเราให้เพิ่ม .env ดังนี้ NEXT_PUBLIC_GOOGLE_ANALYTICS= 'G-xxxxxx'

Load Analytics

แก้ไขไฟล์ __app.tsx เพิ่ม 2 script 

<Script
      strategy="lazyOnload"
      src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
    />

    <Script strategy="lazyOnload">
      {`
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
        page_path: window.location.pathname,
        });
      `}
    </Script>

ตามตัวอย่างนี้

import { AppProps } from 'next/app';
import Head from 'next/head';
import React, { useEffect } from 'react';
import './styles.css';
import Script from 'next/script';
import Router from 'next/router';


function CustomApp({ Component, pageProps, router }: AppProps) {

    return (
        <>
            <Script strategy="lazyOnload" src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`} />

            <Script strategy="lazyOnload">
                {`
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
                    page_path: window.location.pathname,
                    });
                `}
            </Script>
            
            
            <Head>
                <title>Welcome!</title>
                <meta name="viewport" content="initial-scale=1, width=device-width" />
            </Head>

            <Component {...pageProps} />
        </>
    );
}


export default CustomApp;

Check if Analytics is Enabled

ตรวจสอบว่ามีการใช้งานได้จริง โดยการเปิด console ในบราวเซอร์แล้วพิมพ์ dataLayer

Check console

ถ้าขึ้น undefined แสดงว่ามีอะไรผิดแน่นอน ลองกลับไปทำใหม่ตามข้างบน ถ้ามี data แบบในรูปขึ้นมาแสดงว่าโอเค ใช้งานได้แล้ว

Check the Analytics Dashboard

กลับไปที่ GA dashboard ดูที่ realtime จะพบกับข้อมูลที่เข้ามา

Realtime

เสร็จแล้วเพียงเท่านี้เราก็สามารถรู้ได้แล้วว่าใครเข้ามาในเว็บไซต์เราบ้าง :)

Happy Coding...

ตัวอย่างโค็ด: https://github.com/Mohammad-Faisal/nextjs-google-analytics-demo