Google Sheets adalah salah satu spreadsheet gratis terpopuler yang tersedia secara online, tetapi banyak pengguna merasa bahwa Google Sheets tidak memiliki alat yang mereka butuhkan untuk mengoptimalkan spreadsheet mereka. Sebaliknya, dengan Elementor, page builder yang dapat mampu membuat halaman dalam waktu singkat, memungkinkan pengguna membuat segala jenis formulir yang dapat diintegrasi ke semua hal.

Pada artikel ini saya ingin berbagi cara integrasi Elementor ke Google Sheets, tanpa menggunakan layanan pihak ketiga.

Tujuan dari integrasi ini adalah mengumpulkan prospek yang masuk dan mengelola prospek tersebut dengan baik di Google Sheets.

Yang dibutuhkan

Untuk memastikan Elementor terhubung dengan baik Google Sheets, Anda memerlukan:

  • Elementor Pro - anda memerlukan Elementor Pro untuk mengaktifkan Form Widget.
  • Google Sheets - jika Anda memiliki akun Google, Anda sudah memiliki akses ke Google Sheets.

Sekarang saatnya mencoba melakukan integrasi Elementor ke Google Sheets.

Cara integrasi

Untuk memulai, pertama harus menyediakan form yang akan digunakan untuk mengumpulkan prospek, saya hanya menggunakan 2 field saja, email dan telepon. Anda dapat menambahkan sebanyak mungkin field yang Anda butuhkan.

Selanjutnya mengakses membuat sheet baru yang akan digunakan untuk mengelola prospek, Anda dapat melakukannya dari dasbor Google Sheets Anda.

Pilih Blank, untuk memulai semuanya dari awal, sehingga tidak tercampur dengan hal lainnya. Anda juga dapat mengubah judul dari spreedsheet agar lebih terorganisir.

Disini saya memanfaatkan Google Sheet Script Editor untuk mengelola seluruh prospek. Caranya cukup klik pada menu Tools - Script Editor

Ubah nama proyek, sesuaikan dengan nama spreedsheet Anda agar tidak berantakan, dan juga hapus seluruh kode disana.

Copy code dibawah ini dan masukkan ke script editor, lalu klik icon Save untuk menyimpan.

/**
 * Google app-script to utilise Elementor Pro Froms webhook
 * For Usage see: https://github.com/pojome/elementor/issues/5894
 */

/*
In order to enable this script, follow these steps:
 * From your Google Sheet, from the Tools menu select Script Editor…
 * Paste the script from this gist into the script code editor and hit Save.
 * From the Publish menu, select Deploy as web app…
 * Choose to execute the app as yourself, and allow Anyone, even anonymous to execute the script. (Note, depending on your Google Apps instance, this option may not be available. You will need to contact your Google Apps administrator, or else use a Gmail account.) Now click Deploy. You may be asked to review permissions now.
 * The URL that you get will be the webhook that you can use in your elementor form, You can test this webhook in your browser first by pasting it. It will say "Yepp this is the webhook URL, request received".
 */

// ubah menjadi true jika Anda ingin notifikasi di email
var emailNotification = false;
var emailAddress = "ubah_menjadi_email_anda";



// DO NOT EDIT THESE NEXT PARAMS
var isNewSheet = false;
var recivedData = [];

/**
 * this is a function that fires when the webapp receives a GET request
 * Not used but required.
 */
function doGet( e ) {
	return HtmlService.createHtmlOutput( "Yepp this is the webhook URL, request received" );
}

// Webhook Receiver - triggered with form webhook to pusblished App URL.
function doPost( e ) {
	var params = JSON.stringify(e.parameter);
	params = JSON.parse(params);
	insertToSheet(params);

	// HTTP Response
	return HtmlService.createHtmlOutput( "post request received" );
}

// Flattens a nested object for easier use with a spreadsheet
function flattenObject( ob ) {
	var toReturn = {};
	for ( var i in ob ) {
		if ( ! ob.hasOwnProperty( i ) ) continue;
		if ( ( typeof ob[ i ] ) == 'object' ) {
			var flatObject = flattenObject( ob[ i ] );
			for ( var x in flatObject ) {
				if ( ! flatObject.hasOwnProperty( x ) ) continue;
				toReturn[ i + '.' + x ] = flatObject[ x ];
			}
		} else {
			toReturn[ i ] = ob[ i ];
		}
	}
	return toReturn;
}

// normalize headers
function getHeaders( formSheet, keys ) {
	var headers = [];
  
	// retrieve existing headers
    if ( ! isNewSheet ) {
	  headers = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }

	// add any additional headers
	var newHeaders = [];
	newHeaders = keys.filter( function( k ) {
		return headers.indexOf( k ) > -1 ? false : k;
	} );

	newHeaders.forEach( function( h ) {
		headers.push( h );
	} );
	return headers;
}

// normalize values
function getValues( headers, flat ) {
	var values = [];
	// push values based on headers
	headers.forEach( function( h ){
		values.push( flat[ h ] );
	});
	return values;
}

// Insert headers
function setHeaders( sheet, values ) {
	var headerRow = sheet.getRange( 1, 1, 1, values.length )
	headerRow.setValues( [ values ] );
	headerRow.setFontWeight( "bold" ).setHorizontalAlignment( "center" );
}

// Insert Data into Sheet
function setValues( sheet, values ) {
	var lastRow = Math.max( sheet.getLastRow(),1 );
	sheet.insertRowAfter( lastRow );
	sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ values ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}

// Find or create sheet for form
function getFormSheet( formName ) {
	var formSheet;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();

	// create sheet if needed
	if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName( formName );
      isNewSheet = true;
	}
	return activeSheet.getSheetByName( formName );
}


// magic function where it all happens
function insertToSheet( data ){
	var flat = flattenObject( data );
	var keys = Object.keys( flat );
	var formName = data["form_name"];
	var formSheet = getFormSheet( formName );
	var headers = getHeaders( formSheet, keys );
	var values = getValues( headers, flat );
	setHeaders( formSheet, headers );
	setValues( formSheet, values );
	
    if ( emailNotification ) {
		sendNotification( data, getSeetURL() );
	}
}

function getSeetURL() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getActiveSheet();
  return spreadsheet.getUrl();
}

function sendNotification( data, url ) {
	var subject = "A new Elementor Pro Froms subbmition has been inserted to your sheet";
  var message = "A new subbmition has been recived via " + data['form_name'] + " form and inserted into your Google sheet at: " + url;
	MailApp.sendEmail( emailAddress, subject, message, {
		name: 'Automatic Emailer Script'
	} );
}

Selanjutnya klik Deploy - New Deployment, lalu klik icon gear dan pilih Web App.

Anda dapat menulis deskripsi, misal seperti tujuan menjalankan script ini, dan pastikan mengubah 'Who has access' menjadi Anyone. Lalu, klik Deploy.

Tahap akhir dari Deploy, Anda perlu melakukan persetujuan, klik 'Authorize access'.

Anda akan ditampilkan satu popup lagi, masuk ke akun Google Anda, selanjutnya klik Advanced - Go to capture lead form script (unsafe). Lalu hanya perlu Allow.

Selanjutnya copy tautan Web app (Webhook) yang akan digunakan untuk integrasi Elementor ke Google Sheets, dan simpan ditempat yang bisa Anda lihat kembali nanti.

Klik Run pada navigasi untuk menjalankan script tersebut.

Nah, sekarang saatnya menghubungkannya dengan Elementor. Karena saya masih membuka halaman form saya, saya hanya perlu menambahkan webhook saja.

Klik form - Action after submit - hapus email dan tambahkan Webhook. Pada bagian Webhook masukkan tautan Webhook yang anda dapatkan dari Deploy script tadi, lalu Simpan.

*Anda dapat menemukan tautan Webhook di bagian Deploy - Manage Deployment.

Untuk memastikan bahwa integrasi ini berhasil, coba submit form tersebut menggunakan mode samaran di browser kesayangan Anda.

Berhasil! Anda dapat melihat hasilnya langsung di Google Sheets yang Anda buat.

Sekarang Anda dapat mengumpulkan prospek dan mengelolanya langsung di Google Sheets.

Penutupan

Saya mencoba integrasi Elementor ke Google Sheets berdasarkan permintaan klien, sehingga memudahkan mengelola prospek yang masuk, mengukur, dan memperhitungkan banyak hal.

Saya mencoba menguraikan sebaik mungkin, sehingga artikel ini bermanfaat untuk Anda.