Next.jsにGoogle Analyticsを導入する

この記事を読んだ後に理解できること

Google Analyticsの概要
Google Analyticsの活用方法
Next.jsにGoogle Analyticsを導入する方法

Google Analyticsとは？

Googleが提供する無料のウェブ解析ツールです。

ウェブサイトやアプリのトラフィックデータを収集、分析し、運営者がユーザーの行動やサイトのパフォーマンスを理解するのに役立ちます。

Google Analyticsを使用することで、サイト運営者はサイトの改善やマーケティング活動の効果を測定することができます。

Google Analyticsの活用方法

基本的な活用方法

Google Analyticsを活用することで以下のデータを確認できるようになります。

ページビュー
- ユーザが特定のページを表示するたびにカウントされる指標です。
ユーザ数
- 初めてWebサイトを訪れたユーザ、リピータのユーザがどの程度存在するかを確認できる指標です。
イベント
- クリック、スクロール等のユーザアクションの数を確認することができます。

そのほかにも多くのデータを確認したりすることができます。

応用的な活用方法

セグメントの利用
- 特定のユーザーグループや行動パターンに基づいてデータをフィルタリングし、より詳細な分析を行います。
ゴール設定
- 特定の行動（例：購入完了、メール登録など）をゴールとして設定し、コンバージョン率を測定します。
イベントトラッキング
- ボタンクリックやフォームの送信など、特定のアクションを追跡して分析します。
ユーザーフロー分析
- ユーザーがウェブサイト内でどのように移動しているかを視覚化し、サイトの改善ポイントを特定します。

このブログのようにGoogle Adsenseを入れている場合は、Google Analyticsに連携することもできます。
（2023/5/4現在、Google Analytics4がリリースされていますが、こちらはGoogle Adsenseとの連携機能ができません。）

Next.jsにGoogle Analyticsを導入する方法

Google Analyticsを導入するには、ソースコード上にスクリプトタグを設定する必要があります。

スクリプトを実行するJavaScriptライブラリによって記載方法が変わります。

gtag.jsの場合

import Script from 'next/script'

const Home = () => {
  return (
    <div className="container">
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <Script
        src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){window.dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'GA_MEASUREMENT_ID');
        `}
      </Script>
    </div>
  )
}

export default Home

analytics.jsの場合

analytics.jsでの実装はお勧めしません。

公式もgtag.jsを使うことを推奨しています。

import Script from 'next/script'

function Home() {
  return (
    <div className="container">
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-XXXXX-Y', 'auto');
          ga('send', 'pageview');
        `}
      </Script>
    </div>
  )
}

export default Home

ホーム