Langsung ke konten utama

Facebook Shop Dengan Google Apps Script - EKSPERIMEN #2

Pada eksperimen 1 menguji konektivitas Facebook Shop dengan Google Web Apps. Pada eksperimen 2 kali ini dikembangkan lagi dengan menyimpan ke Google Sheets dengan bantuan Apps Script.

GOOGLE SHEETS SEBAGAI DATABASE

Buka Google Drive dan buatlah satu Google Sheets yang akan menampung data dari Facebook Shop.

Buatlah format tampilan seperti berikut ini dengan jumlah kolom sesuai jumlah parameter yang dihantarkan dalam link request Facebook Shop. Beri nama sheet misalkan DATA

Kita akan membutuhkan ID dari Google Sheets yang bisa didapatkan dari bagian link Sheets seperti gambar di atas, misalkan link dari Sheets sebagai berikut, ID Sheets yang berwarna merah. Catat dan simpan anda akan memerlukannya nanti saat meracik di Apps Script.

https://docs.google.com/spreadsheets/d/1xCrYKgONnHHZX0nXKvq18Js4a_wo00HGOZF9U8P8OCw/edit#gid=0
Identifikasi Sheets dengan ID tidak akan berpengaruh sekalipun Sheets berganti nama filenyaSiLiKiDi

MODIFIKASI APPS SCRIPT

Konstanta Google Sheets ID

Buka Google Apps Script, tampung ID Sheets dalam sebuah konstanta misalkan bernama googleSheetID dan tempatkan setelah konstanta googleWebAppURL

Konversi ke JSON Object

Diasumsikan anda sudah paham dengan materi eksperimen 1 yang mengkonversi request dari Facebook ke dalam bentuk string JSON seperti tampak berikut ini dan akan fokus mengolah bagian parameter.


{
   "parameters": {
      "produk":[
         "kaos"
      ],
      "warna":[
         "hitam"
      ],
      "harga":[
         "100000"
      ],
      "toko":[
         "facebook"
      ],
      "fbclid":[
         "IwAR3FFd6elMBhZA14E9XTtbc8"
      ]
   },
   "contentLength":-1,
   "contextPath":"",
   "queryString":"produk=kaos&warna=hitam&harga=100000&toko=facebook&fbclid=IwAR3FFd6elMBhZA14E9XTtbc8",
   "parameter": {
      "produk":"kaos",
      "warna":"hitam",
      "harga":"100000",
      "toko":"facebook",
      "fbclid":"IwAR3FFd6elMBhZA14E9XTtbc8"
   }
}

Setelah kita mengetahui struktur dari response Web Apps dan fokus ke bagian parameter, maka kita bisa menggunakan event object parameter yang disediakan Apps Script. Selengkapnya tentang request paramaters yang ditangani bisa disimak dimari.

Kali ini variabel parameterToko tidak perlu menggunakan JSON.stringify, tetapi cukup dengan memanggil e.parameter. Dengan demikian selanjutnya kita tinggal tambahkan objek parameter di belakangnya, misalnya dideklarasikan dengan statement parameterToko.produk parameterToko.warna dst...

Abaikan saja parameter fbclid pelacak otomatis dari FacebookSiLiKiDi

Agar lebih ringkas maka statement tersebut ditampung dalam variabel baru yang masing-masing diberi nama sesuai parameternya. Sehingga cukup dengan memanggilnya dengan produk, warna dst...


function doGet(e) {
  var parameterToko = e.parameter;
  var produk = parameterToko.toko;
  var warna = parameterToko.warna;
  var harga = parameterToko.harga;
  var toko = parameterToko.toko;
}

Menyimpan ke Google Sheets

Sebelumnya dibuat variabel baru bernama namaSheet untuk mengidentifikasi bagian sheet yang menjadi penyimpanan data. Lalu buat variabel baru lagi untuk mengidentifikasi file Google Sheets mana yang dipilih dengan menggunakan fungsi openById() dan getSheetByName()


function doGet(e) {
  var parameterToko = e.parameter;
  var produk = parameterToko.toko;
  var warna = parameterToko.warna;
  var harga = parameterToko.harga;
  var toko = parameterToko.toko;
  var namaSheet = "DATA";
  var sheet = SpreadsheetApp.openById( googleSheetID ).getSheetByName( namaSheet );
}

Setelah Google Sheets tujuan diaktifkan dan disiapkan, langkah selanjutnya dengan langsung menyimpan nilai parameter ke Google Sheets dengan menggunakan fungsi appendRow()


function doGet(e) {
  var parameterToko = e.parameter;
  var produk = parameterToko.toko;
  var warna = parameterToko.warna;
  var harga = parameterToko.harga;
  var toko = parameterToko.toko;
  var namaSheet = "DATA";
  var sheet = SpreadsheetApp.openById( googleSheetID ).getSheetByName( namaSheet );
  sheet.appendRow([ produk, warna, harga, toko ]);
}

Dengan tersimpannya ke Google Sheets anda bisa lebih lanjut berimprovisasi mengolahnya sebagaimana yang biasa anda lakukan di Excel.

Tampilkan Notifikasi ke Laman HTML

Setelah tersimpan di Google Sheets, selanjutnya beritahu user dengan mengirimkan notifikasi ke laman HMTL.


function doGet(e) {
  var parameterToko = e.parameter;
  var produk = parameterToko.toko;
  var warna = parameterToko.warna;
  var harga = parameterToko.harga;
  var toko = parameterToko.toko;
  var namaSheet = "DATA";
  var sheet = SpreadsheetApp.openById( googleSheetID ).getSheetByName( namaSheet );
  sheet.appendRow([ produk, warna, harga, toko ]);
  return HtmlService.createHtmlOutput(
     "PRODUK : " + produk
     + "<br>" + "WARNA : " + warna
     + "<br>" + "HARGA : " + harga
     + "<br>" + "TOKO : " + toko
  );
}

UPDATE FACEBOOK SHOP

Setiap kali anda melakukan perubahan jangan lupa untuk menyimpannya dan men-deploy ulang dengan New Deployment

Masalahnya setiap kali deploy ulang, Google akan men-generate token baru pada URL Web Apps, jadi anda terpaksa harus memperbarui pula link di Facebook Shop. Simak eksperimen 1 cara merakit link Web Apps untuk dipasang di Facebook Shop.

Sampai sini anda sudah berhasil mengintegrasikan Facebook Shop dengan Google SheetsSiLiKiDi

FINAL SCRIPT

Final Script dapat diunduh di repository.

ARTIKEL TERKAIT

Dapatkan skrip semua materi di repository

Dukung donasi agar tutorial ini tetap operasional:
Trakteer Saya SiLiKiDi

Komentar

Postingan populer dari blog ini

Kirim Pesan Ke Telegram Dengan Apps Script

Dengan koneksi webhook anda bisa mulai ujicoba mengirim pesan pertama ke Telegram dari Google Apps Script.

Input User Dengan ForceReply Di Telegram

Metode ForceReply memungkinkan Bot memaksa user untuk memberikan input sebelum melanjutkan proses, dengan demikian anda dapat menggelar Step-by-Step formulir di Telegram.