마케터의 생산성에 날개를 달아줄 웹폼(Web form)만들기

사전예약, 리드 확보, 연락처 수집, DB 관리등 마케터들에게 산처럼 쏟아지는 여러 Task 중에서 가장 골치 덩어리라고 하면 잠재고객들로부터 어떤 예약을 받거나, 사전에 모집을 받는 등의 일들 입니다.

 

단순하게 메일링 리스트에 가입시키는 것부터 어떤건 추적이 가능하고, 어떤건 추적이 불가능하고......

골치 아프시죠?

 

구글폼을 활용한다면야 아웃풋에 대한 부분은 어느정도 관리가 가능하지만 주목하고 싶었던 부분은 Input 데이터 입니다.

 

100여가지의 QR코드에 미묘하게 다른 파라미터값(색상, 위치, 메시지)등이 있다고 가정하면 이를 통해서 온 유입간의 실제 전환율을 알고 싶을 수도 있잖아요? (물론 안궁금하실 수도 있겠지만 궁금해 해주세요.. > <)

 

웹폼? 그거 어떻게 만드는건데

일단 웹에서 작동하는 폼양식이기 때문에 웹폼이라고 이름을 붙였지만 유명한 설문 작성도구들이 사실 굉장히 많습니다. 타입폼부터 시작해서 마케터가 건드릴 수 있는 폼 종류는 굉장히 다양하고 또 구글폼에 애드온을 붙이거나 하면 이렇게까지 안만들어도 될지도 모릅니다. 하지만 저희가 오늘 할 건 자유도 끝판왕의 웹 폼을 챗GPT와 함께 만들어보는 것이지요!

 

먼저 결과부터 보자면

타임스탬프에 입력시간 > 색상, 위치, 메시지는 파라미터부분 ?color=red&location=Hello&message=image.jpg 라는 뒷부분을 긁어와서 매핑하고 Uid 라는 랜덤 변수를 창출해서 일치값을 주도록 했습니다.

이전 타임스탬프는 뒤로 (F열) 보내어 실제 방문시간과 폼 제출시간을 추적하고 싶었구요. 나머지는 이메일,연락처,이름,인스타그램ID를 받는 평범한 폼 구성이에요.

 

무엇으로 만들 수 있나

구글 스프레드시트는 Json형태의 데이터 덩어리를 쉽게 보낼 수 있게끔 설계되어 있습니다. 예를 들어 여러분이 개발지식이 조금 있으시다면 Node.js 등을 통해 스프레드시트로 데이터 덩어리를 보내는 스크립트를 짜실 수도 있습니다.

 

스프레드시트 기반으로 작업한다고 하면 구글 서버사이드와 스프레드시트 간의 통합적인 기능 운영의 차이를... 좀 더 알아야 해서 복잡하긴 합니다만 익숙해지고 나면 이것도 나름 편합니다. (노가다임에는 변함이 없지만요..)

 

다음은 Node.js를 기반으로 한 스프레드시트 연결 예시 샘플 코드 입니다.

//npm install google-spreadsheet

const { GoogleSpreadsheet } = require('google-spreadsheet');

// Load credentials from a JSON file (service account key)
const credentials = require('./credentials.json');

// Create a new instance of the GoogleSpreadsheet
const doc = new GoogleSpreadsheet('YOUR_SPREADSHEET_ID');

// Authenticate using the service account credentials
async function authenticate() {
  await doc.useServiceAccountAuth(credentials);
  await doc.loadInfo(); // Load the spreadsheet
  console.log('Authenticated and spreadsheet loaded');
}

// Function to write JSON data to the spreadsheet
async function writeDataToSpreadsheet(data) {
  const sheet = doc.sheetsByIndex[0]; // Assuming data will be written to the first sheet
  await sheet.addRow(data); // Append a new row with the JSON data
  console.log('Data written to the spreadsheet');
}

// Usage example
async function main() {
  try {
    // Authenticate with Google Sheets API
    await authenticate();

    // Sample JSON data to be written to the spreadsheet
    const jsonData = {
      name: 'John Doe',
      age: 30,
      email: 'johndoe@example.com'
    };

    // Write the JSON data to the spreadsheet
    await writeDataToSpreadsheet(jsonData);
  } catch (error) {
    console.error('Error:', error);
  }
}

// Run the main function
main();

 

npm install google-spreadsheet

 

를 활용해 활성화한 다음 credentail.json 파일을 올바른 위치에 배치시키고 나시면 해당 코드를 사용하는 페이지에서 입력받는 값 혹은 json 덩어리를 목표 구글스프레드시트에 바로바로 기입하실 수 있습니다.

 

제가 만든 방식 따라하기 1.

제가 만든 방법은 code.gs와 index.html을 활용해서 만들었습니다.

 

code.gs에서는 고유 id 값 발행을 위해 다음과 같은 코드를 사용했어요.

function generateUniqueUserId() {
  var uniqueId = Utilities.getUuid();
  return uniqueId;
}​

 

 

이렇게 생성된 uid가 여러번 실행되면 곤란하기 때문에 글로벌 변수 (전역변수)로 지정해주 었습니다. 다음은 코드 일부분이에요.

var ss = SpreadsheetApp.openById('스프레드시트 ID');
var timestamp = new Date();
var Uid = generateUniqueUserId()

// QR 코드 파라미터와 웹폼 데이터를 기록하는 함수
function recordQRCodeParameters(parameterString) {
  var sheet = ss.getSheetByName('시트1');
  var color = ''; // Set initial value for color
  var location = ''; // Set initial value for location
  var message = ''; // Set initial value for message

  // 파라미터 분석
  var params = parseQRCodeParameters(parameterString);

  if (params) {
    color = params.color || color;
    location = params.location || location;
    message = params.message || message;
  }

  // 스프레드시트에 데이터 기록
  var newRow = [timestamp, color, location, message,Uid];
  sheet.appendRow(newRow);

  return {
    color: color,
    location: location,
    message: message
  };
}

물론 QR코드를 통해서 유입됬을 때 뒤에 배치된 파라미터를 정확히 읽기 위해서는 doGet 함수에서 파라미터를 함수형태로 변환해서 전달해주어야 합니다. 다음은 그 예시 입니다.

 

// 웹 애플리케이션으로 사용하기 위한 doGet 함수
function doGet(e) {
  var template = HtmlService.createTemplateFromFile('index');
  var data = recordQRCodeParameters(e.queryString);
  template.ts = timestamp
  template.color = data.color;
  template.location = data.location;
  template.message = data.message;
  template.Uid = Uid

  return template.evaluate();
}

 

e.queryString 이라는 형태로 뒤에 붙는 파라미터를 전달해주어요. 그 이후 부터는 웹폼의 역할이 커집니다. apps script와 webapp으로 띄워진 웹폼 간의 데이터가 오갈 때 잘 오가게끔 처리하시는게 매우매우 필요합니다.

 

조금은 불편하지만 고객 추적용으로 매우 Best!

엄청 많은 고객을 감당하기엔 아무래도 무료서비스의 한계가 있겠지만 그럼에도 불구하고 10~30분 남짓의 수고스러움으로 굉장히 다양한 데이터를 가진 고객들의 전환에 대한 부분을 간단하게 체크할 수 있는 장점을 가지고 있습니다.

 

위 프로젝트를 아직 온전히 진행하진 않았기 때문에 실제 효과나 결과물에 대해서는 다음 포스팅 때 다뤄보도록 하겠습니다.

 

이런 웹폼을 만들어 보고싶으시거나 외주를 맡기고 싶으시다면 언제든 아래 스토어에서 문의주세요.
https://smartstore.naver.com/zeey/products/8142865672

구글 스프레드 시트 업무 효율화를 도와드립니다. (구매전 문의 필수!) : 스킬샵