เปิดใช้งาน Web Analytics บน Vercel

เกริ่น

ส่วนใหญ่ถ้าเราโฮสใน Vercel เรามักจะติดตั้ง Google Analytics แต่การ Config ก็จะยากกว่านิดหน่อย ซึ่งจำเป็นการสำหรับนักการตลาดออนไลน์ จำเป็นต้องใช้การวิเคราะห์พวกนี้ หรือแม้แต่ webmaster เป็นส่วนหนึ่งในงานไปแล้ว หากเราต้องการ Native ในตัวโฮสจริงๆ แนะนำ Web Analytics ของ Vercel โดยตรง เพราะเขาแคลมว่าใช้พื้นที่เล็กกว่า Google Analytics ดังนั้นเรามาดูจุดเด่นกันดีกว่า

จุดเด่น

ประหยัดพื้นที่บนหน้าเว็บไซต์ ขนาดเล็กกว่า Google Analytics 44 เท่า
ใช้ระบบ hash แทน cookies จากการรับ request โดยตรงจาก server ทำให้เว็บไซต์อื่นไม่สามารถเรียก cookies มาดูได้
ไม่ใช่ third-party script แต่เป็น first-party โดยตรงจากฐานระบบ
hash ทั้งหมดจะโดนลบหลังจากผ่าน 24 ชั่วโมงไปแล้ว

ที่สำคัญที่ผมชอบมากก็คือ การทำ Event Tracking ได้ง่ายกว่าดิม

ขั้นตอนการติดตั้ง

ติดตั้ง package ลงใน Project

npm i @vercel/analytics

เรียก Components ในส่วน layout แนะนำ APP ROUTER ใครใช้อันอื่นแนะนำเปลี่ยนด่วน

import { Analytics } from "@vercel/analytics/react"

จากนั้นนำมาวางไว้ใกล้กับ Component อื่นๆ

import type { AppProps } from 'next/app';
import { Analytics } from '@vercel/analytics/react';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

export default MyApp;

เพียงเท่านี้ก็เสร็จสิ้นเรียบร้อย เพื่อส่องข้อมูลแนะนำ หลังจาก Login ให้เข้าไปที่ tab Analytics เพื่อรับการอัพเดตการใช้งาน

สร้าง Custome Event Tracking

ฟีเจอร์นี้สำหรับคนใช้ Pro กับ Enterprise ทำให้เราสร้าง Event อะไรก็ได้ ตามตัวอย่างด้านล่าง

import va from '@vercel/analytics';

function SignupButton() {
  return (
    <button
      onClick={() => {
        va.track('Signup', {
          location: 'US'
        });
      };
    >
      Sign Up
    </button>
  );
};

อธิบายคือ เรียก va.track ตัวรับข้อมูลตำแหน่งแรก ให้ตั้งชื่ออะไรก็ได้ตามแต่สะดวก เช่น Signup และส่งข้อมูล value

แนะนำลองไปใช้ในโปรเจคของตัวเองดู เพราะช่วยประหยัดเวลา และได้ข้อมูลมาวิเคราะห์ได้ง่ายและรวดเร็วเลยทีเดียว