隨機分配網路問卷:利用 Google 表單 + DropPages + JavaScript

不知道大家做問卷調查的時候,會不會需要 A/B test,或是有很多份問卷要隨機分配?其實,自己寫一小段程式就可以達到目的囉,本文教你如何透過 Dropbox 空間架設靜態網頁,並寫個 JavaScript 來隨機分配問卷!

之前看見有人貼文請大家填問卷,大概是這樣的形式:

請大家幫忙填寫 XX 問卷,隨便選一個份就可以囉 ~
 1.問卷A:連結 ...
 2.問卷B:連結 ...
 3.問卷C:連結 ...

可是這樣的方式,有點難平均分配受測者進入不同問卷,大家可能會想說不要選第一個,結果造成 2 與 3 的數量多很多。為了不要讓這樣的事情發生,需要有一個隨機分配的轉址網頁,就動手做看看吧!


行前準備

  • 準備好問卷連結們 (例如:Google 表單)
  • 擁有一個 Dropbox 帳號
  • 想要寫點程式的心

架設轉址頁面

如下圖所示,受測者點選縮網址後,就會進入我們在 DropPages 架設的網頁,而這個網頁只有 JavaScript 程式碼,用來隨機轉向到預先設定好的表單。整個轉址過程很快速,受測者是沒有甚麼感覺的 XD

droppage - 隨機分配網路問卷:利用 Google 表單 + DropPages + JavaScript

首先,用 Dropbox 帳號登入 DropPages,來架設個人網頁。當然也可以自己架設網頁,或使用 Google Drive 架靜態網頁,不過 Google 的檔案聯外功能將於 2016/08 關閉,可用的時間不多了。

DropPages 架設教學可以參考:DropPages 三個步驟,打造專屬個人網站,這部份就不多說拉,假設各位已經建立完畢,就可以往下繼續囉


用 JavaScript 隨機轉址

在 DropPages 建立好個人頁面後,可以在 Dropbox 目錄下,看見一個以 droppages 網域為名的資料夾

Dropbox->應用程式->My.DropPages->xxx.droppages.com

xxx 是你申請的子網域名稱,在這個目錄底下,分別又有三個資料夾,我們會在 Content 寫轉址程式,然後修改 Template 上的網頁標題。

dropbox - 隨機分配網路問卷:利用 Google 表單 + DropPages + JavaScript

在 Content/index.txt,加入 JavaScript 程式碼,可以根據表單連結數自行新增

:Base
<script type="text/javascript">;
var url = new Array(); 
url[0] = '表單連結A';
url[1] = '表單連結B'; 
location.href = url[Math.round(Math.random()*(url.length-1))];
</script>

接著修改 Template/base.html,加上標題或內文。這樣做的原因是讓你在分享連結的時候,標題/內文可以被快取,受測者也比較知道點了甚麼東西 XD

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>問卷名稱</title>
 <link href="/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
 {{Body}}
</body>
</html>

修改完後,將檔案關閉,Dropbox 會自動同步至雲端!點擊你的網址就會看到效果了! 如果不想要網址太長,可以再用 Google 短網址簡化

Google 短網址服務 https://goo.gl/

加入Google Analytics

Google 表單本身有流量統計的功能,但經過一層轉址,沒辦法追蹤流量來源,需要安插 Google Analytics 追蹤碼。 修改剛剛的 Content/index.txt,如下所示,這裡的 UA-XXXXXXXX-X 是 GA 追蹤編號。如果沒用過的話,就申請一個試試吧,滿好用的!

:Base
<script type="text/javascript">
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');

var url = new Array(); 
url[0] = '表單連結A';
url[1] = '表單連結B'; 
location.href = url[Math.round(Math.random()*(url.length-1))];
</script>

參考資料

java 寫的隨機自動轉址

Jerry
Jerry

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

3 則留言

發表回應