Google Analytics連携方法

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

注意

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

Google Analytics アカウントの作成

まずはGoogle Analyticsにて、アカウントの作成、プロパティの作成をお願いいたします。

KurocoとGoogle Analytics連携のために、GA4のプロパティIDまたは測定IDが必要となります。

測定IDの確認方法

Google Analyticsの管理画面より[管理] -> [プロパティ] -> [データストリーム]をクリックします。 データストリームの詳細画面が確認できるので、測定ID（G-で始まるID。トラッキングID）をコピーしてください。

測定IDは、フロントエンドに設置するタグでも使用します。

プロパティIDの確認方法

Google Analyticsの管理画面より[管理] -> [プロパティの詳細]をクリックし、プロパティID（数字）をコピーします。

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」「Google Analytics Data API」「Google Analytics Admin API」を探して有効にします。

注記

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

3. OAuth 同意画面を作成する
Google Cloud Platform に戻り、[OAuth同意画面]をクリックします。

User Typeを選択して[作成]をクリックします。

必要情報を入力し、OAuth同意画面を作成します。 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. プロパティID / 測定IDを設定する
Googleアカウントの認証が通ると[プロファイル情報]の[プロパティID / 測定ID]に入力できるようになりますので、GA4のプロパティID（数字）または測定ID（G-で始まるID）を入力して[更新する]をクリックします。

備考

• プロパティIDは123456789のほか、properties/123456789の形式でも入力できます。
• 測定IDは大文字・小文字を区別しません。
• 更新時に、入力値に対応するプロパティの存在とアクセス権限を確認します。測定IDを入力した場合はアクセス可能なプロパティを検索するため、更新に時間がかかることがあります。

注意

指定したプロパティが見つからない場合や、接続中のGoogleアカウントにアクセス権限がない場合は、「指定されたプロパティID／測定IDが見つからないか、アクセス権限がありません。入力内容と接続中のGoogleアカウントの権限を確認してください。」と表示され、設定は保存されません。

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

フロントエンドでGoogle Analyticsの設定をする

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

備考

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

GTMを利用しない場合

nuxt-gtagをインストールする

プロジェクトにGoogle Analytics用のモジュール nuxt-gtag をインストールします。
下記実行します。

npm install --save-dev nuxt-gtag

注記

nuxt-gtag v5以降はNuxt 4以降が対象です。Nuxt 3を利用している場合は、npm install --save-dev nuxt-gtag@4 を実行してv4をインストールしてください。

nuxt.config.tsにモジュール追加

nuxt.config.tsにGoogle Analyticsの設定をします。
nuxt.config.tsを開き、下記追記します。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],
  gtag: {
    id: 'G-XXXXXXX'
  }
})

注意

G-XXXXXXXには、ご自身の測定IDを入力してください。

備考

ページ遷移時のpage_viewイベントを計測するには、Google Analyticsの[管理] -> [データストリーム]で対象のウェブストリームを開き、拡張計測機能の「ブラウザの履歴イベントに基づくページの変更」を有効にしてください。

GTMを利用する場合

@nuxt/scriptsをインストールする

プロジェクトにNuxt公式のサードパーティスクリプト用モジュール @nuxt/scripts をインストールします。
下記実行します。

npm install @nuxt/scripts

nuxt.config.tsにモジュール追加

nuxt.config.tsにGoogle Tag Managerの設定をします。
nuxt.config.tsを開き、下記追記します。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/scripts'],
  scripts: {
    registry: {
      googleTagManager: {
        id: 'GTM-XXXXXXXX',
        trigger: 'onNuxtReady'
      }
    }
  }
})

注意

GTM-XXXXXXXXには、ご自身のコンテナIDを入力してください。

備考

triggerを指定すると、すべてのページでGTMのスクリプトが読み込まれます。triggerを指定しない場合、nuxt.config.tsの設定だけではGTMのスクリプトは読み込まれません。

ページ遷移時にdataLayerへイベントを送信するプラグインを追加

@nuxt/scriptsはGTMのスクリプトを読み込みますが、ページ遷移時にdataLayerへイベントを送信する機能はありません。
以降のGTMの設定で使用するnuxtRouteイベントを送信するため、app/plugins/ディレクトリに下記のプラグインを作成します。

app/plugins/gtm.client.ts

declare global {
  interface Window {
    dataLayer: Record<string, unknown>[]
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:finish', () => {
    // ページタイトルが更新されてから送信する
    setTimeout(() => {
      window.dataLayer = window.dataLayer || []
      window.dataLayer.push({ event: 'nuxtRoute' })
    }, 0)
  })
})

備考

このプラグインは、初回のページ表示時とページ遷移時にnuxtRouteイベントをdataLayerへ送信します。
setTimeoutで送信を遅らせているのは、遷移先ページのタイトルが反映された後にGTMのタグを発火させるためです。

GTMの設定を行う

GTMに「Google Analytics GA4設定」、及び「nuxtRouteタグ」のpage_viewイベント発行設定を行う

Google Analytics GA4設定

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

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

nuxtRouteイベント設定（初回のページ表示時とページ遷移時にGA側にpage_viewイベントを発火する）

トリガー

タグ

Google Analyticsにて接続を確認する

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

[レポート]→[リアルタイム]

[エンゲージメント]→[イベント]

Kuroco管理画面にてアクセスを確認する

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

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

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

関連ドキュメント

• Google Analytics
• GoogleAnalyticsのPV数を元にアクセスランキングを実装する方法
• Nuxt.jsでGoogleAnalytics4(GA4)をどのように設定すればいいですか？
• カスタムディメンションで設定されている数値の集計結果を確認する方法はありますか？