Pengaturan Dasar

Teks

Poin penting: Mengatur teks yang ditampilkan pada tombol. Berfungsi untuk menyampaikan dengan jelas tindakan yang harus dilakukan pengguna selanjutnya.

Pengaruh pengaturan ini: Perubahan teks secara langsung memengaruhi rasio klik dan kecepatan pemahaman pengguna.

Tips pengaturan: Gunakan sekitar 10-18 karakter dengan menyertakan kata kerja (contoh: Lihat detail / Daftar sekarang) agar maksud tombol tersampaikan dengan jelas.

Item pengaturan

• Teks: Teks tampilan tombol. Nilai default-nya adalah "GAYA TOMBOL".

Jika ingin menampilkan teks berbeda saat hover, aktifkan tab hover dan atur teks hover-nya.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Tag

Tampilan mungkin sedikit berbeda dari yang sebenarnya.

Poin penting: Mengatur tag HTML dan atribut yang dihasilkan. Di sini Anda menentukan apakah elemen ini berfungsi sebagai link navigasi atau tombol eksekusi.

Pengaruh pengaturan ini: Informasi terkait SEO, aksesibilitas, dan pelacakan (GTM) juga ditentukan melalui pengaturan ini.

Tips pengaturan: Jika tujuannya navigasi halaman, pilih a. Jika tujuannya eksekusi form atau JavaScript, pilih button agar desain tetap konsisten.

Item pengaturan

• Tag HTML: Tautan (tag <a>) / Tombol (tag <button>). Default-nya adalah Tautan.

Secara semantik HTML, pilih Tautan jika tujuannya navigasi halaman atau perpindahan URL, dan pilih Tombol jika tujuannya eksekusi proses JavaScript atau operasi form. Crawler SEO mengikuti link pada tag <a>, sehingga Tautan direkomendasikan untuk navigasi internal situs.

Saat memilih Tautan

Tampilan mungkin sedikit berbeda dari yang sebenarnya.

Tampilan mungkin sedikit berbeda dari yang sebenarnya.

• Tautan URL: Mengatur URL tujuan. Untuk halaman yang dilacak, daftarkan dengan URL kanonik.
• Tautan Target: Memilih antara tab yang sama (_self) atau tab baru (_blank). Tab baru direkomendasikan untuk link eksternal.
• rel Attribute: Menambahkan atribut seperti noopener, noreferrer, nofollow untuk mengatur keamanan dan persyaratan SEO.

Saat target="_blank" diatur, rel="noopener" akan ditambahkan secara otomatis (dipaksakan secara internal sebagai langkah keamanan). Anda tidak dapat menghapus noopener secara manual. Jika tidak ingin memberikan nilai SEO pada link ke situs eksternal, tambahkan nofollow.

• Tautan Title: Mengatur deskripsi link tambahan, digunakan untuk aksesibilitas dan penguatan makna.

Saat memilih Tombol

Tampilan mungkin sedikit berbeda dari yang sebenarnya.

• Tombol Type: Memilih button / submit / reset untuk menentukan perilaku dalam form.

submit akan mengeksekusi pengiriman form. Jika digunakan di luar form, pilih button. reset akan menghapus semua input dalam form, jadi pertimbangkan penggunaannya dengan hati-hati untuk mencegah kesalahan operasi. Default-nya adalah button (tidak melakukan pengiriman form).

Batasan aksesibilitas: Jika Tautan URL kosong atau #, role="button" akan otomatis ditambahkan pada output HTML. Ini memastikan tombol yang tidak berfungsi sebagai link dibacakan dengan benar sebagai "tombol" oleh screen reader.

Fallback teks hover: Jika teks hover tidak diatur di tab hover, teks normal akan digunakan apa adanya saat hover.

Item umum

Tampilan mungkin sedikit berbeda dari yang sebenarnya.

• aria-label: Label untuk pembaca layar. Diatur ketika teks tampilan tidak cukup menyampaikan maksud. Memberikan panduan operasi yang akurat bagi pengguna screen reader.
• Tracking ID: Pengidentifikasi untuk pelacakan. Digunakan saat mengumpulkan data event di GTM atau alat analitik.
• Tombol Location: Label manajemen posisi penempatan. Memudahkan identifikasi saat melakukan A/B testing dengan beberapa CTA.
• ID: ID unik. Digunakan untuk mereferensikan elemen secara unik dalam penentuan CSS atau integrasi JS.

Tracking ID dan Tombol Location dihasilkan sebagai atribut data-* pada HTML. Dapat dimanfaatkan saat direferensikan dari tag manager seperti GTM. ID harus unik dalam satu halaman. Jika ID yang sama diatur pada beberapa blok, CSS dan JS mungkin tidak berfungsi sesuai harapan.