title: “Email Marketing” description: “Email campaign dengan AI content generation, ReactQuill editor, template library, scheduled sending, dan open rate analytics di SNISHOP ERP.”
Email Marketing

EmailMarketing.jsx (539 baris) dengan fitur AI content generation via InvokeLLM, editor rich-text ReactQuill, template library, dan scheduled sending.
Modul ini memiliki permission gating khusus (can_edit_finance) karena email marketing sering berkaitan dengan promosi dan komunikasi finansial ke customer.
Arsitektur Komponen
Deskripsi Arsitektur
Arsitektur Email Marketing terdiri dari beberapa lapisan utama:- Presentation Layer —
EmailMarketing.jsxsebagai komponen utama yang mengorkestrasi seluruh tampilan UI termasuk stats dashboard, campaign list, dan campaign form. - Access Control Layer —
ERPAccessGuardmemvalidasi permissioncan_edit_financesebelum user dapat mengakses modul ini. - Content Generation Layer —
InvokeLLMmenghasilkan konten email terstruktur (subject, preheader, content HTML) berdasarkan brief, tipe campaign, tone, dan target audience yang dipilih user. - Editor Layer —
ReactQuillmenyediakan rich-text editing untuk konten HTML email dengan dukungan formatting, hyperlink, dan blockquote. - Template Layer —
TemplatePickerdenganplatform="email"menyediakan template email siap pakai yang dapat di-customize lebih lanjut. - Dispatch Layer —
SendEmail(base44 integration) menangani pengiriman email individual ke setiap penerima dalamrecipient_list. - Data Layer — Entity
EmailCampaign,Customer, danNewsletterSubscribermenyimpan data campaign, daftar penerima, dan subscriber newsletter.
Entity EmailCampaign
EntityEmailCampaign menyimpan seluruh data campaign email marketing yang dibuat dan dikirim melalui modul ini.
Validasi dan Constraints
- Required fields:
campaign_name,subject, dancontentwajib diisi sebelum campaign dapat disimpan. - Default status: Campaign baru selalu berstatus
drafthingga secara eksplisit dijadwalkan atau dikirim. - HTML content: Konten email harus berupa HTML valid. Editor ReactQuill memvalidasi tag yang diizinkan untuk mencegah injeksi script.
Entity NewsletterSubscriber
EntityNewsletterSubscriber mengelola daftar subscriber newsletter yang mendaftar melalui berbagai halaman di website SNISHOP.
Validasi dan Constraints
- Required fields: Hanya
emailyang wajib diisi saat pendaftaran subscriber baru. - Default is_active: Subscriber baru secara otomatis berstatus aktif (
true). - Description maxLength: Field
descriptiondibatasi maksimal 1000 karakter untuk mencegah input berlebihan.
Entity Customer (Sumber Data Penerima)
EntityCustomer dari modul CRM berfungsi sebagai sumber data utama untuk daftar penerima email campaign. Field-field yang relevan untuk email marketing:
Stats Dashboard
4 kartu metrik di bagian atas menampilkan ringkasan performa email marketing secara real-time:Interpretasi Metrik
- Open Rate > 25%: Performa sangat baik. Subject line dan waktu pengiriman sudah optimal.
- Open Rate 15-25%: Performa rata-rata. Masih ada ruang perbaikan di subject line atau segmentasi.
- Open Rate < 15%: Perlu evaluasi menyeluruh — pertimbangkan A/B testing subject line, perbaikan segmentasi, atau penyesuaian waktu pengiriman.
- Click Rate (
clicked_count / sent_count): Mengukur seberapa menarik konten email dan CTA (call-to-action) yang disajikan.
AI Email Generator
Input Parameter
Output Schema
AI menghasilkan email dengan struktur JSON berikut:h1, h2, p, ul, li, strong, a, blockquote.
Auto Campaign Name
Jika user tidak mengisi nama campaign, sistem auto-generate dari type + tanggal:Tips AI Generator
- Berikan brief yang spesifik dan mendetail — sertakan nama produk, diskon, atau informasi kunci yang ingin disampaikan.
- Pilih
toneyang sesuai dengan brand voice perusahaan untuk konsistensi komunikasi. - Untuk audience
enterprise, AI akan menghasilkan konten yang lebih formal dan data-driven. - Selalu review dan edit hasil AI sebelum mengirim — gunakan ReactQuill editor untuk penyempurnaan.
Campaign Form
Recipient Selection
Penerima dipilih dari entity Customer di modul CRM. Fitur “Select All” memilih semua customer sekaligus. Untuk segmentasi yang lebih granular, gunakan filter berdasarkancustomer_type, status, atau tags.
Email Sending Pipeline
Individual Sending
Setiap email dikirim individual (bukan bulk) ke setiap penerima. Ini memastikan personalisasi dan mengurangi risiko spam filter.Detail Pipeline Pengiriman
- Validasi — Sistem memvalidasi bahwa
recipient_listtidak kosong dancontentberisi HTML valid. - Penentuan Mode — Jika
send_datediisi, campaign disimpan dengan statusscheduled. Jika kosong, langsung masuk ke pipeline pengiriman. - Dynamic Import — Modul
SendEmaildi-import secara dinamis untuk optimasi ukuran komponen awal. - Iterasi Penerima — Setiap alamat di
recipient_listdiproses satu per satu. - Pengiriman Individual — Email dikirim secara individual (bukan CC/BCC massal) untuk personalisasi dan deliverability optimal.
- Error Handling — Jika satu email gagal, proses tetap berlanjut ke penerima berikutnya. Kegagalan dicatat untuk troubleshooting.
- Update Status — Setelah seluruh iterasi selesai,
sent_countdiupdate dan status campaign berubah menjadisent.
Campaign Status
Aksi per Status
Template Library
Menggunakan komponen sharedTemplatePicker dengan platform="email":
Template mencakup berbagai format email marketing yang sudah diuji untuk engagement optimal:
Cara Menggunakan Template
- Klik “Pilih Template” di campaign form.
- Browse kategori template yang tersedia.
- Klik template yang sesuai — konten akan otomatis mengisi field
content. - Edit konten di ReactQuill editor sesuai kebutuhan.
- Subject line juga dapat di-auto-fill dari template.
Permission & Security
Ini adalah satu-satunya modul Communication dengan explicit permission gating, karena email marketing sering berkaitan dengan promosi harga dan informasi finansial.
RBAC Permission Matrix
Catatan: Permission gating utama menggunakan can_edit_finance. Role-based granularity di atas merupakan best practice yang direkomendasikan untuk implementasi selanjutnya.
Integrasi Lintas Modul
Alur Data Lintas Modul
Cara Akses
Dari sidebar, klik menu Communication > Email Marketing. Diperlukan permissioncan_edit_finance.
Flow Penggunaan
- Buka Email Marketing dari sidebar — lihat stats dashboard di atas untuk ringkasan performa
- Klik “Buat Campaign” untuk memulai campaign baru
- Gunakan AI Generator untuk generate konten: isi brief, pilih type, tone, dan audience
- AI menghasilkan subject dan content HTML — edit di ReactQuill jika perlu
- Atau pilih Template dari library dan sesuaikan konten
- Pilih penerima dari daftar Customer — gunakan “Select All” untuk kirim ke semua
- Atur jadwal pengiriman atau pilih Kirim Langsung
- Klik Simpan — campaign masuk ke daftar dengan status
scheduledatau langsungsent - Monitor open rate, click rate, dan sent count di campaign list
Entity Relationship Diagram
Penjelasan Relasi
- EmailCampaign → Customer: Campaign menggunakan alamat email dari entity Customer sebagai
recipient_list. Relasi ini bersifat many-to-many karena satu campaign bisa dikirim ke banyak customer, dan satu customer bisa menerima banyak campaign. - EmailCampaign → NewsletterSubscriber: Campaign juga dapat menargetkan subscriber newsletter berdasarkan
interestsatausubscribed_from. Relasi bersifat opsional. - Customer → NewsletterSubscriber: Seorang customer dapat juga menjadi newsletter subscriber. Email menjadi kunci penghubung antar entity.
Entity Schema Tables
EmailCampaign — Full Schema
NewsletterSubscriber — Full Schema
Customer — Email-Relevant Fields
State Diagrams
Campaign Status Lifecycle
Newsletter Subscriber Lifecycle
Sequence Diagrams
Flow 1: Mengirim Campaign Email
Flow 2: Tracking Open Rate
Flow 3: Bounce Handling
Flow 4: AI Content Generation
Enum Reference Tables
EmailCampaign.status
NewsletterSubscriber.subscribed_from
Customer.customer_type (Segmentasi Penerima)
Customer.status (Filter Penerima)
AI Generator — Campaign Type
AI Generator — Tone
AI Generator — Audience
Tips
- Kirim email di waktu optimal: pagi hari kerja (08:00-10:00) biasanya memberikan open rate tertinggi
- Subject line yang menarik sangat menentukan — gunakan AI generator untuk brainstorming subject yang engaging
- Jangan terlalu sering mengirim email — 2-4 kali sebulan sudah cukup untuk menjaga engagement tanpa memicu unsubscribe
- Gunakan A/B testing untuk subject line — kirim 2 versi ke subset kecil, lalu kirim versi terbaik ke semua penerima
- Personalisasi konten dengan nama penerima dan data relevan untuk meningkatkan click-through rate
- Monitor open rate secara berkala — jika di bawah 15%, evaluasi subject line dan waktu pengiriman
- Segmentasi penerima berdasarkan
customer_typedantagsuntuk konten yang lebih relevan dan targeted - Manfaatkan
interestsdi NewsletterSubscriber untuk mengirim konten yang sesuai dengan minat subscriber - Selalu pastikan
is_activecustomer bernilaitruesebelum memasukkan kerecipient_list - Gunakan
clicked_countuntuk mengukur efektivitas CTA (call-to-action) dalam email
