GoogleAppsScriptで毎日レポートをSlackへ通知する

  const from = Moment.moment().subtract(1, "days").format("YYYY-MM-DD");
  const to = Moment.moment().subtract(1, "days").format("YYYY-MM-DD");
  const metrics = "ga:pageViews";
  const options = {
    "dimensions": "ga:pageTitle",
    "max-results": 5000,
  };

  const gaReport = Analytics.Data.Ga.get(
    `ga:${PropertiesService.getScriptProperties().getProperty("GA_TABLE_ID")}`,
    from,
    to,
    metrics,
    options,
  );

ChartServiceでグラフ生成

今回いじってみたかった箇所です

DataTableを生成して、Analyticsから取得したレポートデータを逐次突っ込む
チャートを生成する
イメージ化する

  const dataTable = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "Title")
    .addColumn(Charts.ColumnType.NUMBER, "PV");
  gaReport.rows.sort((a,b) => b[1] - a[1]).filter((_,i) => i < 10).forEach(row => {
    dataTable.addRow(row);
  });
  const chart = Charts.newBarChart()
    .setDataTable(dataTable)
    .setTitle("前日PV上位10記事")
    .build();

  const imageFile = chart.getAs("image/png");

とくに難しいことはないですね

本当は下記を使用して前々日と比較したグラフをポストしたかったのですがよく見たら「GoogleAppsScript」じゃなく「GoogleCharts」のドキュメントだったのでさっと実装できず

Diff Charts | Charts | Google Developers

https://developers.google.com/chart/interactive/docs/gallery/diffchartdevelopers.google.com

今後の宿題にしておきます。。。

Slackへpost

SlackのファイルアップロードAPIに対してUrlFetchAppを使用してポストするだけです

後述するプロパティサービスを使ってTOKENなどを取得します

  const token = PropertiesService.getScriptProperties().getProperty(
    "SLACK_API_TOKEN"
  );
  const channelId = PropertiesService.getScriptProperties().getProperty(
    "SLACK_CHANNEL_ID"
  );

  UrlFetchApp.fetch("https://slack.com/api/files.upload", {
    method: "post",
    payload: {
      channels: channelId,
      file: imageFile,
      filename: "daily-pv-top-10.png",
      token: token,
    }
  });

ScriptPropertyへデータを登録

APIトークンなどコード上でべた書きしたくないものをこのプロパティに登録してスクリプトから特定の操作をして取り出すことで安全にデータを取得できる仕組みです

登録はスクリプトエディターの画面からFile -> Project Properties -> Script properties

タブまで遷移すると設定できます

f:id:swfz:20181222075833p:plain — プロパティの設定

今回はSlackのAPI TOKEN, チャンネルID, AnalyticsのテーブルIDを登録しました

GASのコード上ではこんな感じで取り出します

const token = PropertiesService.getScriptProperties().getProperty(
  "SLACK_API_TOKEN"
);

タイムアップで調べられなかったのですがプロパティもCLIから登録できたらうれしいですね

定期実行トリガーの設定

Edit -> Current project's triggersから別タブへ遷移し新たに設定します

今回は毎日朝に前日分のデータを受け取るようにしました

f:id:swfz:20181222075951p:plain — 定期実行トリガーの設定

他

ちょっと詰まったとことか後で見返したとき用のメモ的なものを残しておきます

clasp login

clasp login --no-localhost

手動でキーを入力するパターン

VMとかの中で開発しているときとかに使って手動でキーを入力してログインするためのオプション

Analyticsレポートの有効化

毎度やりかた忘れてるのでリンクだけ残しておきます

GoogleAnalyticsのAPIとGoogleAppsScriptでGoogleAnalyticsのレポートを自動化する方法 - Bowyer Tech Blog

bowyer-app.com

appscript.jsonのdependenciesに記述してpushするだけではGAS経由で実行できず

コンソールから対象プロジェクトからのAPIアクセスを許可する必要があります

実行

最終的なコードはこうなりました

src/appscript.json

{
  "timeZone": "America/New_York",
  "dependencies": {
    "enabledAdvancedServices": [{
      "userSymbol": "AnalyticsReporting",
      "serviceId": "analyticsreporting",
      "version": "v4"
    }, {
      "userSymbol": "Analytics",
      "serviceId": "analytics",
      "version": "v3"
    }],
    "libraries": [{
      "userSymbol": "Moment",
      "libraryId": "15hgNOjKHUG4UtyZl9clqBbl23sDvWMS8pfDJOyIapZk5RBqwL3i-rlCo",
      "version": "9"
    }]
  },
  "exceptionLogging": "STACKDRIVER"
}

src/Code.ts

function sendReport() {
  const from = Moment.moment()
    .subtract(1, "days")
    .format("YYYY-MM-DD");
  const to = Moment.moment()
    .subtract(1, "days")
    .format("YYYY-MM-DD");
  const metrics = "ga:pageViews";
  const options = {
    dimensions: "ga:pageTitle",
    "max-results": 5000
  };

  const gaReport = Analytics.Data.Ga.get(
    `ga:${PropertiesService.getScriptProperties().getProperty("GA_TABLE_ID")}`,
    from,
    to,
    metrics,
    options
  );

  Logger.log(gaReport);

  const dataTable = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "Title")
    .addColumn(Charts.ColumnType.NUMBER, "PV");
  gaReport.rows
    .sort((a, b) => b[1] - a[1])
    .filter((_, i) => i < 10)
    .forEach(row => {
      dataTable.addRow(row);
    });
  const chart = Charts.newBarChart()
    .setDataTable(dataTable)
    .setTitle("前日PV上位10記事")
    .build();

  const imageFile = chart.getAs("image/png");

  const token = PropertiesService.getScriptProperties().getProperty(
    "SLACK_API_TOKEN"
  );
  const channelId = PropertiesService.getScriptProperties().getProperty(
    "SLACK_CHANNEL_ID"
  );

  UrlFetchApp.fetch("https://slack.com/api/files.upload", {
    method: "post",
    payload: {
      channels: channelId,
      file: imageFile,
      filename: "daily-pv-top-10.png",
      token: token
    }
  });
}

実行してみるとこんな出力になります