📊
Mengintegrasikan Nuxt.js dengan Facebook Pixel

Inisiasi Facebook Pixel

  1. Pergi ke halaman Events Manager
  1. Di sidebar sebelah kiri,
    1. Klik Tombol Plus Warna Hijau
    2. Connect Data Sources
    3. Web → Get Started
    4. Selesaikan tahap ini sampai akhir
  1. Kalian bisa mengetahui ID Pixel kalian di lingkaran merah, hal ini akan digunakan di web kita

Install nuxt-facebook-pixel-module

  1. Di terminal install package tersebut
npm i nuxt-facebook-pixel-module

2. Tambahkan ke konfigurasi Nuxt di nuxt.config.js

// nuxt.config.js

export default {
  ...
  
	modules: [
		...  
	  'nuxt-facebook-pixel-module'
  ],

  facebook: {
    track: 'PageView', //
    pixelId: 'ID_PIXEL_MU', // Berupa angka, kayak 124321037541639
    autoPageView: true, // 
    disabled: false // Artinya tracking otomatis dimulai waktu web diakses
  },

	...
}

Untuk petunjuk penggunaan lebih lanjut misalnya opsi apa saja yang ada bisa dibaca di repositorinya

Lakukan Tracking

Standard Event

Artinya event yang sudah didefinisikan oleh Facebook itu sendiri, misalnya PageView, Purchase, dan Search

List lengkapnya bisa dilihat disini

// Sintaksnya

$fb.track('NAMA_EVENT', { namaParameter: 'LIHAT_LINK' })

Untuk melakukan tracking standard event ini bisa menggunakan kode berikut, misalnya berikut contoh kode untuk event CompleteRegistration semisalnya pengguna mensubmit form registrasi

export default {
	...
	methods: {
		...
		onFormSubmit() {
			this.$fb.track('CompleteRegistration', {
				content_name: 'Paket Panas Dua',
				currency: 'IDR',
				value: 100000
			})
		}
	}
}

Custom Events

Jika event yang Anda inginkan tidak didefinisikan, kita masih bisa membuat event sendiri untuk ditrack.

💡
Agar custom events ditrack, kita cukup menambahkan kode dari sisi web saja. Tidak perlu melakukan apa-apa dari Dashboard Pixel kita
// Sintaksnya

$fb.query('trackCustom', 'NAMA_EVENT_KALIAN', { namaParameter: 'TERSERAH' })

Berikut contoh kode jika pengguna melakukan klik saat memilih paket layanan yang kita sediakan, hal ini tidak ada di standard events jadi kita membuat event ClickPackage dengan parameter berupa nama paket.

export default {
	...
	methods: {
		...
		onPackageClicked(packageName) {
			$fb.query('trackCustom', 'ClickPackage', { content_name: packageName })
		}
	}
}
💡
Untuk key dari parameter bisa terserah kalian, jadi misalnya dari contoh diatas tidak harus content_ name

Verifikasi Domain

Kunjungi Laman

https://business.facebook.com/settings/owned-domains/300333374948629?business_id=241393754431626

Lakukan yang Diminta

  • Tambahkan meta tag di website kalian

Klik "Verifiy" Jika Telah Diupdate

Notion image