Inspect Element: Developer Tools untuk Advertiser

Fitur ini sudah ada di browser kamu sekarang, gratis, dan merupakan salah satu skill paling berguna yang bisa dimiliki seorang advertiser. Developer Tools (DevTools) memungkinkan kamu membedah halaman web mana pun, termasuk landing page kompetitor.

Cara Membuka Developer Tools

Di Chrome (dan browser berbasis Chromium lainnya):

• Klik kanan di mana pun di halaman > Inspect (atau Inspect Element)
• Atau tekan F12 di keyboard
• Atau tekan Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)

Panel DevTools akan muncul di samping atau bawah layar. Jangan panik dengan tampilan yang kompleks, kamu hanya butuh beberapa tab.

Tab Elements: Membaca Struktur HTML

Tab Elements menampilkan seluruh struktur HTML halaman dalam format tree (pohon). Kamu bisa:

1. Inspect elemen spesifik

Klik ikon kursor di pojok kiri atas DevTools (atau tekan Ctrl+Shift+C), lalu arahkan kursor ke elemen di halaman. HTML-nya akan di-highlight otomatis.

Ini berguna banget ketika kamu ingin tahu:

• Class apa yang dipakai di tombol CTA kompetitor
• Heading structure di landing page yang performanya bagus
• Apakah elemen tertentu pakai tag yang benar

2. Edit HTML secara live

Double-click pada teks apa pun di tab Elements untuk mengeditnya langsung. Perubahannya langsung terlihat di halaman (tapi hilang kalau di-refresh).

Kapan ini berguna? Misalnya kamu mau test headline baru di landing page sebelum minta developer mengubahnya. Edit langsung di DevTools, screenshot hasilnya, lalu kirim ke tim kreatif atau developer.

3. Cari elemen tertentu

Tekan Ctrl+F (atau Cmd+F) di tab Elements untuk mencari. Coba ketik:

• fbq — Mencari Meta Pixel
• gtag — Mencari Google tag
• ttq — Mencari TikTok Pixel

Ini cara tercepat untuk verifikasi apakah tracking pixel sudah terpasang.

Tab Console: Melihat Error

Tab Console menampilkan pesan error dan log. Sebagai advertiser, kamu perlu memperhatikan:

• Pesan merah — Error. Bisa jadi pixel gagal dimuat, script bermasalah, atau resource tidak ditemukan.
• Pesan kuning — Warning. Tidak kritis tapi perlu diperhatikan.

Contoh error yang sering berkaitan dengan tracking:

Refused to load the script 'https://connect.facebook.net/...' because it violates Content Security Policy

Pesan ini artinya browser memblokir script Meta Pixel karena pengaturan keamanan website. Ini informasi penting yang bisa kamu sampaikan ke developer.

Tab Network: Memantau Request

Tab Network menunjukkan semua request yang dibuat halaman. Untuk advertiser, ini berguna untuk:

Memverifikasi pixel firing:

1. Buka tab Network
2. Refresh halaman
3. Di kolom filter, ketik facebook atau google atau tiktok
4. Lihat apakah ada request ke server mereka

Kalau muncul request ke facebook.com/tr dengan status 200, berarti Meta Pixel berhasil mengirim data. Kalau tidak ada, berarti pixel tidak jalan.

Mengecek kecepatan loading:

Di bagian bawah tab Network, kamu bisa melihat:

• Total berapa request yang dibuat
• Total ukuran data yang dimuat
• Berapa lama halaman selesai dimuat

Halaman landing page idealnya dimuat dalam 3 detik atau kurang. Lebih dari itu, kamu mulai kehilangan pengunjung, dan biaya per klik jadi sia-sia.

Tab Lighthouse: Audit Performa

Ini fitur bawaan Chrome yang memberikan skor performa halaman:

1. Buka tab Lighthouse di DevTools
2. Pilih kategori: Performance, Accessibility, Best Practices, SEO
3. Klik “Analyze page load”

Skor yang harus kamu perhatikan:

• Performance > 80 — Halaman cukup cepat
• SEO > 90 — Struktur halaman bagus untuk search engine
• Accessibility > 80 — Halaman bisa diakses oleh semua orang

Kalau skor Performance di bawah 50, itu red flag serius. Landing page lambat tidak cuma bikin pengunjung pergi, Google Ads juga memberikan Quality Score lebih rendah untuk halaman yang lambat. Artinya kamu bayar lebih mahal per klik.

Praktik: Intip Landing Page Kompetitor

Ini bukan hal yang salah. Semua advertiser melakukannya, dan developer tools membuat prosesnya lebih efisien.

Coba lakukan ini:

1. Buka landing page kompetitor
2. Klik kanan > Inspect
3. Perhatikan heading structure mereka (H1 apa, H2 apa saja)
4. Cari tracking pixel apa saja yang terpasang (cari fbq, gtag, ttq)
5. Cek skor Lighthouse mereka

Informasi ini memberi kamu insight tentang tech stack dan strategi tracking kompetitor.

Yang Perlu Kamu Ingat

1. Klik kanan > Inspect adalah shortcut paling berguna yang bisa kamu hafal
2. Tab Elements untuk membaca dan mengedit HTML
3. Tab Network untuk verifikasi pixel
4. Tab Lighthouse untuk audit performa landing page

Chapter berikutnya, kita bahas cara membuat halaman yang tampil bagus di semua ukuran layar, terutama HP.