Facebook Shop Dengan Google Apps Script - EKSPERIMEN #1

Pada eksperimen pertama ini kita akan mencoba menangani request dari Facebook saat user mengklik tombol di Facebook Shop untuk ditangkap oleh Google Web Apps kemudian ditampilkan dalam format HTML sebagai pembuktian koneksi antara Facebook dan Google berhasil dibangun.

MEMBUAT WEB APPS

Web Apps nantinya berfungsi menangkap request yang dikirimkan oleh Facebook Shop. Mulai dengan membuat baru Google Apps Script yang standalone langsung dari Google Drive dengan klik + New lalu pilih More - Google Apps Script

Karena pengiriman link dari Facebook via metode GET jadi kita gunakan fungsi doGet() yang telah disediakan Apps Script untuk menangani request by GET dengan kode script berikut:

function doGet(e) {
  var parameterToko = JSON.stringify(e);
  return HtmlService.createHtmlOutput( parameterToko );
}

• e adalah tangkapan variabel request yang dikirim dari Facebook
• Variabel e tersebut kemudian diformat ulang dalam bentuk string JSON dengan fungsi JSON.stringify()
• Hasilnya ditampung dalam variabel parameterToko
• Variabel parameterToko kemudian ditampilkan ke laman html dengan fungsi HtmlService.createHtmlOutput()

Klik tombol Deploy lalu pilih New deployment

Untuk inisiasi deployment pertama biasanya Google akan meminta otorisasi, kunjungi laman iniSiLiKiDi

Copy URL web apps yang telah di-generate. Tampung URL tersebut dalam konstanta baru misalkan kita namakan googleWebAppURL lalu tempatkan di baris paling atas dan simpan perubahan tersebut.

const googleWebAppURL = "URL_WEB_APPS_ANDA";

Lihat contoh gambar di bawah ini. Sampai sini anda sudah mempunyai sebuah Web Apps.

MERAKIT ALAMAT LINK

Facebook akan mengirimkan parameter-parameter dengan metode GET melalui sebuah link dengan menyisipkan parameter tersebut ke link.

Oleh karena itu URL Web Apps saja tidak cukup, kita perlu menambahkan di akhir link Web Apps tersebut parameter-parameter yang diperlukan.

https://url_web_apps?judul1=nilai1&judul2=nilai2&...

Sampai sini anda sudah menyiapkan sebuah link yang akan ditambahkan ke Facebook ShopSiLiKiDi

Misalkan data produknya adalah kaos, warnanya hitam, harganya 100rb, dan permintaan berasal dari toko Facebook, berikut notasinya:

FACEBOOK SHOP

Di sini tidak akan dibahas bagaimana membuat shop di Facebook Pages atau Group. Diasumsikan anda sudah membuatnyaSiLiKiDi

Silahkan buka Facebook Shop anda, buat item produk baru atau edit item produk yang sudah ada. Masukkan link Web Apps ke bagian Tautan Situs Web

Berikut adalah tampilan di sisi pengunjung, link Web Apps berada di dalam tombol Lihat situs web

Berikut adalah hasil respon berstruktur string JSON dari Google Web Apps setelah menangkap request dari Facebook Shop yang ditampilkan dalam format html.

Bila tampil seperti ini anda berhasil menghubungkan Facebook Shop dengan Google Web Apps.

Ini membuktikan kemampuan Google Web Apps untuk berinteraksi dengan aplikasi apapun dengan metode GET, selanjutnya anda bisa berimprovisasi lebih banyak lagi dengan Web Apps anda termasuk menyimpannya di Google Sheets sebagai database yang akan dibahas di eksperimen 2.

fbclid ~ facebook click id adalah tambahan parameter otomatis dari Facebook bisa anda abaikanSiLiKiDi

FINAL SCRIPT

Final Script dapat diunduh di repository.

ARTIKEL TERKAIT

• Facebook Shop Dengan Google Apps Script - EKSPERIMEN #2
• Facebook Shop Dengan Google Apps Script - EKSPERIMEN #3

Dapatkan skrip semua materi di repository

Dukung donasi agar tutorial ini tetap operasional:
SiLiKiDi