【超初心者用】Google Analyticsデータをチャットワークへ自動投稿する為のマニュアル

多くのIT企業でリモート業務が推奨され、今まで以上にチャットツールが利用されるようになりました。SlackやFacebookメッセンジャー、ChatWorkなどです。

そんななか、今お手伝いをさせて頂いているベンチャー企業さんでChatWorkでAnalyticsのデータを自動投稿したいという話になり、Google Apps Script（以下、GAS）を使うことに。

しかし、HTMLやCSSは本当に靴の先っぽ程度しかかじったことがない僕からすると結構ハードルが高い。いろいろ調べましたが、分かりやすいものでもある程度の知識がある人を前提に書かれているので理解に時間がかかる。

ということで、デザイナーでもエンジニアでもなく、「コーディングってなに？」という超初心者向けに落とし込み、誰でもAnalyticsのデータをChatWorkに自動投稿する方法があると便利なんじゃないかと思い、noteに残すことにしました。

それでも分かんねぇよ！って方もいらっしゃるかと思いますが、コメントを頂ければ修正を加えていこうと思います。また間違っているなどありましたらこちらもお知らせ頂けると幸いです💦

それでは、はじめますね！

■用意するもの

①Googleスプレッドシート（何でもOK、既存のデータ管理しているファイルでも新規作成でも）

②投稿する人のChatWorkのAPIトークン
　└取得はチャットワーク画面の右上の名前の横にある▼をクリックし、「API設定」からAPIトークンを確認してください。企業アカウントに所属している場合、管理者の承認が必要なので、申請ボタンを押したあと管理者に承認してもらってください。

③ChatWorkでの投稿先グループID
　└グループIDは投稿先のグループID（CWではルームIDといいます）をメモしておきます。
例）
https://www.chatwork.com/#!rid●●●●-▲▲▲▲

上記でいうと、「rid（Room IDの略）」のあとの数字になります。つまり、「●●●●」のこと。

④ChatWorkClient for Google Apps Scriptのプロジェクトキー
こちらはChatWorkとGoogleを連携させるためのプロジェクトキーのことで、「M6TcEyniCs1xb3sdXFF_FhI-MNonZQ_sT」です。こちらは固定なので、ChatWorkとGoogleを連携させたい場合はすべてこのプロジェクトキーになります。

準備するものは以上になります。
それでは、実際に連携させていきましょう！

1.スプレッドシートとGoogleAnalyticsを連携させる

まずは「用意するもの①」で紹介したGoogleスプレッドシートです。
このスプレッドシートの右上にある「アドオン」から「アドオンを取得」をクリックし、「GoogleAnalytics」をインストールします。
※アドオンとは文字通り拡張機能のことで、スプレッドシートをより使いやすくしたり多機能にするためのアプリのようなものです。

インストールすると、下記の画像にあるように「アドオンを取得」の上に「Google Analytics」というアドオンが表示されます。
既に取得されている場合も表示されています。

アドオンを取得したら、GoogleAnalyticsのアドオンから「Creat new report」をクリック。

クリックすると下図のようなレポート項目入力画面が表示されます。

「Create a new report」の詳細）
1) Name your report
　└レポート名です。自分や周りが分かりやすいものを設定しましょう。

2) Select a view
　└Analyticsから引っ張ってきたいメディアアカウントをプルダウンで選択します。「note」というメディア名のデータを引っ張ってきたい場合は「note」を選択。
　もし指定のメディアのAnalyticsが選べない状態のときはスプレッドシートにログインしているアカウントがAnalyticsの閲覧権限がない状態である可能性があります。
閲覧権限を付与してもらうか、閲覧できるGoogleアカウントに変更してこのスプレッドシートを操作してください。

3) Choose configuration options
　└Metrics：取得したいデータを選びます。枠内をクリックすると表示させたい項目が表示されます。表示させたい項目は複数選ぶことができますので、必要な項目を選ぶようにしましょう。
例えば「ユーザー数・新規ユーザー数・PV・直帰率」を知りたい場合、「Users,NewUsers,Pageviews,BounceRate」と設定します。

　└Dimensions：データの切り口を設定します。dateやUser Typeなどでレポートが作れますが、基本的には日別集計の「date」で大丈夫です。

　└Segments：こちらは空欄のままで大丈夫です。

以上で設定は完了です！
さっそく青色ボタンの「Create Report」をクリックしてみましょう。

すると、「Report Configuration」というシートが作成されました。

次に実際にレポートを出力してみます。
「アドオン」⇒「Google Analytics」⇒「Run Reports」をクリックしてみましょう。

すると、「（1） Name your reportで作成した名称）」のシートが作成され、Analyticsのデータが反映されました。

データは反映されましたが、このままではD列の「Bounce Rate（直帰率）」のデータが0.91234…などとちょっと見にくくなっています。
なので、分かりやすくするために「％」で表示してあげるといいです。

上記の図でいうと、D列を全選択し、「表示形式」⇒「数字」⇒「パーセント」を選択します。

％で表示され、見やすくなりましたね！

スプレッドシートに表示させるデータの取得は以上になりますが、毎日アドオンから「Run reports」を押して表示させるのはちょっと手間ですし、忘れることもあります。

なので、スプレッドシートに自動取得してもらうように設定しましょう。

2.Analyticsのデータを自動取得させる

「アドオン」⇒「Google Analytics」⇒「Schedule reports」をクリックします。

クリックして「Enable reports to run automatically.」にチェックを入れると、下記のように自動取得する頻度が選べます。

「時間別、日別、週別、月別」とプルダウンで選び、その中から細かく選ぶことができます。
毎日見るものなら「every day」に設定し、朝4〜5時や朝6〜7時などお好きな時間に設定してください。
※ChatWorkに自動投稿させる時間より早い時間を設定するようにしましょう。そうしないと、前日のデータを投稿したいのにデータを取得していないため2日前のデータを投稿することになってしまいます。

これで毎日自動でAnalyticsのデータを取得することができます！
次は、この取得したデータをChatWorkに投稿するスクリプトを組みましょう！

3.GoogleAnalyticsのデイリーレポートをChatWorkに自動投稿させるスクリプト

先ほどのファイルの、「ツール」⇒「スクリプト エディタ」を開いてください。

すると、下記のような画面が表示されます。

この「コード.gs」の中にスクリプトを入力して、ChatWorkに自動投稿させます。
※スクリプトとは台本のことです。スクリプトに入力する内容は、ロボットにスプレッドシートに入力されている項目を指定して、ChatWorkに投稿するという命令を書き込みます。

スクリプトを入力する前に、このプロジェクトとChatWorkを連携させる必要があります。正確には、いつでもいいのですが簡単ですし最初に設定しておくと忘れないのでオススメです。

「リソース」⇒「ライブラリ」を選択します。

すると、このプロジェクト名を求められますので、「ChatWork自動投稿スクリプト」など、自分や周りが分かりやすい名前をつけてあげてください。

「Add a library」という項目が表示されます。
ここで「用意するもの④ChatWorkClient for Google Apps Scriptのプロジェクトキー」を入力して追加してください。⇒M6TcEyniCs1xb3sdXFF_FhI-MNonZQ_sT

追加すると、「ChatWorkClient」というタイトルが表示されるので、その右にある「バージョン」のプルダウン項目をクリックし、最新のバージョンを選択します。
今回は「18 add getRooms」を選択。

「Identifier」や「Development mode」は触らずにそのままで構いません。
保存ボタンを押して、ChatWorkとの連携は完了です。

では実際にスクリプトを入力してあげましょう。
スクリプトの入力をイチから作ろうとするとプログラマーでない限り、理解するのに結構時間がかかると思います。
なので今回はテンプレートを用意しました。そのテンプレートに手を加えることによってスクリプトを完成させましょう。

今回は下記を例として進めさせて頂きます。

※●●にはメディア名、▲▲▲はチャットワークAPI、■■■はチャットワークのルームIDが入ります。

ここのスクリプトの元になっているのは、下記の記事からです。とても分かりやすく、何度も何度も読ませて頂きました。ありがとうございますmm

GASでチャットワークにGoogleアナリティクスの前日レポートを自動送信

【実際のスクリプト】

function cwFromGA() {

 var mySS=SpreadsheetApp.getActiveSpreadsheet(); //スプレッドシートを取得
 var sheetDaily=mySS.getSheetByName("●●データ集計"); //dailyシートを取得

 var rowDaily=sheetDaily.getDataRange().getLastRow(); //Dailyシートの使用範囲のうち最終行を取得

 var yDate = sheetDaily.getRange(rowDaily,1).getValue();

 // チャットワークに送る文字列を生成
 var strBody = "おはようございます！\n●●のデイリーレポートをお届けします。"  + "\n" + "\n" +
     "[info][title]●●_昨日のデータ " +
     Utilities.formatDate(yDate, 'JST', 'yyyy/MM/dd') + "[/title]" +  //ga:date
     "ユーザー： "
     + sheetDaily.getRange(rowDaily,2).getValue() + "\n" + //ga:users
     "ページビュー： "
     + sheetDaily.getRange(rowDaily,7).getValue() + "\n" + //ga:pageviews
     "直帰率： "
     + Number(sheetDaily.getRange(rowDaily,5).getValue()*100).toFixed(1) + "%\n" + "[/info]"  + "\n" + "\n" + "過去のデータや詳細はこちらをご確認ください。https://bit.ly/~~" + "\n" +"本日もよろしくお願いします。";//ga:bounceRate


 // チャットワークにメッセージを送る
 var cwClient = ChatWorkClient.factory({token: '▲▲▲'}); //チャットワークAPI
 cwClient.sendMessage({
   room_id:■■■, //ルームID
   body: strBody
 });
}

【実際の投稿画面】

はい、言語の知識がない人からすると訳が分かりませんね💦
これだけ見て苦手意識が出てくるかもしれないので、もう少し分かりやすくしてみましょう！

3-1.スクリプトを理解する

先ほど【実際のスクリプト】に記載されているコードは、以下のように3つに分けられます。

①Analyticsデータが記載しているスプレッドシートに対するスクリプト

function cwFromGA() {

 var mySS=SpreadsheetApp.getActiveSpreadsheet(); //スプレッドシートを取得
 var sheetDaily=mySS.getSheetByName("●●データ集計"); //dailyシートを取得

 var rowDaily=sheetDaily.getDataRange().getLastRow(); //Dailyシートの使用範囲のうち最終行を取得

 var yDate = sheetDaily.getRange(rowDaily,1).getValue();

②ChatWorkに投稿する文章に対するスクリプト

 // チャットワークに送る文字列を生成
 var strBody = "おはようございます！\n●●のデイリーレポートをお届けします。"  + "\n" + "\n" +
     "[info][title]●●_昨日のデータ " +
     Utilities.formatDate(yDate, 'JST', 'yyyy/MM/dd') + "[/title]" +  //ga:date
     "ユーザー： "
     + sheetDaily.getRange(rowDaily,2).getValue() + "\n" + //ga:users
     "ページビュー： "
     + sheetDaily.getRange(rowDaily,7).getValue() + "\n" + //ga:pageviews
     "直帰率： "
     + Number(sheetDaily.getRange(rowDaily,5).getValue()*100).toFixed(1) + "%\n" + "[/info]"  + "\n" + "\n" + "過去のデータや詳細はこちらをご確認ください。https://bit.ly/~~" + "\n" +"本日もよろしくお願いします。";//ga:bounceRate

③ChatWorkで投稿する人や場所についてのスクリプト

 // チャットワークにメッセージを送る
 var cwClient = ChatWorkClient.factory({token: '▲▲▲'}); //チャットワークAPI
 cwClient.sendMessage({
   room_id:■■■, //ルームID
   body: strBody
 });
}

それぞれ一行ずつ説明していきますが、前提知識としてこれだけ覚えておくととても理解が早くなります。

スクリプトのなかで「var mySS」とか「var SheetDaily」など、「var 〜」と記載がありますが、この「var」とは「変数」のことです。
数学でいう、xやyと同じです。「y＝3.141492」だった場合、「６× y＝6y」になるのと一緒で、変数を使うことで長くなってしまいがちなスクリプトが短く分かりやすくなるため、使われてます。

それでは、「①Analyticsデータが記載しているスプレッドシートに対するスクリプト」に対して一つずつ説明していきます。

var mySS=SpreadsheetApp.getActiveSpreadsheet(); 

これは「スプレッドシートに対して命令をするよ」、ということを指示するためのスクリプトです。最初に作成したAnalyticsのデータを反映させたスプレッドシートのことですね。

var sheetDaily=mySS.getSheetByName("daily"); 

スプレッドシートの中の「daily」というシート名に対して命令するよ、ということを支持するためのスクリプトです。
先ほど作成したスプレッドシートでいうと「●●のレポート」のところを指してあげます。
なので、今回作成したスプレッドシート用に変換すると、下記になります。

var sheetDaily=mySS.getSheetByName("●●のレポート");  

では次、

var rowDaily=sheetDaily.getDataRange().getLastRow(); 

これは、スプレッドシートの最後の行のAnalyticsデータを取得してよ、という命令を記載しています。

var yDate = sheetDaily.getRange(rowDaily,1).getValue();

こちらは、スプレッドシートの最後の行に記載している日付を取得してよ、という命令を記載しています。

これで、スプレッドシートの「●●のレポート」シートの最後の行のデータを取得するというスクリプトが完成しました。

続いて、「②ChatWorkに投稿する文章に対するスクリプト」の内容のスクリプトです。

var strBody = "おはようございます！\n●●のデイリーレポートをお届けします。\n\n" +

ここに記載しているのは投稿内容の文章です。
気になるものとしては「\n」ですね。これは「改行」を表しています。スクリプトでは、改行してもそのまま反映されません。なので、“ここで改行しますよ”という命令をしなければいけません。それが「\n」になります。一行空けたい場合は「\n\n」と2回続けて記載します。

また、今回のような文章を記載する場合、文章だということがロボットに理解してもらうために “ ” でくくるルールになっているので忘れないようにしましょう。
※「“”」でなくても、シングルクォーテーション（’）やバックダッシュ(`)で囲んでもOKです

「＋」は「連結」、という意味で文字とデータ、データとデータが繋がってスクリプトを記載するときに別物であることを示すために使います。

次は枠内の説明を一気にしてしまいます。

     "[info][title]●●_昨日のデータ " +
     Utilities.formatDate(yDate, 'JST', 'yyyy/MM/dd') + "[/title]" +  //ga:date
     "ユーザー： "
     + sheetDaily.getRange(rowDaily,2).getValue() + "\n" + //ga:users
     "ページビュー： "
     + sheetDaily.getRange(rowDaily,7).getValue() + "\n" + //ga:pageviews
     "直帰率： "
     + Number(sheetDaily.getRange(rowDaily,5).getValue()*100).toFixed(1) +

[info]や[title]についてはChatWorkで普段お使いになっているかと思うので割愛します。

採用バンク_昨日のデータ " +
     Utilities.formatDate(yDate, 'JST', 'yyyy/MM/dd') 

枠内のタイトル部分に当たります。ここにある「yDate」は青のところで行った変数「最後の行に記載している日付を取得してよ」に当たります。その横に表記がありますが月日だけでよいのなら`MM/dd`と記載します。

"ユーザー： "
     + sheetDaily.getRange(rowDaily,2).getValue() + "\n" + 

これは指定したシート（つまり、●●のレポート）のシートの最終行に記載のある左から2列目（つまりB列）の数字を持ってくることを表しています。

そうすることで、下記のように投稿されます。

「新規ユーザー数」や「ページビュー」「直帰率」も同様です。

続いて、「③ChatWorkで投稿する人や場所についてのスクリプト」のスクリプトです。

var cwClient = ChatWorkClient.factory({token: '▲▲▲'}); 

まず、ここで必要になるのが「用意するもの②投稿する人のChatWorkのAPIトークン」です。

この「token:'▲▲▲'」の部分に投稿する人のAPIトークンを入力します。
APIトークンを知っていれば誰のアカウントでも投稿できますが、投稿する人がChatWorkのグループのメンバーでないと投稿はできません。エラーになってしまいますので注意しましょう。

続いてメッセージを投稿する場所と内容です。

cwClient.sendMessage({
   room_id:■■■, 
   body: strBody
 });

「room_id」は「用意するもの③ChatWorkでの投稿先グループID」になります。

「body」の「strBody」は先ほどの「②ChatWorkに投稿する文章に対するスクリプト」部分で
var strBody = "おはようございます！〜
と設定した内容を指定しています。

以上でスクリプトの説明になります。
もう一度まとめると下記になります。

文章がそのままでいい場合、●●のメディア名、▲▲▲のチャットワークAPI、■■■のチャットワークのルームIDを変更するだけで使用できますのでご自由に！

function cwFromGA() {

 var mySS=SpreadsheetApp.getActiveSpreadsheet(); //スプレッドシートを取得
 var sheetDaily=mySS.getSheetByName("●●データ集計"); //dailyシートを取得

 var rowDaily=sheetDaily.getDataRange().getLastRow(); //Dailyシートの使用範囲のうち最終行を取得

 var yDate = sheetDaily.getRange(rowDaily,1).getValue();

 // チャットワークに送る文字列を生成
 var strBody = "おはようございます！\n●●のデイリーレポートをお届けします。"  + "\n" + "\n" +
     "[info][title]●●_昨日のデータ " +
     Utilities.formatDate(yDate, 'JST', 'yyyy/MM/dd') + "[/title]" +  //ga:date
     "ユーザー： "
     + sheetDaily.getRange(rowDaily,2).getValue() + "\n" + //ga:users
     "ページビュー： "
     + sheetDaily.getRange(rowDaily,7).getValue() + "\n" + //ga:pageviews
     "直帰率： "
     + Number(sheetDaily.getRange(rowDaily,5).getValue()*100).toFixed(1) + "%\n" + "[/info]"  + "\n" + "\n" + "過去のデータや詳細はこちらをご確認ください。https://bit.ly/~~" + "\n" +"本日もよろしくお願いします。";//ga:bounceRate


 // チャットワークにメッセージを送る
 var cwClient = ChatWorkClient.factory({token: '▲▲▲'}); //チャットワークAPI
 cwClient.sendMessage({
   room_id:■■■, //ルームID
   body: strBody
 });
}

スクリプトの記載が完了したら、「フロッピーディスク」のマークをクリックして保存します。

では、実際に作成したスクリプトが実行されるのかテストしてみましょう。
テスト投稿は、作成したスクリプトをそのまま行ってもいいですし、「ルームID」を自分の「マイチャット」の「rid」に変更して自分だけが分かるようにテスト投稿することをオススメします。

実際にスクリプトを動かすには「保存ボタン」の2つ右にある「▶」ボタンをクリックします。
どうでしょうか？エラーなく、投稿されましたでしょうか。

エラーが出る場合、下記のようにエラー場所が表示されるので、どこが間違っているのか、記載ミスなどしていないか今一度確認しましょう。

上記の図の場合、「行6」つまり6行目のコードに何かしら問題があることが分かります。

自分で確認しても分からない場合、エラーメッセージをコピペして検索すると、同じようなエラーを出した人が解決策を載せてくれていたりします。

いよいよ最後になります。
データも取得した、ChatWorkへの連携もスクリプトも完成した。
最後にやるのはこのスクリプトを自動投稿するようにスケジュールを組みましょう！

4.スクリプトを自動投稿させる

スクリプトの画面から「時計マーク」のボタンをクリックして自動投稿のスケジュールを設定します。

クリック後に下のように表示されたら、右下にある「＋トリガーを追加」をクリックします。

すると下記のようにトリガー設定画面が表示されます。

ここで変更するのは「イベントのソースを選択」から下の部分。

イベントのソースを選択：時間主導型
時間ベースのトリガーのタイプを選択：日付ベースのタイマー
時刻を選択：午前8〜9時

上記に設定することで、毎日朝8〜9時の間に投稿する命令が組まれました。
保存を押して、下記のようにトリガーが表示されれば完了です。

以上で完了となります！

いかがだったでしょうか？思っていた以上になり、長文になってしまいました。

これが少しでも役立てば幸いです🌟

励みになりますので、よければ「いいね」やシェア、フォローをよろしくお願いします❗