Google Analytics連携方法
KurocoではGoogle OAuth2.0認証情報を利用してGoogle Analyticsとの接続ができます。
このチュートリアルでは、Kuroco管理画面での接続作業の方法と、接続に必要なGoogleClientID, GoogleClientSecret の取得の流れ、フロントエンドの設定方法を説明します。
Google側の仕様の変更により、本チュートリアルと異なる箇所がある場合もございます。詳細はGoogleで最新情報をご確認ください。
Google Analytics アカウントの作成
まずはGoogle Analyticsにて、アカウントの作成、プロパティの作成をお願いいたします。
KurocoとGoogle Analytics連携のためにトラッキングIDが必要となります。
トラッキングIDの確認方法
Google Analyticsの管理画面より[管理] -> [トラッキング情報] -> [トラッキングコード]をクリックします。
トラッキング情報画面が確認できるので、トラッキングIDをコピーしてください。
注意) Kurocoで表示されるProfileIDについて
Kurocoで設定できるProfileIDはユニバーサル アナリティクス プロパティになっており、Google アナリティクス 4 プロパティは表示がされません。
ProfileIDが表示されない場合はGoogle Analyticsでプロパティの種類をご確認ください。
ユニバーサル アナリティクス プロパティはGoogle Analyticsでプロパティの作成時に[詳細オプションを表示]をクリックし、ユニバーサル アナリティクス プロパティの作成の横のバーを有効にすると作成ができます。
Google OAuth 2.0 Client IDを発行する
KurocoとGoogleアカウントを接続するのに必要なGoogle OAuth 2.0 Client IDの発行の流れについて説明します。
(既にクライアントIDとクライアントシークレットの準備ができている場合はGoogle AnalyticsとKurocoを連携するへ進み、KurocoとGoogleアカウントを接続してください。)
1. Google Cloud Platform にプロジェクトを作成する
Google Cloud Platform にアクセスし、[プロジェクトを作成]をクリックします。
新しいプロジェクトの作成画面になりますので、プロジェクト名を入力して、[作成]をクリックします。
2. Analytics API を ON にする
プロジェクトのダッシュボードから[APIとサービスの有効化]をクリックします。
APIライブラリが表示されますので「Google Analytics API」を探して有効にします。
3. OAuth 同意画面を作成する
Google Cloud Platform に戻り、[OAuth同意画面]をクリックします。
User Typeを選択して[作成]をクリックします。
4. OAuth クライアント ID を作成する
ダッシュボードから、[認証情報]をクリックします。
[認証情報を作成] -> [OAuth クライアントID]をクリックします。
OAuth クライアントIDの作成画面が表示されるので、内容を入力し、[作成]をクリックします。
- アプリケーションの種類はウェブアプリケーションを選択します。
- 認証済みのリダイレクトURIはKuroco管理画面のGoogle Analyticsのページで確認ができます。
5. GoogleClientID, GoogleClientSecret を確認する
認証情報に作成したクライアントIDが表示されるので鉛筆マークをクリックします。
クライアントIDとクライアントシークレットを確認します。
Google AnalyticsとKurocoを連携する
1. Google Analytics設定画面にアクセスする
Kuroco管理画面へアクセスし、[外部システム連携] -> [Google Analytics]をクリックします。
2. Googleアカウントに接続する
GoogleクライアントIDとGoogleクライアントシークレットを入力して、[接続する]をクリックします。
Googleのサイトへ遷移しますので、Goolge Analyticsのアカウントと同じユーザーでログインします。
OAuth 同意画面が表示されるので、[許可]をクリックして認証し
ます。
認証が通るとKurocoの画面に戻るので再度ログインをします。
3. ProfileIDを設定する
Googleアカウントの認証が通るとProfileIDの選択ができるようになりますので、任意のProfileIDを選択して[更新する]をクリックします。
以上で、Google Analyticsとの連携は完了です。
フロントエンドでGoogle Analyticsの設定をする
最後に、フロントエンドでGoogle Analyticsの設定をします。
今回はNuxt.jsでの設定方法を説明します。
@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を開き、下記追記します。
modules: [
'@nuxtjs/google-gtag'
],
'google-gtag': {
id: 'UA-XXXX-X',
},
UA-XXXX-Xには、ご自身のトラッキング IDを入力してください。
Google Analyticsにて接続を確認する
サイトにアクセスし、Google Analyticsを確認すると無事アクセス情報が取得されています。
Kuroco管理画面にてアクセスを確認する
Kuroco管理画面にアクセスし、[外部システム連携] -> [Google Analytics]をクリックします。
すると、アクセス情報が取得されています。
以上でKurocoとGoogle Analytics連携方法の説明を終わります。