How to Add Facebook Pixel to Your Next.js

Written by

in

การติดตามการโต้ตอบของผู้ใช้เป็นสิ่งสำคัญในการทำความเข้าใจประสิทธิภาพของเว็บไซต์ Facebook Pixel ช่วยให้เราสามารถตรวจสอบการเข้าชมเว็บ ปรับแต่งโฆษณา และกำหนดกลุ่มเป้าหมายใหม่ได้ นี่คือคำแนะนำสั้นๆ ในการนำ Facebook Pixel ไปใส่ในโปรเจกต์ Next.js

Install Facebook Pixel

เริ่มจาก install package:

npm install react-facebook-pixel

Create a Pixel Tracker Component

// components/PixelTracker.ts
import { useEffect } from "react";
import ReactPixel from "react-facebook-pixel";

const PixelTracker = () => {
  useEffect(() => {
    const pixelId = "YOUR_PIXEL_ID";
    ReactPixel.init(pixelId);
    ReactPixel.pageView();
  }, []);
  return null;
};
export default PixelTracker;

ใส่ Tracker เช้าไปใน Layout

// app/layout.tsx
import dynamic from "next/dynamic";

const PixelTracker = dynamic(() => import("../components/PixelTracker"), { ssr: false });
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        {/* Meta Pixel Code */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?                         
              n.callMethod.apply(n,arguments):n.queue.push   
              (arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!
              0;n.version='2.0';n.queue=[];t=b.createElement(e);
              t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,
              'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', 'YOUR_PIXEL_ID');
              fbq('track', 'PageView');
            `,
          }}
        />
        <noscript>
          <img
            height="1"
            width="1"
            style={{ display: "none" }}
            src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=
            PageView&noscript=1"/>
        </noscript>
        {/* End Meta Pixel Code */}
      </head>
      <body>
        <PixelTracker />
        {children}
      </body>
    </html>
  );
}

การทำแบบนี้จะช่วยให้แน่ใจว่าโค้ดตัวติดตามและเมตาพิกเซลถูกฝังอยู่ในแอปพลิเคชันของคุณอย่างถูกต้อง

Pixel ID ถูกใช้ตามตัวอย่าง ทั้งในส่วนของคอมโพเนนต์ PixelTracker และ<Head> meta ก็ใช้ Pixel ID ตามนี้

เพื่อตรวจสอบว่า Facebook Pixel ทำงานปกติและ Pixel ID ถูกติดตั้งอย่างถูกต้อง ให้ทำตามขั้นตอนนี้เพื่อเช็คในแท็บ Network ของเบราว์เซอร์

เปิดเว็บไซต์ในเบราว์เซอร์ (เช่น Chrome)
คลิกขวาที่ไหนก็ได้บนหน้าเว็บ แล้วเลือก “ตรวจสอบ” (Inspect)
ไปที่แท็บ “เครือข่าย” (Network) ใน Developer Tools

รีโหลด ในขณะที่อยู่ใน Developer Tools
ในแท็บ Network ให้พิมพ์ Your_Pixel_ID ในช่องค้นหาเพื่อกรองผลลัพธ์

Comments

Leave a Reply Cancel reply

More posts

Hi 👋, how can we help?