「今あなた以外に○○名がこのサイトを見ています！」をGoogle Analyticsで簡単実装！

はじめに

少し前に話題になったこの記事。
旅行予約サイトの「今あなた以外に○○人が見ています」はウソだったことが判明 - GIGAZINE

「これってGoogle AnalyticsのRealtimeの情報をAPIで取得すれば結構簡単に実装できるんじゃないかな…」と思い立ち、実装してみましたという話。

システム全体

イメージ的には下記の様な形で実装しました。

更新

①GAS(Google Apps Script)でGoogleAnalyticsのRealtime情報を取得(１分単位)
②取得した情報をスプレッドシートに書き込み

取得

①他のアプリからHTTPによるGET要求
②要求に対しスプレッドシート内最新値を検索
③最新値を返信
※GASにてHTTPサーバを構築しています。

構築

1.準備：Analytics側(アカウント権限追加)

Analytics側に利用するアカウントにデータを参照する権限を付与する必要があります
下記の手順で行うことが出来ます。

①管理をクリック

②ユーザ管理

③ユーザ追加

④ユーザ追加２

メールアドレスにGoogle Apps Scriptを使うGoogleユーザを入力し、新規ユーザにメールで通知するのチェックを外し、「追加」ボタンをクリックしてください。

2.準備：Analytics側(ビューID追加)

下記の方法でビューIDを取得しておきます

①管理をクリック

②ビューの設定

この画面の「ビューID」をコピーしておく

3.準備：GAS側(Google AnalyticsAPI許可)

次は、GAS側で設定をしてきます。
Google Analytics APIを許可します。

①スプレッドシート

「ツール」>「スクリプトエディタ」を選択

②スクリプトエディタ

「リソース」＞「Googleの拡張サービス」を選択

③Googleの拡張サービス

「Google Analytics API」をオンにして「OK」を選択

4.コーディング

下記のコードをコピーし貼り付けます。
**[VIEW_ID]**の部分にコピーしておいた「ビューID」を貼り付けます。

function getRalTimeUser() {  
  var ret = Analytics.Data.Realtime.get('ga:[VIEW_ID]', 'rt:activeUsers')  
  return ret.totalsForAllResults["rt:activeUsers"]  
}  
  
function main() {  
  var raltimeuser = getRalTimeUser();  
  var sheet = SpreadsheetApp.getActiveSheet();  
  sheet.appendRow([raltimeuser, new Date()]);  
}  
  
function getSeetRalTimeUser(){  
  var sht = SpreadsheetApp.getActiveSheet();  
  var _row = sht.getLastRow();  
    
  var _count = sht.getRange(_row,1).getValue();  
  var _time  = sht.getRange(_row,2).getValue();  
  return [_count,_time]  
}  
  
function doGet(e) {  
  var out = ContentService.createTextOutput();  
  out.setMimeType(ContentService.MimeType.JSON);  
  out.setContent(JSON.stringify(getSeetRalTimeUser()));  
  return out;  
}  

5.準備：GAS側(タイマー設定)

コーディングで作成した関数を定期実行するように設定します。
これにより、スプレッドシートに最新の人数が1分置きに更新されるようになります。

① スクリプトエディタ

タイマーアイコンをクリック

②トリガー設定画面

下記の手順でトリガーを設定

画面通りに設定して「保存」をクリック

保存が完了すると、実行するユーザ認証が始まります。
自己責任にて許可を行ってください。

③Googleアカウント 認証確認

このアプリケーション実行するアカウントを選択

「このアプリケーションは確認されていません」と表示されますが「詳細」をクリック

下側の「アプリ名(安全ではないページ)に移動」をクリック

「許可」をクリック

準備(GAS側：WEBサーバ設定)

①スクリプトエディタ

「公開」>「ウェブアプリケーションとして導入…」をクリック

②ウェブアプリケーション設定

「バージョン」に数値を入力
「Who has access to app」を全ユーザーに変更し、「Deploy」をクリック

③URL生成

URLが生成されます。
コレをコピーしておいてください。

テスト

コピーしたURLにブラウザでアクセスすると、1分単位ですがページを見ているアクティブユーザの数が表示されます。

注意

[注意]流用などは自由ですが、自己責任にてお願いいたします。
(私自身軽く動きを確認したのみなので…)