---
title: Google Analytics連携方法
category: 外部システム連携
weight: 1
---

KurocoではGoogle OAuth2.0認証情報を利用してGoogle Analyticsとの接続ができます。  
このチュートリアルでは、Kuroco管理画面での接続作業の方法と、接続に必要なGoogleClientID, GoogleClientSecret の取得の流れ、フロントエンドの設定方法を説明します。

:::caution
Google側の仕様の変更により、本チュートリアルと異なる箇所がある場合もございます。詳細はGoogleで最新情報をご確認ください。
:::

## Google Analytics アカウントの作成
まずは[Google Analytics](https://analytics.google.com/analytics/web/)にて、アカウントの作成、プロパティの作成をお願いいたします。

KurocoとGoogle Analytics連携のためにトラッキングIDが必要となります。

### トラッキングIDの確認方法
Google Analyticsの管理画面より[管理] -> [プロパティ] -> [データストリーム]をクリックします。
データストリームの詳細画面が確認できるので、トラッキングIDをコピーしてください。
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/26759765e3d416d7dd7842c8b5f8e433.png)

## Google OAuth 2.0 Client IDを発行する
KurocoとGoogleアカウントを接続するのに必要なGoogle OAuth 2.0 Client IDの発行の流れについて説明します。  
（既にクライアントIDとクライアントシークレットの準備ができている場合は[Google AnalyticsとKurocoを連携する](#google-analyticsとkurocoを連携する)へ進み、KurocoとGoogleアカウントを接続してください。）

**1. Google Cloud Platform にプロジェクトを作成する**  
[Google Cloud Platform](https://console.cloud.google.com/apis/dashboard/) にアクセスし、[プロジェクトを作成]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/bbef97774e648bc1399ea7d458f49c23.png)
新しいプロジェクトの作成画面になりますので、プロジェクト名を入力して、[作成]をクリックします。  

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/9193d421e54c2e5969f3f60f626471e6.png)
**2. Analytics API を ON にする**  
プロジェクトのダッシュボードから[APIとサービスの有効化]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/a3f6632bc25ab30f14953a193aaefb38.png)
APIライブラリが表示されますので「Google Analytics API」「Google Analytics Data API」「Google Analytics Admin API」を探して有効にします。

:::note
GA4と連携する場合には「Google Analytics Reporting API」は有効にする必要はありません
:::

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d253e53386831593c4dd02f6f326ce6f.png)

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/e3f1f25c48132e921cc72832a7e58c07.png)

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d37c8cbae71d4e2db98ce8181fc8bbe7.png)

**3. OAuth 同意画面を作成する**  
[Google Cloud Platform](https://console.cloud.google.com/apis/dashboard/) に戻り、[OAuth同意画面]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/88c0d4355105f76aae7632b19c93befc.png)
User Typeを選択して[作成]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/2fa6e5cef4ad35ca6465f0096a2e0a22.png)
必要情報を入力し、OAuth同意画面を作成します。
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/1bdd649afbcf43258c90489da90f4af9.png)
**4. OAuth クライアント ID を作成する**  
ダッシュボードから、[認証情報]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/6dd1d9e08538cef09b8d4b01fcdc0133.png)
[認証情報を作成] -> [OAuth クライアントID]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/590fa23c301fc4f53c5189c862246a40.png)
OAuth クライアントIDの作成画面が表示されるので、内容を入力し、[作成]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/083f5fb22b15e0046d0bfd286fc938e5.png)
- アプリケーションの種類はウェブアプリケーションを選択します。
- 認証済みのリダイレクトURIはKuroco管理画面の[Google Analytics](/ja/docs/management/google-analytics/)のページで確認ができます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/3bb819af29ee3b930815b469cae4a989.png)
**5. GoogleClientID, GoogleClientSecret を確認する**  
認証情報に作成したクライアントIDが表示されるので鉛筆マークをクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/56f590d0c3ff8b17cdb1fd9f06774f48.png)
クライアントIDとクライアントシークレットを確認します。 

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/1ac8dc5c7e237cbf6c9cc3d658077591.png)
## Google AnalyticsとKurocoを連携する
**1. Google Analytics設定画面にアクセスする**  
Kuroco管理画面へアクセスし、[外部システム連携] -> [Google Analytics]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/45631452a7596ef6ae0427cb7c4fa603.png)
**2. Googleアカウントに接続する**  
GoogleクライアントIDとGoogleクライアントシークレットを入力して、[接続する]をクリックします。  

　![Image from Gyazo](https://t.gyazo.com/teams/diverta/231fb5b3e67304d17d873a28b097fcb2.png)

Googleのサイトへ遷移しますので、Goolge Analyticsのアカウントと同じユーザーでログインします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/1a0ec4a499e64fd8dedb3fff89d07d2e.png)
OAuth 同意画面が表示されるので、[許可]をクリックして認証し
ます。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/7f0f938fd17c8ec78286f5f786518d9f.png)
認証が通るとKurocoの画面に戻るので再度ログインをします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/ca7094c7fd7a4bf55a1dba883ab7a2cb.png)
**3. ProfileIDを設定する**  
Googleアカウントの認証が通るとProfileIDの選択ができるようになりますので、任意のProfileIDを選択して[更新する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/4108451d788dbb46a1487d68a4fb0b83.png)

:::caution
Kurocoで表示されるProfileIDについて  
GoogleAnalytics、及びGoogle Clooud Platformの設定によってはGoogle Analytics 4のプロパティとUniversal Analyticsのプロパティが選択肢に表示されます。  
Universal Analyticsは利用出来なくなっていますので、Google Analytics 4のプロパティを選択して下さい。
:::

以上で、Google Analyticsとの連携は完了です。

## フロントエンドでGoogle Analyticsの設定をする
最後に、フロントエンドでGoogle Analyticsの設定をします。  
今回はNuxt.jsでの設定方法を説明します。  

:::info
このドキュメントではGA4/GTMのトラッキングIDをnuxt.config.jsに直接記載するサンプルになっていますが、  
実際には環境毎のenvファイルによって定義し、それを読み込むやり方が望ましいです。
:::

### GTMを利用しない場合
#### @nuxtjs/google-gtagをインストールする
プロジェクトにGoogle Analytics用のモジュール `@nuxtjs/google-gtag` をインストールします。  
下記実行します。

```
npm install --save @nuxtjs/google-gtag
```

#### nuxt.config.jsにモジュール追加
nuxt.config.jsにGoogle Analyticsの設定をします。  
nuxt.config.jsを開き、下記追記します。

```js title="nuxt.config.js"
  modules: [
    '@nuxtjs/google-gtag'
  ],
  'google-gtag': {
    id: "G-XXXXXXX",
    debug: false
  },
```

:::caution
G-XXXXXXXには、ご自身のトラッキング IDを入力してください。
:::

### GTMを利用する場合
#### @nuxtjs/gtmをインストールする
プロジェクトにGoogle Analytics用のモジュール `@nuxtjs/gtm` をインストールします。  
下記実行します。

```
npm install --save @nuxtjs/gtm
```

#### nuxt.config.jsにモジュール追加
nuxt.config.jsにGoogle Analyticsの設定をします。  
nuxt.config.jsを開き、下記追記します。

```js title="nuxt.config.js"
  modules: [
    '@nuxtjs/gtm'
  ],
  gtm: {
    id: 'GTM-XXXXXXXX',
    pageTracking: true,
    send_page_view: false,
  },
```

:::info
send_page_viewをfalseにすると初回のページ読み込み時に、page_viewイベントは送信されず、nuxtRouteイベントのみが送信されます。  
ページ遷移時にnuxt-linkを使用し、GTMを利用してnuxtRouteイベントをpage_viewイベントに変換してGA計測する場合、  
nuxtRouteイベントとpage_viweイベントで2重計測しないようにする際に設定して下さい。
:::

##### GTMの設定を行う
GTMに「Google Analytics GA4設定」、及び「nuxtRouteタグ」のpage_viewイベント発行設定を行う
![Image from Gyazo](https://t.gyazo.com/teams/diverta/22b53b2aef20a19282f1979bff8c7ff9.png)

##### Google Analytics GA4設定

Nuxtでpage_viewイベントだけを計測したいのであれば上記にチェックを入れずnuxtRouteイベントで「page_view」イベントを飛ばす形で設定する

「この設定が読み込まれるときにページビューイベントを送信する」にチェックを入れると
該当の設定が読み込まれたときにpage_viewのイベントがGA側に送られる

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d13498ef9668a76735d9bd3990be82ed.png)

#### nuxtRouteイベント設定（nuxt-linkによるページ遷移でGA側にpage_viewイベントを発火する）

トリガー  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0b8e9b14c2359a6cffa8a8f485f86b65.jpg)

タグ  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4c35b21d5f0117ff168a9675d80bb223.jpg)

### Google Analyticsにて接続を確認する
サイトにアクセスし、Google Analyticsを確認すると無事アクセス情報が取得されています。

[レポート]→[リアルタイム]
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/1188bb51c57b393bdb94141b2eea2f11.png)

[エンゲージメント]→[イベント]
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/c5917f99e084d796084ddebf4a9db0da.png)

### Kuroco管理画面にてアクセスを確認する
Kuroco管理画面にアクセスし、[外部システム連携] -> [Google Analytics]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/40049f9ef28cd01f63bdc6b1ed4dd7ba.png)

すると、アクセス情報が取得されています。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6a215c41cb4a51373ac4a1449700e5b6.png)

以上でKurocoとGoogle Analytics連携方法の説明を終わります。
