Cara memasang facebook Pixel atau Meta Pixel di Next JS

pada tutorial kali ini saya ingin membagikan cara mudah memasang Facebook Pixel atau Meta Pixel di dalam React JS atau Next JS.

Apa itu Facebook Pixel?

Facebook Pixel atau yang sekarang namanya adalah Meta pixel karena platform Facebook sekarang di bawah perusahaan dengan nama Meta adalah kode yang biasanya di pasangkan di dalam website yang bertujuan untuk berinteraksi dengan Iklan yang ada di dalam Facebook atau Meta.

Apa Kegunaan Pixel?

Dengan Pixel kita bisa mengetahui halaman apa yang sering di kunjungi dan apa saja yang di lakukan visitor terhadap website kita sehingga kita bisa menganalisa terkait dengan website yang kita punya.

Dengan fitur iklan berbayar yang ada di Facebook atau Meta kita bisa menjangkau banyak orang yang menggunakan platform dari Meta yaitu Facebook dan Instagram dan dengan adanya Pixel kita bisa mengetahui siapa saja yang mengunjungi website kita dan melakukan apa saja di dalam website kita. bisa di bilang Pixel ini cara kerjanya seperti Google Analytic namun memiliki lebih banyak fungsi khususnya untuk iklan di dalam platform Meta yaitu Facebook dan Instagram yang memiliki banyak pengguna aktif setiap harinya.

Persiapan Pixel

Pertama yang harus kita lakukan adalah membuat Pixel dengan masuk ke dalam Facebook dan menu Pengelola Peristiwa

Pilih Web

pada contoh diatas saya tidak bisa memilih web karena hanya diperbolehkan penggunakan 1 akun untuk Pixel

Ikuti dengan memberikan Nama Pixel sampai dengan memasukan URL dan mendapatkan Code Pixel

Cara menggunakan Pixel di Next JS

Pertama pastikan kita sudah menginstall Next JS terlebih dahulu atau baca tutorial Cara Install Next JS

Kemudian install Plugin menggunakan NPM

npm i react-facebook-pixel

atau

yarn add react-facebook-pixel

kemudian buka file _app.tsx

tambahkan


const router = useRouter();

useEffect(() => {
    import('react-facebook-pixel')
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init('FACEBOOK_PIXEL_ID')
        ReactPixel.pageView()

        router.events.on('routeChangeComplete', () => {
          ReactPixel.pageView()
        })
      })
  }, [router.events])

ganti FACEBOOK_PIXEL_ID dengan kode Pixel yang di dapatkan dari Facebook Pixel yang sudah kita buat.

Selamat, kita sudah berhasil menambahkan Pixel ke dalam Next JS

Sekarang kita bisa menggunaakan Pixel untuk memantau website kita

Agik Setiawan