【Gatsby.js】自作ブログをGoogleアナリティクスで解析してビュー数を取得する

#概要
今までWordPressなどを使っていたけど、自社の都合上他のCMSに移行したい・・・
そうだ、流行りのGatsbyを使おう！

・・・と思い立ったはいいものの、テンプレートをアレンジしようとすると
必要な機能は自身で実装しなければいけなくなりどこをいじればいいかわからない方向けの記事となります。


#Gatsby.jsのプラグインについて
Gatsby.jsには様々なプラグインが用意されており、`npm install`で容易に組み込むことができます。
今回は記事毎のアクセス数をGraphQL経由で取得して表示する`Google Analytics Reporting API`の使用方法を
順を追ってご紹介させていただきます。


#手順

以下の手順に沿って進めます.

1.Google Analyticsプラグインの導入
2.Google Cloud プラットフォームでサービス アカウントの登録
3.Google Analytics Reporting APIの導入
4.Google Analyticsでサービス アカウントのアクセス権を付与
5.GraphQLでビュー数を取得

#1.Google Analyticsプラグインの導入
ビュー数を持ってくる前提作りとして、アクセスを分析してデータを残すためにアナリティクスを導入します。
まずは[こちら](https://analytics.google.com/analytics/web/)からGoogle Analyticsに登録してください。

登録が終わったら、アナリティクスでGatsbyプロジェクトを解析してもらうためのプラグインを導入します。

```
npm install --save gatsby-plugin-google-analytics
```

installができたら設定ファイルに必要な追記をしていきます。[公式リファレンス](https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/)が色々雑多ですが、今回は必要な箇所だけ設定します。

```javascript:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // ここにAnalyticsのトラッキングIDを貼り付けてください
        trackingId: "UA-XXXXXXXXX-X",
        // ヘッダーに組み込むためtrueにしてください
        head: true,
      },
    },
  ],
}

```
トラッキングIDはアナリティクス左タブの一番下の`設定`>`管理`>`プロパティ`>`トラッキング情報`>`トラッキングコード`に記載のUAから始まるコードをコピペしてください。

これでアナリティクスで閲覧人数などの情報がみれるようになりましたが、この段階ではまだプロジェクトからアナリティクスの情報にアクセスする権限はありません。

そこで今回は

①GoogleCloudプラットフォームにサービスアカウントを登録する
②サービスアカウントに権限を付与し、API経由でアクセスをする

という手順をとってアクセスを試みます。

#2.Google Cloud プラットフォームでサービス アカウントの登録
初見の方は機能が多すぎて頭が痛くなってしまうと思うので必要な箇所だけ設定をします。

まずは[Google Cloud プラットフォーム](https://console.cloud.google.com/apis/library?hl=ja)で登録を済ませてください。
登録が終わったら、左上のハンバーガーボタンから`IAMと管理`>`サービス アカウント`と進みます。


プロジェクトの作成を促されるので、必要な情報を入力して作成をしてください
(作成が終わるまでしばらく時間がかかるようです)

プロジェクト作成が終わったら、青字の`＋ サービス アカウントを作成`からアカウント作成を進めます。入力情報は任意で構わないです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649495/2759b80c-10e4-46ea-6112-ad5fbef7b80a.png)


アカウントが作成されると一覧にアカウントのステータスが表示されるので、`操作`列のメニュータブから鍵を作成してください。
鍵の形式を聞かれますが今回はJSONを選んでください。
**このファイルは非常に重要なファイルなので、必ずプロジェクトフォルダ外で保存するようにしてください。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649495/44dfeb14-3ffa-b888-20e4-6029f5028aec.png)

これでサービスアカウントの設定は終了です。

#3.Google Analytics Reporting APIの導入
続けて、Google Cloud プラットフォームで利用するAPIを有効化しましょう。
左上のハンバーガーボタンから`APIとサービス`>`ライブラリ`と進みます。

Analyticsと検索し、`Google Analytics Reporting API`を選択、
遷移後のページで有効化ボタンを押してください。
**(画像上から２番目のGoogle Analytics APIではありません)**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649495/4d94712a-2b85-8aeb-755d-468f248782d5.png)

有効化できたらGoogle Cloud プラットフォーム上での操作は終わりです。

次はプロジェクトフォルダに戻り、必要なプラグインをインストールします。

```
npm install gatsby-source-google-analytics-reporting-api
```

プロジェクトの以下のファイルに追記をします。

```javascript:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-google-analytics-reporting-api`,
      options: {
        email: process.env.CLIENT_EMAIL,
        key: process.env.PRIVATE_KEY.replace(/\\n/g, "\n"),
        viewId: `XXXXXXXXX`,
        startDate: `2020-06-01`,
      },
    },
  ],
}
```
```..env.development
CLIENT_EMAIL = hogehoge@ace-charter-XXXXXX.iam.gserviceaccount.com
PRIVATE_KEY = -----BEGIN PRIVATE KEY-----\nXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...
```
- `viewId`はアナリティクスの`管理`>`ビュー`>`ビューの設定`からコピペしてください。
- `.env`ファイルがない場合は適宜作成してください。
- `CLIENT_EMAIL`はサービス アカウントのアドレスを貼り付けてください。
- `PRIVATE_KEY`はダウンロードした鍵ファイルの中の`"private_key"`からコピーしてください。
**文字列の始まりと終わりの""は含めず中身だけコピーしてください。**

また、githubにプッシュした際に環境変数は公開しないように.gitignoreにも追記しておきます。

```.gitignore
# dotenv environment variable files
.env*
```

これでアナリティクスにアクセスする為のプロジェクト側での設定は終わりです。
次はアナリティクスサイドでAPIのアクセスを許可します。

#4.Google Analyticsでサービス アカウントのアクセス権を付与
アナリティクスのページを開き、`管理`>`ビュー`>`ユーザー管理`と進みます。
`+`ボタンを押して、`ユーザーの追加`を選択してサービスアカウントのアドレスを入力します。

このような画面になると思いますが、自分用なので`表示と分析`以外の権限は適当でいいです。
入力したら右上の`追加`を押してください。ビューの権限にユーザーが追加されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649495/e2b09f9b-e8da-7088-8e1e-8cc1b574b657.png)

これでAPI経由でアナリティクスの情報を拾ってくる準備が整いました。
実際にビュー数を取得してみましょう。


#5.GraphQLでビュー数を取得

必要な箇所でクエリを呼び出します。

```graphql:
query MyQuery {
  allPageViews {
    edges {
      node {
        totalCount
        path
      }
    }
  }
}
```

`totalCount`にページごとの閲覧数が表示されるはずです。
あとは必要なクエリを`localhost:8000/__graphQL`で検索してみてください。

お疲れ様でした。