Google Apps Script から Queue-it と mPulse の API を 呼び出し、仮想待合室とユーザー体験の状況をリアルタイムに把握する

仮想待合室とユーザー体験の状況をリアルタイムに把握する理由

仮想待合室は Web サイトのピークトラフィック時に有効です。オリジンサーバーに過度なリクエストを通さないために、ユーザーを仮想的な待合室に誘導します。アカマイのパートナーである Queue-it 社は代表的な仮想待合室を提供するサービス・プロバイダーであり、Queue-it というソリューションを提供しています。

Queue-it を導入する多くのサービス提供者が最も大切にしていることはサービスを停止させないことです。さらに、もうひとつ重要なことがあります。それはお客様がストレスなくショッピングをしたりブラウジングできているかです。ユーザー体験とも表現されます。オリジンサーバーが落ちなくても、ユーザー体験が悪ければ本当の意味での顧客満足度を高めることに成功していません。ユーザー体験を計測するには Google 社が開発した Core Web Vitals が一般的となっていますが、仮想待合室を導入したときに分かりやすい指標が Time to First Byte (TTFB) です。TTFB は Core Web Vitals のようにインテリジェントに計算される指標ではありませんが、負荷の上がったサーバーを監視するには有効な指標です。

Queue-it を導入するとき、重要なしきい値として Max Outflow があります。Max Outflow は、オリジンサーバーに分間毎に何セッションを通すかを決定するパラメータです。オリジンの負荷試験の実績をみたり、過去の経験値から算出することが一般的です。導入後も容易にパラメータを変更することができるので、本番イベント中でもチューニングすることができます。

セッションはデバイスやブラウザが異なると、それぞれカウントされます。

以下のグラフは興味深い例です。Max Outflow (一分間にサイトに新規に入れるセッション数）を 3,000 に固定しています（青色）。実際に訪れているユーザー数（正確にはセッション数）は分間 3,000 を超えていません（緑線）。しかし、ある時間から TTFB （赤色）が劣化し、訪れている顧客全体がストレスを抱えながらサイトを利用していることが分かります。

リアルタイムにデータが見えれば、Max Outflow を 2,000 などに落とし、訪れるユーザーの多くを待合室に誘導することでオリジンサーバーの負荷を下げ、待合室から抜け出したユーザーがストレスなくサイトを楽しむようにすることができます。一切待たせたくないというサイトのオーナー様も多数いますが、ユーザーはページが遅延することでエラー画面を見たりするほうを嫌うものです。Queue-it は待ち時間も表示することもできますので、どれだけ待てば良いのかを教えてくれます。人は予測不能なことを避けたいので、待ち時間が分かればその時間を待つ心理的ストレスは軽減されます。

次のグラフは別の例です。17:00 に仮想待合室が全ての新規訪問者に表示されているケースです（グラフを見やすくするために Max Outflow は表示していません）。同時に TTFB が遅くなり、ユーザー体験が悪くなっています。この例でも Max Outflow をもう少し絞ったほうがよいことを教えてくれます。

２つのグラフの例とも仮想待合室の導入によってオリジンサーバーを停止させないという主目的を達成させているものの、エンドユーザー目線で考えるともっと改善する余地があることを教えてくれます。

アカマイが提供するユーザー体験を可視化するリアルタイムモニタリング (RUM) ツールの mPulse を使えば、Core Web Vitals や TTFB だけでなく、複雑な分析も容易にリアルタイムに表示することができます。アカマイ CDN を利用している顧客は mPulse を簡単に導入できます。

仮想待合室の設定は Queue-it のポータルで設定します。待合室に誘導されるセッションは Queue-it 社の SaaS 側で待機します。サイトに戻る権利を獲たユーザーはアカマイで保護されたサイトに誘導されます。Queue-it ではサイトに入ったユーザーの体感を見ることはできませんので、mPulse のようなソリューションが必要となります。

アカマイが提供している Visitor Prioritization Cloudlet と mPulse を利用して待合室とユーザー体験を同一のダッシュボードで表示して運用するケースが Akamai Blog で紹介されています。すでに多くのお客様が利用されています。

Queue-it を使う場合は、仮想待合室のステータスが Queue-it のポータル(GO Queue-it 管理プラットフォーム)上に表示されるため、紹介したように mPulse の UI で表現することができません。

Queue-it 社は導入を容易にするために、アカマイとのインテグレーションに力を入れています。Queue-it 社が開発した Akamai EdgeWorkers のコネクターを使えば、アカマイ CDN と Qeueu-it を容易に統合することができます。下記の記事に設定方法の例が紹介されています。

前振りが長くなってしまいましたが、本記事は最初に示したグラフを Google Sheets (スプレッドシート) で簡単に作成する方法を紹介します。Queue-it と mPulse を利用することが前提となっています。

Google Sheets は下図のように単なる表形式のデータです。このデータから Google Sheets のグラフ機能を使って生成します。

Google Sheets (スプレッドシート） の中では Google Apps Script のコードを利用し、Queue-it と mPulse のそれぞれの API を定期的に呼び出し、スプレッドシートのデータを更新、追記します。Apps Script の Trigger(トリガー) 機能を使えば、呼び出し頻度を自由に設定できます。

Google Apps Script (GAS) のサンプルコード

Google Sheets は Google Apps Script と統合され、スクリプト言語で記述された命令に従ってスプレッドシートのセルを操作できます。Apps Script から Queue-it API と mPulse API を呼び出し、実行単位でスプレッドシートの行を新規追加するサンプルコードが GitHub で公開されています。

Code.js が Google Sheets に割り当てる Apps Script のコードです。

Google Sheets のサンプル

Google のアカウントを取得し、Google Sheets (スプレッドシート）を起動し、新しいファイルを作成します。以下のサンプルコードを参照してください。

作成したスプレッドシートのタブは Q_mPulse としてください。変更する場合は、Apps Script の下記のコードを変更してください。

var sheet = spreadsheet.getSheetByName('Q_mPulse');

作成したスプレッドシートに Apps Script を登録する作業を次に説明します。

Google Sheets に Apps Script を登録する

スプレッドシートの Extensions (拡張）から Apps Script を選択します。

エディターが起動するので、Code.js に先に紹介した GitHub の Code.js をコピー＆ペーストします。

Script Properties の設定

API を使うためにはクリティカルな情報が含まれます。それらのクリティカルな情報は外部変数として Code.js の中に含めないようにしてあります。Apps Script では Script Properties を使って環境変数を設定できます。以下、必要となる環境変数の設定例です。

Project Settings　を開きます。

Script Properties に 4 つの Property を設定します。

4 つの Property は Code.js から呼び出されます。それぞれ、次の用途で使われます。

Script Property	説明
mpulse_APIKEY	mPulse を利用するための API キー
mpulse_Authentication	mPulse API を利用するためのトークン
queueit_ACCOUNT_DOMAIN	Queue-it 社から提供されるドメイン名。例：company_name.api2.queue-it.net
queueit_APIKEY	Queue-it の API を利用するためのキー

mpulse_APIKEY

mPulse を利用するための API キーです。mPulse のポータルにログインし、監視対象の Web App の設定画面にある API Key を使います。

mpulse_Authentication

mPulse API を利用するためのトークンです。

curl --location --request PUT 'https://mpulse.soasta.com/concerto/services/rest/RepositoryService/v1/Tokens' \
--header 'Content-Type: application/json' \
--data-raw '{"apiToken":"<YOUR TOKEN>"}'

API の仕様は以下にあります。

２つ以上テナントを持つ環境をお持ちの方は、次のように Tenant 名を指定します。通常は２つ以上持たないので省略できます。

curl --location --request PUT 'https://mpulse.soasta.com/concerto/services/rest/RepositoryService/v1/Tokens' \
--header 'Content-Type: application/json' \
--data-raw '{"apiToken":"<YOUR TOKEN>", "tenant": "<YOUR mPulse TENANT NAME>"}'

<YOUR TOKEN> は mPulse のユーザーアカウントで発行される API Token を使います。mPulse のポータル画面から My Settings を選択します。

アカウント画面で API Token を発行します。その文字列を使います。

queueit_ACCOUNT_DOMAIN

Queue-it 社から提供されるドメイン名を指定します。次のような API 名となります。 Queue-it Go 管理プラットフォームにログインし、Custoemer Id の文字列をこの変数に設定します。

{YOUR-CUSTOMER-ID}.api2.queue-it.net

queueit_APIKEY

Queue-it の API を利用するためのキーです。以下のメニューから入手します。

Queue-it Developer Page

Apps Script コードでは複数の Queue-it API をコールしています。データを追加する場合は以下の Developer サイトを参照し、Code.js を変更してください。

Apps Script の実行

Google Sheets に Apps Script を割り当て、Script Properties を設定完了すれば、後は実行するだけです。Apps Script の画面で 実行 (Run) をクリックします。

成功すれば、Q_mPulse タブのシートの 3行目に最新のデータが追記されます。

1、２行目がヘッダーとなりますが、ヘッダーの位置を変えるときは、Code.js の下記のコード周辺を変更してくだださい。

  // 入力列の設定(行を挿入して設定)
  sheet.insertRowBefore(3);
  var dateCell = sheet.getRange(3, 1);

トリガー (Trigger)

トリガーを使えば、コードを定期的に起動して、シートの内容を最新に更新してくれます。Apps Script の Trigger メニューから設定します。

初めて使う場合は何もトリガーが設定されていません。create a new trigger. を選択します。

設定画面では、必要な項目を選択します。function ではコードの中のどの関数を呼び出すかを指定します。myFunction を設定してください。あとは起動するタイミングを設定するだけです。以下は、１分毎に起動する例です。

最後に保存します。Save ボタンをおしてください。

Google Cloud Platform の認証

Apps Script を登録するときに、認証が行われます。認証が行われていない場合は、本作業を行う必要があります。Apps Script は Google Cloud Platform (GCP) 上で動作するので、GCP に対して認証認可を行う必要があります。

Apps Sciript で API を実行するだけであれば、GCP 上にユーザーアカウントを作成する必要はありません。

起動するアカウントを選択します。

Google アカウントでログインします。

GCP に対して、Apps Script のコードが信頼できることを確認し、許可します。

API 参考情報

Queue-it API

mPulse API

Grafana を使った可視化

Google Sheets のグラフ化は簡単ですが、Grafana のようなツールを使えば、グラフと現在のリアルタイムの情報をテキストで表示するなど、より感覚的に分かる画面を作成できます。データに対して色で意味をもたせるなど様々表現ができます。警告を赤で表示したり、アラートを飛ばすこともできます。

上記は、Grafana のデータソースを Google Sheets とした例です。今回紹介したデータをソースとして、リアルタイムに可視化することもできます。Grafana には Google Sheets のプラグインが提供されています。

認証情報の設定ができれば、読み込み範囲を指定するだけです。

Akamai Connected Cloud のクラウドサービスを使えば、マーケットプレイスから簡単に Grafana をインストールできます。Grafana 化を簡単に安価にやってみたいという方にはおすすめです。

インストールは数十分で完了します。設定後のアクセスについては下記のページが参考になります。

Google スプレッドシートの一週間分のデータを取り込むくらいであれば、Linode の一番安いプランで十分です。インスタンスを可視化する Longview の表示は以下となります。一番安価なプランでも CPU も RAM も十分です。

まとめ

仮想待合室は特にコロナウイルス感染者が増加してから、世界中でワクチン接種の予約サイトや給付金関連サイトで導入が加速しました。当時、多くの政府関連のサイトでは、アクセス集中による過大なトラフィックを想定しておらず、オリジンの処理能力を超えたアクセスによって、サーバーにアクセスできなくなったというニュースも目にしました。しかしその一方で、仮想待合室の導入でアクセスを容易に捌き切ったサイトもありました。

eコマースやチケット販売などのサービスでもキャンペーンや新製品の発売時期に通常を遥かに超えるアクセスが発生します。サーバーの処理能力を上げても、瞬間的なピークトラフィックは発生しうるので、多くのケースで仮想待合室の導入はサーバー増設と比較してもコスト面での効果が得られます。仮想待合室の導入で平時においても余分なサーバーの処理能力も下げるなどして、適正な値にすることも可能です。そのときに、ユーザー体験となるデータが得られれば、確信をもって意思決定を行い易くなります。mPulse のようなリアルタイムモニタリングはユーザー体験を把握するにはとても有効な手段です。

今回は Queue-it と mPulse の API を Google Apps Script から呼び出し、Google スプレッドシートでグラフ化することを紹介しました。他にも応用できると思いますので、是非お試しください。