Google Analytics เป็นเครื่องมือวิเคราะห์เว็บที่ทรงพลัง ซึ่งให้ข้อมูลเชิงลึกที่มีค่าเกี่ยวกับการเข้าชมเว็บไซต์ของคุณและติดตามพฤติกรรมของผู้ใช้ การรวม Google Analytics เข้ากับแอปพลิเคชัน Next.js ของคุณจะช่วยให้คุณสามารถติดตามและวิเคราะห์การโต้ตอบของผู้ใช้ วัดผลประสิทธิภาพของแคมเปญการตลาด และตัดสินใจโดยอิงตามข้อมูล เราจะมาสำรวจขั้นตอนในการตั้งค่า Google Analytics (gtag.js) ในแอปพลิเคชัน Next.js กัน
การตั้งค่าบัญชี Google analytics
- ก่อนอื่น ให้เข้าไปที่ Google Analytics Website และลงชื่อสมัครใช้ด้วยบัญชี Google ของคุณ
- เริ่มต้นการตั้งค่าบัญชี จากนั้นสร้างคุณสมบัติ (property) ใหม่สำหรับแอปพลิเคชัน Next.js ของคุณ และกรอกข้อมูลที่ระบบขอ เมื่อเสร็จสิ้นการตั้งค่า คุณจะถูกนำไปยังหน้าแพลตฟอร์มใหม่สำหรับบัญชีของคุณ
- เลือกแพลตฟอร์มสำหรับโปรเจกต์ของคุณ ในกรณีนี้จะเป็น เว็บ (web)
- กรอก URL ของเว็บไซต์ที่แอปพลิเคชัน Next.js และตั้งชื่อที่ต้องการ จากนั้นคลิกที่ สร้างสตรีม (Create Stream) เพื่อดำเนินการต่อ
- เมื่อสร้างสตรีมคุณสมบัติ (property stream) เรียบร้อยแล้ว คุณจะถูกนำไปยังหน้าเพจที่คล้ายกับด้านล่าง ให้จดหมายเลข Property ID ไว้ โดยควรอยู่ในรูปแบบ G-XXXXXXXXX
Initialize Next.js project
ตั้งค่าโปรเจกต์ Next.js ของคุณตามข้อกำหนดของ https://nextjs.org/
npx create-next-app@latest your-next-app
Environment variables
ใน root directory ของโปรเจกต์ของคุณ ควรจะมีไฟล์ environment (.env) หากยังไม่มี คุณสามารถสร้างไฟล์โดยใช้ชื่อนี้ได้ เพิ่ม Property ID ที่เราคัดลอกไว้ก่อนหน้านี้ลงในไฟล์นี้
NEXT_PUBLIC_GOOGLE_ANALYTICS= 'G-XXXXXXXX'
Create a google analytics Component
สร้างโฟลเดอร์ components หรือโฟลเดอร์อื่นที่คุณต้องการไว้นอกเหนือจากไดเรกทอรี app แต่อยู่ภายในไดเรกทอรีโปรเจกต์ของคุณ โดยควรอยู่ในไดเรกทอรี src เป็นหลัก จากนั้น ในโฟลเดอร์ components ให้สร้างไฟล์ชื่อ GoogleAnalytics.tsx
ในไฟล์ดังกล่าว ให้คัดลอกโค้ดด้านล่างนี้และบันทึกไฟล์
import Script from "next/script";
const GoogleAnalytics = ({ ga_id }: { ga_id: string }) => (
<>
<Script
async
src={`https://www.googletagmanager.com/gtag/js?
id=${ga_id}`}
></Script>
<Script
id="google-analytics"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${ga_id}');
`,
}}
></Script>
</>
);
export default GoogleAnalytics;
Render the component in the Layout file
ในไฟล์ layout.tsx ราก (root) ที่อยู่ในไดเรกทอรี app ให้นำเข้า (import) คอมโพเนนต์ GoogleAnalytics ของคุณดังนี้:
import GoogleAnalytics from "~/components/GoogleAnalytics";
จากนั้น คุณสามารถแก้ไขโค้ดของคุณให้ตรงกับรูปแบบด้านล่างนี้ได้
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS && (
<GoogleAnalytics ga_id=
{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
)}
// ... your other code content here.
</body>
</html>
);
}
Run your app
บนเทอร์มินัล ให้รันคำสั่งต่อไปนี้เพื่อเริ่มแอปพลิเคชัน
npm run dev
On the browser, navigate to your next app live url, most likely it will be http://localhost:3000
Open the browser console.
On the console, type datalayer. If you see an output similar to the one below then, Yaay 🎉 you did it!
บนเบราว์เซอร์ ให้ไปที่ URL ของแอป Next.js
http://localhost:3000
เปิดคอนโซลของเบราว์เซอร์
ในคอนโซล ให้พิมพ์ datalayer หากคุณเห็นผลลัพธ์ที่คล้ายกับด้านล่างนี้ แล้วล่ะก็ ยินดีด้วย 🎉 คุณทำสำเร็จแล้ว!
Host your app
If you are planning to host your site, be sure to add your property in your hosting service project settings. You should find the environment variables settings and add you ID with the same keyname as used in the project .env.local file.
You can now go to the analytics dashboard and click on the live button, where you will see the information about the application in real-time!
Leave a Reply