GAS（Google Apps Script）でブログのアクセス解析データをWebサイトに自動表示する方法
- 本間 充/マーケティングサイエンスラボ所長
- 7月15日
- 読了時間: 5分
「自分のブログの人気記事や検索キーワードを、サイト上でリアルタイムに紹介できたらカッコいいな…」
そう思ったことはありませんか？でも、毎日データを手作業でコピーして、Webサイトを更新するのは本当に大変ですよね。
この記事では、そんな面倒な作業を完全に自動化し、GoogleスプレッドシートとGAS（Google Apps Script）だけで、あなたのサイトに「動く」アクセス解析レポートを埋め込む方法を、初心者の方にも分かるようにステップバイステップで解説します。
完成形はこちらのページで実際に動いています。皆さんのサイトでも同じものが作れますよ！
そもそもGASって何？なぜ便利なの？
GAS（Google Apps Script）とは、Googleが提供するプログラミング環境のこと。普段使っているGmailやスプレッドシート、Google Analyticsなどを、簡単なプログラムで連携・自動化できるのが最大の特徴です。
サーバー不要、完全無料で使える
JavaScriptベースで学びやすい
Googleサービスとの連携が驚くほど簡単
今回のプロジェクトのように「Googleのサービスからデータを取ってきて、Webページとして表示する」といった用途には、まさに最適なツールなんです。
自動化の仕組み：2つのプロセスで実現する「高速表示」
今回のシステムは、大きく2つのプロセスに分かれています。これがあらゆる作業を自動化し、Webページの表示を常に高速に保つための秘訣です。
データ収集プロセス（裏方・働き者） あらかじめ設定した「トリガー（時間になると動き出す仕掛け）」が、1日に数回、自動で起動します。Google AnalyticsとSearch Consoleにアクセスし、「過去30日間の人気記事Top10」「キーワードTop10」などのデータを全て取得。取得したデータを、Webページ表示用の「倉庫」であるGoogleスプレッドシートに綺麗に整理して書き込みます。
Webページ表示プロセス（表舞台・接客係） 読者があなたのサイトを訪れた瞬間に起動します。このプロセスは、時間のかかるデータ収集は一切行いません。代わりに、すでに「倉庫」に準備されているスプレッドシートのデータを高速で読み込み、HTMLに変換して表示することだけに集中します。
このように「データ集め担当」と「表示担当」に役割を分担させることで、読者を待たせることなく、いつでも瞬時にレポートを表示できるのです。
実践！3つのステップで実装しよう
では、具体的にどうやって作るのか、大きな流れを見ていきましょう。
ステップ1：準備と権限設定
まず、GASプロジェクトの土台となるGoogleスプレッドシートを用意します。次に、このプロジェクトがGoogleの各サービスと「会話」できるように、API（データをやり取りするための窓口）を有効化します。
Google Analytics Data API: アクセス数などを取得
Google Search Console API: 検索キーワードやクリック数を取得
これらはGoogle Cloud Platformという管理画面から有効にします。さらに、スクリプトに「私はこれらのデータにアクセスします」という許可証（OAuthスコープ）をappsscript.jsonという設定ファイルに記述します。ここが一番の専門用語ゾーンですが、一度設定すれば完了です！
ステップ2：データ収集スクリプトの作成
次に、「裏方」となるデータ収集用の関数を作成します。
人気記事ランキング: Google Analyticsに対し、「過去30日間でセッション数が多いブログ記事を10件教えて」と問い合わせるプログラムを書きます。
キーワードランキング: これが一番の腕の見せ所。Search Consoleから「クリック数が多い検索キーワードとURLの組み合わせTop10」を取得します。しかし、この時点では「記事タイトル」が分かりません。そこで、取得した10件のURLにプログラムが一つずつアクセスし、ページのHTMLからタイトルを抽出する、という少し高度な処理を加えています。
これらの処理をまとめた関数を作成し、「1時間おきに実行」というトリガーにセットすれば、データ収集プロセスは完成です。
ステップ3：Webページ表示用スクリプトの作成
最後に「接客係」となるWebページ表示用のスクリプトdoGet(e)を作成します。
この関数は、読者がアクセスしたURLに応じて、表示するレポートを切り替える役割を持ちます。
.../exec → 30日間ランキングを表示
.../exec?period=7 → 7日間ランキングを表示
.../exec?view=keywords → キーワードランキングを表示
それぞれの条件に応じて、ステップ2で倉庫（スプレッドシート）に保存したデータを読み込み、あらかじめ用意しておいたHTMLテンプレートに流し込みます。
最後に、このスクリプトを「ウェブアプリ」としてデプロイ（公開）し、アクセス権を「全員」に設定します。発行されたURLを自分のサイトに<iframe>タグで埋め込めば、ついに自動更新されるレポートの完成です！
実際に、今回使用しているのは、以下のアドレスなります。動作確認のためには、下記のアドレスをブラウザーのアドレスバーに入力してくださいね。
https://script.google.com/macros/s/AKfycbyoZe9U2lF5-XdJqHN8Y8eRiQFyvfOYuQwx9tAUV6aZf4Ib1nvWQOaWcpewSXJMGwmV/exec?view=keywordsまとめ：自動化でサイトをリッチにしよう
いかがでしたか？専門用語も出てきましたが、一つ一つのステップは非常に論理的です。
一度この仕組みを構築してしまえば、GASが24時間365日、あなたに代わってデータを更新し、常に新鮮な情報をサイト訪問者に見せてくれます。手作業での更新から解放されるだけでなく、読者にとっても価値のあるコンテンツを提供できる、まさに一石二鳥のテクニックです。
ぜひ、この記事を参考に、あなたのサイトの「セルフ・デジタルマーケティング」に挑戦してみてください！
Comments