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

# はじめに

少し前に話題になったこの記事。
[旅行予約サイトの「今あなた以外に○○人が見ています」はウソだったことが判明 - GIGAZINE](https://gigazine.net/news/20191021-one-travel-number-rundom/)

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

# システム全体

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/44235898-d38b-f630-94b6-096238ac792c.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/fc3b88c3-05c0-e4ec-68f7-1ce664bcd755.png)


# 構築
## 1.準備：Analytics側(アカウント権限追加)
Analytics側に利用するアカウントにデータを参照する権限を付与する必要があります
下記の手順で行うことが出来ます。
### ①管理をクリック
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/0705168e-3d75-1d10-6c37-8209e467f8c1.png">

### ②ユーザ管理
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/397684fe-89e9-ee9e-88b5-9533218677b3.png">

### ③ユーザ追加
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/7da29383-0812-947f-e18f-45afdf9beca2.png">

### ④ユーザ追加２
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/278c0f65-b63a-dad4-d2e4-7ba69ab301c6.png">
メールアドレスにGoogle Apps Scriptを使うGoogleユーザを入力し、新規ユーザにメールで通知するのチェックを外し、「追加」ボタンをクリックしてください。

## 2.準備：Analytics側(ビューID追加)
下記の方法でビューIDを取得しておきます

### ①管理をクリック
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/0705168e-3d75-1d10-6c37-8209e467f8c1.png">

### ②ビューの設定
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/e2ca91a5-ce58-edd8-4b44-1a00bec8fdc8.png">

この画面の「ビューID」をコピーしておく
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/237332b8-5c29-05e6-a707-91e58b859d54.png">

## 3.準備：GAS側(Google AnalyticsAPI許可)
次は、GAS側で設定をしてきます。
Google Analytics APIを許可します。
### ①スプレッドシート
「ツール」>「スクリプトエディタ」を選択
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/3a5a764c-c297-8ded-81f9-7fb7b660bea0.png">

### ②スクリプトエディタ
「リソース」＞「Googleの拡張サービス」を選択
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/23831770-c6a1-e89f-97a4-1c62e36583f0.png">

### ③Googleの拡張サービス
「Google Analytics API」をオンにして「OK」を選択
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/35ff4763-5f07-3c55-8cac-2f7de08d125f.png">

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

```js
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分置きに更新されるようになります。

### ① スクリプトエディタ
タイマーアイコンをクリック
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/20f5c43c-60d8-199f-bf6d-31e6f687beac.png">

### ②トリガー設定画面
下記の手順でトリガーを設定

<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/7ecefc5a-0a5b-6524-7033-37ae25d4f41d.png">

画面通りに設定して「保存」をクリック
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/43f52bbd-70f7-e675-a8a0-e63070750a22.png">

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

### ③Googleアカウント 認証確認

このアプリケーション実行するアカウントを選択
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/48e83e72-5d40-e913-b3a2-8c313525de0c.png">
「このアプリケーションは確認されていません」と表示されますが「詳細」をクリック
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/2a669684-c5b4-a646-bd8c-d41ef5d509fc.png">
下側の「アプリ名(安全ではないページ)に移動」をクリック

<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/aaeed9eb-165f-cd03-755c-0cb54bdbb452.png">

「許可」をクリック
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/409eac65-3bfd-86de-d6cd-17491a751683.png">


## 準備(GAS側：WEBサーバ設定)
### ①スクリプトエディタ
「公開」>「ウェブアプリケーションとして導入…」をクリック
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/a6bb008b-dbba-0f09-04dd-649f97f2a748.png">

### ②ウェブアプリケーション設定
「バージョン」に数値を入力
「Who has access to app」を全ユーザーに変更し、「Deploy」をクリック
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/a7906eda-ed29-394f-7e19-837dbc64ae1a.png">

### ③URL生成
URLが生成されます。
コレをコピーしておいてください。
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/fba9c1ae-2e3c-f71c-e713-378b082f12ae.png">

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

<img width="550" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89227/4bcfb684-5b03-6521-599d-7968fa48d362.png">

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