Memasang Tracking Pixel Secara Manual
Ini chapter yang paling langsung relevan dengan kerjaan kamu sehari-hari sebagai advertiser. Memahami cara dan posisi pemasangan tracking pixel itu bukan sekadar ilmu tambahan, ini bisa jadi pembeda antara data yang akurat dan data yang sampah.
Kenapa Perlu Tahu Cara Manual?
“Kan sudah ada GTM? Kenapa harus paham cara manual?”
Pertanyaan bagus. Jawabannya:
- Tidak semua website support GTM. Beberapa landing page builder sederhana atau website lama mungkin hanya bisa ditambahkan kode secara manual.
- Debugging. Kalau tracking bermasalah, kamu perlu bisa memeriksa apakah kode pixel sudah ada di posisi yang benar.
- Verifikasi. Sebagai advertiser, kamu harus bisa mengecek sendiri apakah developer sudah memasang pixel dengan benar, bukan cuma percaya kata-kata.
Anatomi Tracking Pixel
Tracking pixel itu intinya adalah potongan kode JavaScript yang diberikan oleh platform iklan. Kode ini melakukan tiga hal:
- Memuat library JavaScript dari server platform
- Menginisialisasi pixel dengan ID unik akun kamu
- Mengirimkan event (minimal PageView) ke platform
Memasang Meta Pixel
Ini kode Meta Pixel standar yang kamu dapat dari Meta Business Suite:
<!-- Meta Pixel Code -->
<script>
!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', 'PIXEL_ID_KAMU');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=PIXEL_ID_KAMU&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->Kode panjang di atas kelihatan menakutkan, tapi kamu cuma perlu paham beberapa bagian:
PIXEL_ID_KAMU— Ganti dengan Pixel ID dari akun Meta Ads kamufbq('init', ...)— Inisialisasi pixelfbq('track', 'PageView')— Mengirim event PageView setiap halaman dimuat<noscript>— Cadangan untuk browser yang tidak mendukung JavaScript (sangat jarang, tapi tetap dipasang)
Di Mana Memasangnya?
Taruh di dalam <head>, sebelum tag </head> penutup:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<!-- Meta Pixel Code -->
<script>
// ... kode pixel di sini
</script>
<!-- End Meta Pixel Code -->
</head>Kenapa di <head> dan bukan di <body>? Karena <head> dimuat lebih dulu. Kalau pixel ditaruh di bawah <body>, ada risiko pengunjung menutup halaman sebelum pixel sempat termuat, dan datanya hilang.
Memasang Google Ads Conversion Tag
Kode ini dipasang di halaman terima kasih (thank you page), bukan di semua halaman:
<!-- Google Ads Conversion Tracking -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-CONVERSION_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-CONVERSION_ID');
gtag('event', 'conversion', {
'send_to': 'AW-CONVERSION_ID/LABEL',
'value': 150000,
'currency': 'IDR'
});
</script>Yang perlu kamu ganti:
AW-CONVERSION_ID— ID konversi dari Google AdsLABEL— Label konversi spesifikvalue— Nilai transaksi (kalau ada)
Memasang TikTok Pixel
Polanya mirip dengan Meta Pixel:
<script>
!function (w, d, t) {
w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];
ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"];
ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);
ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e};
ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";
ttq._i=ttq._i||{};ttq._i[e]=[];ttq._i[e]._u=i;ttq._t=ttq._t||{};ttq._t[e+""]=+new Date;
ttq._o=ttq._o||{};ttq._o[e+""]=n||{};
var o=document.createElement("script");o.type="text/javascript";o.async=!0;o.src=i+"?sdkid="+e+"&lib="+t;
var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
ttq.load('PIXEL_ID_KAMU');
ttq.page();
}(window, document, 'ttq');
</script>Sama seperti Meta Pixel, taruh di <head>.
Cara Verifikasi Pixel Sudah Terpasang
Setelah memasang pixel, kamu perlu memastikan pixel beneran jalan. Ada beberapa cara:
-
Meta Pixel Helper — Extension Chrome gratis dari Meta. Buka halaman, extension ini akan menunjukkan apakah pixel terdeteksi dan event apa yang terkirim.
-
Google Tag Assistant — Extension Chrome untuk verifikasi tag Google (Analytics, Ads, GTM).
-
Inspect Element — Klik kanan di halaman > Inspect > cari kode pixel di tab Elements. Ini pengetahuan dari chapter sebelumnya mulai terpakai.
-
View Page Source — Klik kanan > View Page Source, lalu Ctrl+F (atau Cmd+F di Mac) untuk cari kata kunci seperti “fbq” atau “gtag”.
Kesalahan Umum
Berdasarkan pengalaman saya, ini kesalahan pemasangan pixel yang paling sering terjadi:
- Pixel dipasang di bawah
</body>. Ini posisi yang salah. Pixel harus di<head>. - Pixel ID salah. Copy-paste dari akun yang salah. Selalu double-check ID-nya.
- Kode dipasang tidak lengkap. Tag
<script>penutup terpotong, atau ada karakter yang hilang saat copy-paste. - Duplikasi pixel. Pixel terpasang dua kali, satu manual, satu lewat GTM. Akibatnya event terkirim dua kali dan data jadi tidak akurat.
Chapter berikutnya, kita bahas cara membaca dan memodifikasi halaman yang sudah ada menggunakan Developer Tools di browser.