Transcript Video:

Di video kali ini, saya ingin menjelaskan salah satu masalah yang cukup sering dialami oleh teman-teman, khususnya yang baru saja belajar cara men-tracking di Google Tag Manager. Jadi, kasusnya ini biasanya mereka menggunakan tombol WhatsApp karena tombol WhatsApp ini adalah salah satu yang paling sering digunakan di website dan biasanya memang membutuhkan tracking.

Nah, tombol WhatsApp itu bisa dibuat dengan menggunakan plugin, alat bantu lainnya atau script dari website lain. Sebagai contoh misalnya dari getbutton.io atau mungkin dari plugin-plugin WordPress yang lainnya juga kurang lebih sama saja. Dimana si tombol itu tidak bisa diketahui variabelnya, jadi ga bisa kita tracking.

Cara Menampilkan Tombol WhatsApp di Website Menggunakan GetButton

Di website ini adalah contoh dari tombol WhatsApp yang saya gunakan dari getbutton.io. Jadi, ini caranya simpel kalau menggunakan yang gratisan (karena getbutton.io juga memiliki layanan yang berbayar). Untuk yang gratis, cara menggunakannya adalah:

  1. Akses getbutton.io
  2. Scroll ke bagian bawah sedikit
  3. Pilih aplikasi chatting yang kamu inginkan
  4. Isi nomor WhatsApp-nya
  5. Pilih warna tombol yang kamu inginkan
  6. Pilih posisi tombolnya
  7. Masukkan email dan dapatkan kodenya

Setelah itu, kamu akan mendapatkan kode. Dimana kode yang didapatkan adalah berupa kode JavaScript. Kode JavaScript ini nantinya akan diletakkan di website kita meskipun sebenarnya elemen dari tombol ini bukan berasal dan bukan benar-benar terpasang di website kita.

Berbeda halnya ketika teman-teman memasang tombol berupa gambar yang benar-benar di-upload di website. Sebagai contoh, misalnya di bagian ini adalah tombol berupa gambar yang memang berasal dari website ini, nah itu bisa di-tracking. Tapi kalau yang seperti ini (dari GetButton), tidak bisa di-tracking.

Ketentuan Tracking pada GetButton

Seperti yang sudah dijelaskan di paragraf sebelumnya, getbutton.io tidak bisa di-tracking. Karena kalau kita melihat dokumentasinya dari website GetButton, tracking dan analisis di Google Analytic hanya berlaku untuk pengguna yang menggunakan versi PRO.

Tapi, untuk penggunaannya, konfigurasinya ini tidak perlu dilakukan secara manual karena sistemnya sudah dibuat sedemikian rupa. Sehingga kalau untuk pengguna versi yang PRO, sistem akan secara otomatis mengirim event ke Google Analytic ketika ada orang yang mengklik tombol tersebut.

Masalahnya adalah seringkali kita menggunakan yang versi gratisan karena kita hanya membutuhkan WhatsApp-nya saja. Tentu saja memang berfungsi seperti biasa, berfungsi normal. Tapi kita jadi tidak bisa tracking. Kita tidak akan tahu berapa orang yang mengklik tombol ini setelah datang dari iklan.

Di sini, saya akan coba untuk memberikan cara alternatifnya. Jadi, mungkin caranya tidak semudah kita menggunakan ini, tapi yang saya mau kasih tau adalah cara dimana teman-teman benar-benar membangun dan membuat tombolnya itu di website teman-teman sendiri. Jadi, script untuk membuat tombolnya itu benar-benar terpasang di website kita sendiri.

Jadi kita bisa tambahkan class-nya, kita bisa tambahkan id dan bahkan kita bisa sesuaikan desainnya juga kalau memang teman-teman memahami cara mendesain tampilan website, khususnya dengan CSS.

Di sini saya sudah membuatkan script-nya yang sederhana saja (lihat menit ke 04:20 dalam video). Saya juga ingin memberi tahu, kalau teman-teman merasa bingung tidak apa-apa, coba ikuti saja dulu.

Jadi, di sini saya hanya akan memberikan sedikit gambaran bahwa script ini terdiri dari dua bagian utama, yaitu:

  • <a> sampai penutup </a> yang akan menampilkan gambar dari tombol WhatsApp. Nanti hasilnya mirip-mirip seperti ini juga tampilannya.
  • Kemudian dari <style> sampai penutup </style> ini adalah desainnya.

Artinya temen-temen bisa menyesuaikan sendiri. Contoh misalnya, di sini dikasih left, tapi teman-teman ingin tombolnya ada di posisi kanan seperti yang tadi pada GetButton saat memilih posisinya mau left atau right. Nah, bagian ini bisa diganti jadi right.

10px ini untuk jarak tombol dengan sisi layar, berarti:

  • Left: 10px; dari sisi kiri
  • Right: 10px; dari sisi kanan

Jadi, sebenarnya ini tidak terlalu susah dibaca karena memakai bahasa biasa saja dan bukan sebuah pemrograman web. Ini hanya masalah bagaimana browser bisa menerjemahkan apa yang kita tulis di sini dan ditampilkan dalam bentuk desain.

Cara Menampilkan Tombol WhatsApp di Website

Sekarang bagaimana caranya? Kita akan masuk ke dalam pengaturan Divi. Saya pasang di sini, karena saya menggunakan theme Divi. Mungkin untuk teman-teman yang menggunakan theme selain divi atau yang mungkin tidak punya fitur dimana kita bisa memasukkan kode seperti ini, biasanya saya menyarankan menggunakan plugin yang namanya Insert Header and Footer.

Plugin ini FREE, bisa di-download dan di-install untuk memasukkan kode atau script-nya. Tapi karena saya menggunakan Divi, saya akan masukkan di sini saja.

Karena sebelumnya saa menggunakan kode dari GetButton, saya akan hapus terlebih dahulu dan save, sehingga tombolnya tidak akan muncul lagi.

Ikuti langkah-langkah ini untuk menampilkan tombol WhatsApp di halaman website-mu:

  1. Akses link raw.githubusercontent.com/sedoya/others/main/WhatsAppButton.html lalu copy kodenya
  2. Paste kode tersebut di bagian kolom <body>
  3. Save dan reload halaman website-mu

Kita bisa melihat di sini juga sudah ada tampilan tombol WhatsApp-nya seperti ini, hanya saja saya tambahkan tulisan chat via WhatsApp dan mungkin ada baiknya juga agar lebih stand out, agar lebih menonjol juga karena ada panahnya.

Tapi kalau teman-teman tidak mau ada panah ini, sebenarnya bisa dihapus. Teman-teman bisa perhatikan bagian ini terlebih dahulu:

  • dari “<img” pertama sampai ” >” adalah tombol WhatsApp-nya yang berwarna hijau
  • dan “<img” yang kedua ini sampai “>” adalah bagian panah yang bertulisakan chat via WA.

Jadi, terserah, bisa dimodifikasi.

Lalu, di sini juga akan ada yang namanya class, yang nantinya akan muncul di Google Tag Manager. Dan ini akan kita gunakan untuk men-tracking tombolnya. Untuk masalah desain (dalam <style>) nanti silahkan dipelajari lebih detail lagi kalau memang teman-teman mau memodifikasi.

Cara Melacak Tombol WhatsApp dalam Website

  1. Masuk ke Google Tag Manager
  2. Buat container baru dengan klik titik tiga di pojok kanan
  3. Pilih Create Container
  4. Beri nama “lat_1301” (bisa disesuaikan)
  5. Pada Target Action pilih Web
  6. Klik tombol Create
  7. Copy kode yang muncul di atas
  8. Paste pada bagian <head>
  9. Copy juga kode yang ada di bagian bawah
  10. Paste pada bagian <body> (letakkan pada bagian atas kode sebelumnya)
  11. Jika sudah close dengan klik tanda X
  12. Klik tombol Submit
  13. Klik tombol Publish
  14. Klik Continue

Kalau sudah, sebenarnya sudah bisa kita terapkan. Bisa langsung kita coba tracking. Tapi, sebelumnya kita harus membuat trigger. Dan sebelum membuat trigger, kita harus mengaktifkan terlebih dahulu variabel “click”. Kenapa? Karena ini aktivitasnya berhubungan dengan klik (kita ingin tahu kan berapa banyak yang klik tombol WhatsApp ini?).

Cara Membuat Variabel pada Google Tag Manager

  1. Klik menu Variables
  2. Klik tombol Configure
  3. Centang semua elemen pada bagian Clicks
  4. Tunggu hingga proses build variabel selesai

Cara Membuat Trigger pada Google Tag Manager

Karena kita akan melacak sebuah tombol, ini wajib membuat triggernya dahulu ya.

  1. Klik menu Triggers
  2. Klik tombol New
  3. Klik pada icon abu yang berada di tengah
  4. Pada bagian Click, pilih All Elements
  5. Pada bagian This trigger fires on, pilih All Clicks
  6. Klik tombol Save

Nah, ini jadi, syaratnya harus ada trigger click dengan all element agar bisa men-detect aktifitas ketika saya mengklik tombol WhatsApp ini. Sekarang kita coba masuk ke dalam preview mode. Teman-teman bisa klik tombol Preview yang ada di sebelah kiri tombol Submit.

Penjelasan tentang Google Tag Manager, khususnya yang baru dan mungkin baru melihat video ini, sudah saya buat di channel YouTube ataupun di blog saya. Jadi, nanti bisa coba cari lagi. Ada yang memang penjelasannya khusus untuk google tag manager dari dasar.

Kembali lagi ke Preview Mode, jika sudah muncul pop up “Start Tag Assistant”, isi dengan URL atau link websitemu. Hingga muncul pesan connecting. Jika sudah, klik tombol Continue.

Di sini, kalau kita lihat ada 4 message atau event:

  • IpEvent
  • Container Loaded
  • DOM Ready
  • Window Loaded

Kalau saya mengklik di bagian website atau dimana saja, dia akan ter-record sebagai message kelima atau event kelima. Untuk memastikannya, teman-teman bisa coba klik di bagian website mana saja. Dia akan membentuk Click Listener. Kenapa listener? Karena dia mendengarkan apa yang saya klik. Aktivitas yang saya klik itu ter-record. Jadi di belakang layarnya ada sebuah event listener yang me-record aktivitas klik itu.

Kemudian kalau saya mengklik di bagian Click ini, maka variabel akan tertangkap seperti berikut. Tapi, bukan bagian itu yang ingin kita tracking, kita ingin melakukan pelacakan ketika orang mengkliknya di sini. Tepat di tombol WhatsApp. Jadi kita akan buat aktivitas keenam atau message keenam. Nanti “click” juga namanya dan akan berada di nomor enam.

Sekarang saya sambil menekan tombol Ctrl di keyboard, saya akan klik di sini (di tombol WhatsApp). Akan muncul juga ya di Google Tag Manager ini. Tidak apa-apa, masuk ke sini dulu saja. Jadi, kita tangkap dulu saja nilai atau value dari varibelnya.

Kita lihat di sini pada bagian Click Classes. Dan value yang ditangkap adalah “wa-icon cta-wa”. Ini ada dua nilai ya. Karena ada spasi, maka terpisah. Dua nilai ini adalah yang bisa kita gunakan. “wa-icon” dan “cta-wa” ini sebenarnya apa yang kita tulis di sini (di kode HTML yang sebelumnya kita tulis). Memang sudah ada dan bisa diganti juga. Hanya saja, kalau ingin mengganti ini hati-hati, karena ini digunakan juga di <style>-nya, jadi harus disesuaikan.
Nah, sekarang kita sudah dapat nama class-nya ya. Salah satu saja yang diambil. Mungkin kita bisa pakai yang “cta-wa”.

  1. Copy nama class-nya (cta-wa)
  2. Masuk ke menu Triggers
  3. Klik All Elements
  4. Pada bagian This trigger fires on, pilih Some Clicks
  5. Pastikan select box berisi “Click Classes” dan “contain”
  6. Pada kolom terakhir, paste “cta-wa” yang sebelumnya sudah di-copy
  7. All Elements bisa kita ubah menjadi WA Button
  8. Klik tombol Save

Kalau sudah seperti ini, kita sudah membuat sebuah kondisi yang sangat spesifik hanya ketika orang mengklik tombol WhatsApp in. Dan ini terserah kita tag-nya mau dibuat dari apa.

Contoh saja kita tidak benar-benar menerapkan code dari Google Ads ataupun dari Google Analytic. Tapi, kita coba pura-pura saja buat sebuah tag dari Google Ads Conversion Tracking ini. Di sini misalnya kita isi asal saja di semua kolomnya. Lalu di sini kita masukkan triggering-nya “WA Button”. Setelah itu, Rename Tag menjadi Google Ads WA Button, lalu Save.

Kita coba test lagi, klik tombol Preview untuk memastikan kondisinya sudah 100% tepat. Jika sudah connected, kita cek di sini masih ada 4 messages. Lalu kita klik di sini (di halaman preview tadi). Kita cek di sini ada 5 message, tapi coba kita perhatikan tag-nya masih dalam kondisi not fired yang artinya kita belum mengklik tombol WhatsApp ini.
Kita klik lagi di bagian lain websitenya, di sini akan jadi keenam dan seterusnya tapi tidak akan membuat tag ini fired. Sekarang saya akan mengklik tombolnya dan seharusnya di message ketujuh statusnya menjadi fired.

Sekarang kita coba, kita klik sambil tekan tombol Ctrl saja biar tidak menutupi ini. Kalau tidak fired, kita harus cek lagi apa yang menjadi masalah. Tapi sini kondisinya sudah fired ya. Kita bisa lihat juga aktivitas ketujuh ini, kalau kita klik di sini (bagian Tag Fired), pastikan Firing Triggers- nya sudah tercentang semua. Statusnya hijau (Fired) berarti sudah aktif, sudah berjalan saat orang mengklik tombol WhatsApp ini.

Oke seperti itu saja sudah selesai. Jadi, jangan lupa ketika sudah selesai ini di-submit lagi karena ini sudah ada tambahan tag di dalam container ini. Kalau sudah berarti website saya yang ini sudah menggunakan tombol WhatsApp yang kita buat sendiri dan sudah kita tracking lewat Google Tag Manager.

Terima kasih, mudah-mudahan tips kali ini bermanfaat buat teman-teman. Silahkan dicoba. Kalau misalnya nanti ada yang tidak berhasil atau ada masalah nanti tolong ditulis saja komentarnya biar saya tahu problem-nya apa.

Lalu jangan lupa tetap support channel ini dengan cara subscribe dan boleh share ke teman-temannya yang mungkin sedang belajar juga tentang Google Ads atau Google Tag Manager.  Apa yang saya bisa sharing mudah-mudahan kedepannya selalu saya bisa bagikan ke teman-teman. Terima kasih.