Help us understand the problem. What is going on with this article?

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

はじめに

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

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

システム全体

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

更新

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

image.png

取得

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

image.png

構築

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

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

①管理をクリック

image.png

②ユーザ管理

image.png

③ユーザ追加

image.png

④ユーザ追加2

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

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

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

①管理をクリック

image.png

②ビューの設定

image.png

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

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

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

①スプレッドシート

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

②スクリプトエディタ

「リソース」>「Googleの拡張サービス」を選択
image.png

③Googleの拡張サービス

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

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

① スクリプトエディタ

タイマーアイコンをクリック
image.png

②トリガー設定画面

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

image.png

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

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

③Googleアカウント 認証確認

このアプリケーション実行するアカウントを選択
image.png
「このアプリケーションは確認されていません」と表示されますが「詳細」をクリック
image.png
下側の「アプリ名(安全ではないページ)に移動」をクリック

image.png

「許可」をクリック
image.png

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

①スクリプトエディタ

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

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

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

③URL生成

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

テスト

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

image.png

注意

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away