Cara Melihat Email Telah Dibaca atau Belum
Pada artikel sebelumnya, telah dibahas mengenai penggunaan Google Sheet dan Googla Apps Script untuk keperluan Organisasi. Kini saatnya masuk pada pembahasan teknis, khususnya membuat personalized email.
Teknik ini sering saya gunakan untuk membagi informasi secara personal seperti Undangan atau Surat Khusus yang mengandung informasi pribadi. Termasuk juga untuk keperluan marketing sebuah acara (Gambar 1), terkadang menyapa melalui nama terasa dekat dan meningkatkan peluang engagement. Langkah apa saja yang perlu dikerjakan, ini dia ulasannya.
- Menyiapkan template Sheet
Google Sheet kita gunakan untuk menyimpan daftar nama penerima email. Kolom issent akan digunakan untuk penanda bahwa email telah dikirim dan kolom status digunakan untuk penanda email telah dibaca.
2. Menyiapkan template Html
Bagi Anda yang belum mengetahui, tampilan pesan email sebenarnya bisa kita make-up menggunakan HTML dan CSS. Supaya mudah dipahami, kita gunakan HTML paling sederhana saja seperti pada snippet code ini.
<html>
<body>
<p>Hi, , <?=nama?></p>
<p>1000 orang lebih, telah merasakan manfaat product ini. Martin Jhon, akan kembali berbagi inspirasi melalui acara "Inspirasi Pagi". Daftarkan sekarang juga.</p><p>Hari / Tanggal : Jumat, 31 Februari 2023<br>Tempat : Hotel Marriot Ballroom<br>Wakut : 15.00 WIB</p><p><br>Sayangnya kuota terbatas, siapa cepat dapat. Daftar sebelum tanggal 14 Januari 2022.</p></body>
</html>
Bila Anda tidak terbiasa dengan syntax HTML, jangan khawatir. Saya juga tidak terbiasa. Saya mengandalkan tools Wordtohtml[dot]com untuk mengkonversi tulisan menjadi html.
3. Menyiapkan Google Apps Script (GAS)
Ini dia mesin utamanya. Sebuah layanan canggih dari Google yang memungkinkan kita berinovasi membangun berbagai Web Apps. Cara mengaksesnya melalui menu Extensions > Apps Script pada Google Sheet.
Setiap menginisiasi project baru akan disertakan file Code.gs . Kita bisa menambahkan sendiri file .html dan .gs dengan menyentuh icon tambah (+). File berekstensi .gs ini merupakan tempat kita menaruh beraneka logika dengan bahasa Javascript. Gambar 3 merupakan struktur project yang saya gunakan. Boleh diadopsi.
Detail source code pada ulasan ini dapat dilihat pada Github. Seluruh penjelasan berikutnya mengacu pada project Aruna di Github.
Kostumisasi pesan email disimpan pada file content.html . Berbagai konfigurasi seperti nama sheet, id deployment, nomor kolom dijadikan satu pada Config.gs . Sedangkan Read.gs berisi logika untuk membaca seluruh baris pada Google Sheet.
Pada Code.gs terdapat beraneka fungsi dan business logic. Pintu masuk dari logika ini adalah function Main() . Idenya, Kita perlu meng-iterasi seluruh baris Google Sheet dan mengirimkan email melalui function sendMail(). Sayangnya pada Google Business, maksimal kuota mengirim email sebesar 1500 perhari dan Google versi Free hanya 500 perhari. Sehingga kita perlu sedikit menambah logika pengecekan kuota. Bila kuota telah habis maka result bernilai False dan akan menghentikan iterasi.
function Main(){var sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);var data = _read(sheet);for(let i=0;i<data.length;i++){
var item = data[i];
var result = sendMail(item);
if(result)
markSent(sheet,item);
else
break;
}}
4. Melakukan deployment
Supaya script ini tetap berfungsi meskipun kita close Window, maka perlu dilakukan Deployment. Caranya dengan klik tombol Deploy > New Deployment > Create Deployment > (Type) Web App > Deploy. Bagian yang perlu diperhatikan pada jendela Deployment (Gambar 4) adalah setelan Who has access — Anyone.
Google akan meminta Anda untuk mengizinkan akses ke Gmail dan sebagainya. Lakukan copy & paste Deployment Id kedalam file Config.gs. Lebih jelasnya perhatikan Gambar 5.
Ok, karena kita melakukan perubahan konfigurasi maka perlu pembaruan deployment. Sekali lagi, Masuk ke jendela Deployment dan update deployment dengan cara menyentuh icon pencil ( edit ) lalu pilih New Version ( Gambar 6).
Cara ini mengakibatkan sourcode versi paling akhir tersimpan pada Google Cloud Service tanpa mengubah Deployment ID.
Bagaimana cara mendeteksi Email sudah Dibaca?
Ini dia triknya. Perhatikan Web App Url berikut.
https://script.google.com/macros/s/XX_YY/exec?method=track&id=123
Url Web App diatas erat kaitannya dengan fungsi doGet() pada file Code.gs. Google Script memiliki fungsi doGet(e) yang otomatis ditriger bila url web app dipanggil. Huruf e dalam kurung merupakan parameter yang disematkan dalam url. Sehingga url tersebut dapat diekstraksi dua parameter yaitu (1) method dan (2) id.
function doGet(e) {
var method = e.parameter['method'];
switch (method) {
case 'track':
var id = e.parameter['id'];
var sheet = SpreadsheetApp.openById(SHEET_ID)
.getSheetByName(SHEET_NAME);
var data = _read(sheet,parseInt(id));
markOpen(sheet,data)
default:
break;
}
}Idenya begini. Dalam email kita sematkan 0 piksel gambar dengan src alamat url web app script. Sehingga saat email dibuka, seolah-olah memuat gambar namun sejatinya mengaktifkan url sekaligus mentriger fungsi doGet(e). Dalam fungsi doGet(e) inilah kemudian kita memanipulasi kembali data di Google Sheet. Logika sederhananya, bila id yang dikirim melalui url ditemukan, maka statusnya berubah menjadi openned.
Berikut ini cuplikan 0 piksel gambar yang disematkan pada email.
<html>
<body>
<img src="https://script.google.com/macros/s/<?=deployment_id?>/exec?method=track&id=<?=uniqueid?>" width="0" height="0">
</body>
</html>Bagiamana file .gs dan .html dapat saling mengirim data ?
Fungsi HtmlService mengizinkan kita dapat mengirim value dari Script ke Html. Syaratnya penamaan variabel harus sama persis. Melalui Html ditangkap dengan syntax <?=nama_variabel?>.
Perhatikan cuplikan Script berikut.
var template = HtmlService.createTemplateFromFile(TEMPLATE);
template.nama="Akbarul";
template.uniqueid = "133";
template.deployment_id = "XX_YY_ZZ";
var message = template.evaluate().getContent();Pada file Html, harus dipastikan penamaan variabel sama. Jika berbeda maka compiler akan menganggap sebagai sesuatu yang tidak dikenali.
<html>
<body>
<img src="https://script.google.com/macros/s/<?=deployment_id?>/exec?method=track&id=<?=uniqueid?>">
<p>Hi, <?=nama?> </p>
</body>
</html>Kode html tersebut seharusnya menampilkan informasi berikut.
<html>
<body>
<img src="https://script.google.com/macros/s/XX_YY_ZZ/exec?method=track&id=133">
<p>Hi, Akbarul </p>
</body>
</html>Selamat mencoba. Apabila Anda menemukan cara yang lebih efektif dan efisien, mohon berbagi juga. Semoga bermanfaat.
