Cara Mengirim HTML Khusus dengan Gmail

Diterbitkan: 2024-03-30

Email HTML telah menjadi komponen kunci pemasaran email modern. Mereka memungkinkan Anda membuat pesan email yang menarik secara visual dan interaktif, menjadikan email Anda lebih menarik dan efektif. Mereka sangat penting bagi bisnis, karena mereka dapat menyorot produk, promosi, dan branding dengan cara yang tidak bisa dilakukan oleh teks biasa. Mereka juga memungkinkan pelacakan dan analisis yang lebih baik, membantu Anda memahami bagaimana penerima berinteraksi dengan email Anda.

Di masa lalu, Gmail mengizinkan pengguna untuk langsung memasukkan dan mengedit kode HTML dalam editor email. Fitur ini disukai oleh mereka yang ingin mempersonalisasi dan mendesain email mereka secara ekstensif. Namun, dalam upaya meningkatkan keamanan dan menyederhanakan pengalaman pengguna, Gmail mengambil keputusan untuk menghilangkan kemampuan memasukkan kode HTML secara langsung ke editor email.

Perubahan ini mendorong pengguna untuk mencari metode alternatif untuk mengirim email HTML khusus melalui Gmail, yang akan kita bahas di artikel ini.

Lompat ke bagian di sini, atau baca panduan lengkapnya:

  • Mengirim Email HTML Khusus melalui Gmail
  • Menyalin HTML yang Dirender Langsung ke Gmail
  • Batasan penggunaan Template HTML Khusus
  • Email Teks Biasa vs Email HTML
  • Kirim Email HTML yang Dipersonalisasi menggunakan Mailmeteor!

Mengirim Email HTML Khusus melalui Gmail

Gmail menggunakan editor Apa yang Anda Lihat Adalah Apa yang Anda Dapatkan (WYSIWYG), yang berarti mengirim kode HTML mentah secara langsung bukanlah pilihan yang tepat. Karena penerima sebenarnya akan melihat kode HTML mentah, bukan dokumen yang dirender.

Misalnya, lihat template email tiruan ini. HTML yang dirender di Gmail

Ada saatnya Anda bisa membuat sesuatu seperti ini langsung di Gmail, tetapi jika Anda mencoba menyalin dan menempelkan kode HTML di Editor Gmail, inilah yang terjadi: HTML teks biasa di Gmail

Karena Gmail menggunakan editor WYSIWYG, hal ini menyebabkan penerima mendapatkan persis seperti yang Anda lihat di sini, email yang tidak lebih dari kode HTML yang ditulis dalam teks biasa: HTML penerima di Gmail

Namun, ada solusi praktis. Pengguna dapat menyalin dan menempelkan email HTML yang dirender ke editor Gmail untuk mengirim email HTML khusus. Metode ini memungkinkan Anda membuat email yang menarik secara visual dan disesuaikan sambil bekerja dalam batasan Gmail.

Menyalin HTML yang Dirender Langsung ke Gmail

Cara ini sebenarnya jauh lebih sederhana dari yang terlihat, Anda hanya perlu membuka template email di browser, lalu menyalin dan menempelkan semua kontennya ke editor Gmail. Inilah yang perlu Anda lakukan:

  1. Siapkan Kode HTML Anda
    • Buka editor teks seperti Notepad (Windows) atau TextEdit (Mac).
    • Tulis atau tempel kode HTML Anda ke editor teks. Kode ini dapat mencakup teks, gambar, link, dan format, sama seperti halaman web standar namun dengan beberapa batasan yang akan kita bahas nanti.
    • Simpan file dengan ekstensi “.html”, seperti “template.html”.
  2. Pratinjau di Browser Web
    • Klik dua kali file HTML yang baru saja Anda buat untuk membukanya di browser web default Anda. Ini akan membuat email Anda persis seperti yang terlihat oleh penerima.
    • Anda dapat kembali ke editor teks dan mengubah konten jika diinginkan, ingatlah untuk menyimpan file setelah Anda menyelesaikan perubahan, dan segarkan halaman browser untuk memperbarui perubahan Anda.
  3. Pilih Semua dan Salin
    • Di browser, tekan Ctrl+A (Windows) atau Cmd+A (Mac) untuk memilih semua konten dalam email HTML.
    • Selanjutnya, tekan Ctrl+C (Windows) atau Cmd+C (Mac) untuk menyalin konten yang dipilih. Anda juga dapat mengeklik kanan dan memilih Salin dari menu.
  4. Tempel ke Gmail
    • Buka Gmail dan mulailah menulis email baru.
    • Klik pada badan email tempat Anda ingin memasukkan konten email HTML Anda. Anda tidak dapat menyisipkan HTML di baris subjek, jadi satu-satunya pilihan Anda adalah badan email.
    • Sekarang, tekan Ctrl+V (Windows) atau Cmd+V (Mac) untuk menempelkan konten yang Anda salin dari browser. Atau Anda dapat mengklik kanan dan memilih Tempel dari menu.
    • Email HTML harus ditempelkan langsung ke editor Gmail, dan Anda akan melihatnya ditampilkan seperti pada gambar di bawah. Tempel HTML di Gmail
  5. Kirim Emailnya
    • Lengkapi email Anda dengan subjek, penerima, dan teks atau elemen tambahan apa pun.
    • Klik tombol "Kirim", dan email HTML khusus Anda akan dikirimkan ke penerima.

Jika semuanya berjalan dengan baik, penerima Anda akan menerima email yang disajikan dengan sempurna seperti di file .html yang Anda buat. Kami menyarankan Anda mengirim email ke diri Anda sendiri sebelum mengirimkannya ke penerima yang dituju, hanya untuk memastikan tidak ada kesalahan dalam kode HTML.

Menggunakan Ekstensi Browser Editor HTML

Untuk pengguna yang paham teknologi yang ingin memiliki kontrol lebih besar atas HTML mentah email mereka dan merasa nyaman dengan pengeditan manual, menggunakan ekstensi editor HTML adalah solusi yang tepat.

Ekstensi ini, tersedia secara luas untuk browser populer seperti Google Chrome, menyediakan sarana bagi pengguna berpengalaman untuk menulis dan mengedit kode HTML secara manual sebelum mengirim email Anda melalui Gmail. Editor HTML Gratis untuk Gmail oleh cloudHQ adalah salah satu opsi yang lebih populer bagi pengguna Chrome.

Cukup instal ekstensinya, dan buka Gmail Anda untuk mengakses editor HTML layar terpisah tempat Anda dapat membuat perubahan dan melihat efeknya secara langsung, semuanya dari kenyamanan akun Gmail Anda.

Batasan penggunaan Template HTML Khusus

Sayangnya, bahkan dengan kemampuan menulis kode HTML Anda sendiri, ada batasan yang perlu Anda waspadai sebelum memulai perjalanan ini. Inilah yang perlu Anda ketahui:

Ucapkan selamat tinggal pada Font!

Sayangnya, Gmail tidak menawarkan cara untuk mengimpor font web khusus ke email HTML Anda. Anda dibatasi dalam menggunakan font standar, yang dapat membatasi pilihan desain dan peluang branding Anda.

Jika Anda memang perlu menggunakan merek Anda sendiri di suatu tempat, Anda tidak punya pilihan selain menggunakan gambar dengan teks tertulis di dalamnya. Namun Anda juga tidak dapat mengirim gambar-gambar ini sebagai bagian dari email itu sendiri, yang membawa kita ke poin berikutnya.

Gambar Harus Dihosting Secara Publik

Anda tidak dapat menautkan ke gambar di komputer Anda melalui email dan mengirimkannya ke orang lain, gambar tersebut mungkin muncul di browser lokal Anda, namun saat Anda menambahkannya ke editor Gmail, gambar tersebut tidak akan dimuat.

Dalam contoh template kami, kami menggunakan gambar dari placeholder dan menempatkan anak kucing, karena keduanya tersedia untuk umum. Gambar Anda juga harus tersedia untuk umum dan dihosting di suatu tempat di internet. Ini bisa berupa situs web Anda sendiri, atau folder publik Google Drive, atau situs web berbagi gambar online.

Tidak Ada Dukungan untuk Style Sheet Eksternal

Style sheet eksternal tidak akan berfungsi di email Anda. Jika Anda mahir dengan CSS, pertimbangkan untuk menggunakan CSS tertanam dan gaya sebaris untuk mendapatkan format dan gaya email yang diinginkan.

Batasan ini dapat menambah kerumitan pada proses desain, karena Anda harus menyertakan semua gaya langsung dalam kode HTML Anda. Pada saat yang sama, jaga agar gaya Anda sesederhana mungkin, Anda tidak pernah tahu browser atau aplikasi email apa yang digunakan penerima Anda, jadi yang terbaik adalah tetap menggunakan gaya CSS standar untuk kompatibilitas maksimum.

Tetap berpegang pada Tata Letak Berbasis Tabel

Meskipun banyak HTML modern yang menggunakan elemen <div> untuk tata letak dan gaya, email masih menggunakan tata letak berbasis tabel lama yang bagus. Jadi, jika Anda perlu membuat elemen atau kotak kisi apa pun, Anda perlu melakukannya menggunakan berbagai tag tabel seperti <table> , <tr> , dan `<td>.

Hal ini karena tidak semua orang menggunakan penyedia layanan email yang sama, jadi meskipun Gmail mulai mendukung fitur baru, akan ada banyak penyedia layanan email lain yang masih tertinggal. Email yang dirender secara tidak benar memberikan kesan pertama yang buruk, jadi sebaiknya tetap gunakan email yang cocok untuk semua orang dan fokus pada konten sebenarnya dari email yang dipermasalahkan.

Email Teks Biasa vs Email HTML

Pilihan antara mengirim Email Teks Biasa dan Email HTML memainkan peran penting dalam menentukan efektivitas dan dampak pesan Anda. Kedua format tersebut hadir dengan keunggulannya masing-masing, memenuhi kebutuhan dan preferensi unik.

Mari kita soroti perbedaan utama antara kedua format email ini:

Fitur Email Teks Biasa Email HTML
Pemformatan dan Penataan Terbatas pada teks biasa, tanpa gaya Mendukung pemformatan dan gaya yang kaya
Gambar dan Media Tidak ada dukungan untuk gambar yang disematkan Dapat menyertakan gambar dan multimedia
Tautan dan Tombol CTA Hyperlink dasar Tautan bergaya dan tombol interaktif
Tata Letak dan Struktur Struktur linier dan minimal Tata letak yang rumit dimungkinkan
Personalisasi Terbatas pada personalisasi berbasis teks Opsi personalisasi yang luas, termasuk penggunaan gambar yang dipersonalisasi untuk kasus penggunaan lebih lanjut
Pelacakan dan Analisis Kemampuan pelacakan terbatas Pelacakan dan analitik tingkat lanjut
Kesesuaian Kompatibel secara universal Membutuhkan waktu pengujian dan pengembangan yang ekstensif untuk kompatibilitas penuh di semua perangkat
Keterlibatan dan Dampak Daya tarik visual terbatas, hanya menyampaikan informasi Peningkatan keterlibatan dan dampak

Meskipun Email Teks Biasa dikenal karena kesederhanaan dan kompatibilitas universalnya, Email HTML menawarkan kanvas yang lebih luas untuk kreativitas dan keterlibatan.

Kirim Email HTML yang Dipersonalisasi menggunakan Mailmeteor!

Mailmeteor adalah alat pemasaran email canggih yang menyederhanakan proses pengiriman email HTML yang dipersonalisasi ke banyak penerima melalui Gmail. Add-on praktis ini terintegrasi secara mulus dengan Gmail dan Google Spreadsheet Anda sehingga memungkinkan Anda membuat dan mengirim email yang dipersonalisasi dengan mudah.

  • Personalisasi Email: Buat email yang sangat dipersonalisasi dengan menggunakan tag penggabungan khusus dari data di Google Spreadsheet Anda, atau menggunakan platform web dengan bidang seperti nama, detail perusahaan, atau variabel khusus lainnya.
  • Editor Templat HTML: Manfaatkan Editor HTML premium dan masukkan data yang dipersonalisasi langsung ke templat email Anda.
  • Pelacakan Email: Lacak email Anda setelah meninggalkan kotak surat Anda, lihat apakah penerima Anda membukanya dan jalankan pengujian A/B dengan umpan balik yang andal.
  • Perpustakaan Templat: Akses perpustakaan templat email yang telah dirancang sebelumnya atau buat templat email HTML Anda sendiri untuk digunakan dalam kampanye Anda.

Panduan ini ditulis oleh Guy Bou Samra, editor konten di Mailmeteor. Mailmeteor adalah perangkat lunak email sederhana & berfokus pada privasi. Dipercaya oleh jutaan pengguna di seluruh dunia, ini sering dianggap sebagai alat terbaik untuk mengirim buletin dengan Gmail. Cobalah kami dan beri tahu kami pendapat Anda!

➤ Hemat waktu mengirim email dengan Gmail menggunakan Mailmeteor
Diterbitkan di:
  • Email Pemasaran
  • Gmail
  • Memandu