Cara Setup Facebook Browser Pixel Di Google Tag Manager (GTM)

Setelah kemarin kita sudah membahas tentang cara install GTM kedalam website kita.

Kali ini kita akan coba menginstall facebook pixel melalui Google Tag Manager yang sudah kita setup sebelumnya.

Facebook sendiri memiliki 2 metode tracking-nya:

1. Browser Pixel
2. Conversion API

Yang akan kita bahas sekarang adalah Browser Pixel dan contoh tracking untuk event ViewContent menggunakan dataLayer.

Siapkan Facebook Pixel

Bagian pertama yang harus kalian persiapkan adalah Facebook pixel account kalian.

Cara mengambil facebook pixel:

1. Klik All Tools di sidebar account manager.
2. Pilih Event Manager.
3. Kemudian klik Data Source.
4. Pilih tab settings.
5. lalu klik bagian pixel id.
6. Pixel kalian otomatis sudah di copy ke clipboard.
7. Simpan pixel tersebut, kita akan gunakan nanti.

Buat DataLayer View Content

Selanjutnya kita akan membuat dataLayer untuk membuat custom event yang akan kita jadikan triger nantinya.

Dengan menggunakan dataLayer, kita bisa menambahkan object variable dari halaman yang akan kita tracking ini.

Karena contoh kali ini kita akan membuat event Content View, maka parameter yang bisa kita berikan ke Facebook adalah :

• content_ids
• content_category
• content_name
• content_type
• content
• value
• currency

Detailnya kalian bisa buka documentasi facebook tentang standar events.

Sekarang kita buat dataLayer-nya.

Kita gunakan plugin WPCode. kalau kalian belum punya silakan install dulu pluginnya.

Selanjutnya, klik + code snippet lalu pilih Add Your Custom Code.

Copy script dataLayer dibawah ini ke dalam kotak code preview.

dataLayer.push({
	"event" : "contoh_viewContent",
	"currency": "USD",
	"value": 0.5,
	"content": [
		{
			"content_ids": "SKU_123456",
			"content_name": "Awesome Post With Everything With It",
			"content_category": "Google",
			"price": 9.99,
		}
	]
});

Disini saya memberi nama event nya adalah “contoh_viewContent”. Kalian bisa menggunakan name event apapun.

Selanjutnya, isi nama kode nya, pilih code type -> javascript, lalu klik active dan save.

Jangan lupa untuk “Method” nya pilih shortcode.

Selanjutnya copy shortcode yang sudah kita buat tersebut.

Tambahkan Script Di Postingan

Masuk ke postingan atau landing page yang mau kalian tambahkan tracking view content.

Kemudian di block paling bawah, tambahkan block baru.

Cari block shortcode.

lalu copy shortcode yang sudah dibuat sebelumnya.

Update post/page tersebut.

Event Debugging

Selanjutnya kita akan cek terlebih dahulu, apakah custom event (contoh_viewContent) yang sudah kita buat muncul atau tidak.

Kita gunakan chrome extension GTM/GA Debugger, yang sudah saya bahas di artikel cara install Google Tag Manager di wordpress.

Bukan halaman yang sudah kalian pasang code tracking tersebut.

kemudian ketik di keyboard kalian ctrl + shift + j untuk membuka developer tools.

Lalu pilih tab GTM/GA Debug.

Kemudian klik “Start Debugging“.

Kalau dataLayer yang kalian buat benar, maka akan muncul event baru disana sesuai dengan nama yang kalian buat.

Sekarang custom event yang kita buat menggunakan dataLayer sudah terbaca.

Selanjutnya kita akan menggunakan event tersebut untuk men-trigger TAG yang akan kita buat di dashboard Google Tag Manager.

Silakan kalian masuk ke dashboard GTM kalian.

Install Facebook Template di GTM

Untuk meng-integrasikan custom event yang kita buat ke Facebook event, agar lebih mudah kita gunakan template yang sudah dibuat oleh developer lain di GTM.

Cara install Facebook Templates di GTM:

• Klik menu templates
• Kemudian pada bagian TAG Templates, klik “search gallery”
• Kemudian klik icon search, lalu cari “facebook”
• Disini saya menggunakan template dari “Adsmurai”.
• Kemudian klik “add to workspace”

Setup Variables

Selanjutnya, kita setup variables terlebih dahulu untuk kita mengambil object dari dataLayer yang kita kirimkan ke GTM.

Saya juga membuat variables untuk Facebook Pixel, agar kedepan kalian tidak perlu copy/paste terus-menerus dari facebook, cukup kita setup 1 kali saja.

Silakan kalian klik menu Variables.

Kemudian pada bagian user-defined variables klik new.

Berinama variable kalian. lalu klik kotak tersebut, kemudian pilih constant.

Variable pertama ini saya setup untuk variable fb_pixel.

isi bagian value dengan id pixels yang sudah kalian save sebelumnya. Lalu klik save.

Sekarang variable fb_pixel kalian sudah dibuat, dan siap untuk digunakan nanti.

Selanjutnya kita harus membuat variables untuk kita berikan ke facebook berdasarkan data dari dataLayer yang kita kirim ke GTM.

Variable di dataLayer tidak bisa langsung kita gunakan, untuk itu kita harus membuatnya menjadi variables terlebih dahulu.

Seperti yang saya katakan sebelumnya untuk Standar Event View Content dari facebook, kita perlu memberikan beberapa parameter:

• content_ids
• content_category
• content_name
• content_type
• content
• value
• currency

Semua parameter tersebut sudah kita siapkan di object dataLayer kita, sekarang tinggal kita ambil saja.

klik new variables lagi.

kemudian pada bagian variable type pilih -> data layer variable.

Pada bagian variable name, di isi dengan key dari object dataLayer kalian.

Yang saya kasih kotak merah itu disebut “key”.

Disini saya memberi nama variable tersebut dl_vc_content_ids.

Sekarang kita buat 1 per 1 variable tersebut. Kalian bisa ikuti variable name-nya seperti ini:

• content_ids => content.0.content_ids
• content_category =>content.0.content_category
• content_name => content.0.content_name
• content => content
• value => value
• currency => currency

Setelah semua variable yang dibutuhkan kita buat, selanjutnya kita buat trigger nya.

Custom Event Trigger

karena yang kita buat sebelumnya adalah custom event yaitu “contoh_viewContent”, Maka untuk trigger disini kita juga menggunakan custom event.

Klik Trigger pada bagian menu. kemudian klik “new”

Kemudian berinama View Content.

lalu pilih tipe trigger-nya => custom event.

Di kotak input event name, di isi sesuai dengan nama event yang kita buat sebelumnya yaitu contoh_viewContent.

Kemudian klik save.

Buat TAG Facebook View Content

Variable sudah siap, trigger sudah disetup, selanjutnya kita buat TAG-nya untuk mengirimkan data tersebut ke facebook.

Klik TAG pada bagian menu, kemudian klik new.

Saya beri nama Facebook View Content

Lalu pilih tipe TAG nya Adsmurai yang sudah kita tambahkan sebelumnya.

Selanjutnya kita perlu mengisi pengaturan disana.

Pada bagian event name pilih “view content”

kumudian pada bagian fires method pilih “Only FB Pixel For Web”

Klik add pixel kemudian pilih variable fb_pixel yang sudah di buat.

Kemudian pada bagian “Data Parameters” kita isi juga sesuai variable yang sudah dibuat sebelumnya.

Selanjutnya tambahkan trigger, pilih trigger yang sudah di buat yaitu view content.

Lalu klik save.

Test Preview Tag Firing

Sekarang kalian sudah membuat tag untuk tracking view content ke facebook.

Untuk melihat apakah tag yang sudah kita buat ter-trigger atau tidak, kalian klik pada bagian preview.

Kalian masukan alamat url halaman yang kita tracking sebelumnya.

Kemudian klik “connect”

Dibagian sebelah kiri kalian akan melihat event yang kita kirim dari website muncul.

Lalu Tag yang sudah kita buat (view content) di ter-trigger.

Ini artinya kita sudah berhasil men-tracking view content untuk halaman tersebut, dan data yang kita buat sudah berhasil di kirim ke facebook untuk menambah kualitas assets pixel kita.

Selanjutnya, kalian tinggal klik publish di tombol kanan atas.

Sekarang pixel facebook kalian sudah siap menerima event/data dari website kalian.

Kesimpulan

Kalian sudah belajar bagaimana meng-integrasikan facebook dengan google tag manager untuk mentracking view content menggunakan metode browser pixel.

Kalian juga sudah belajar bagaimana membuat Custom Event menggunakan dataLayer.

Kalian bisa mengimplementasikannya ke konversi lainnya misal Add To Cart, Purchase, Complete Registration, dll.

Untuk pembahasan konversi lainnya kita akan bahas diartikel yang berbeda.