こもるーとたぬきの備忘録

profile

【Next.js】Next.jsで作成したブログにgoogleアナリティクスを入れたかった話

JavaScriptNext.jsReact開発

このブログにGoogleAnalyticsをブログに設置したいなと調べていたら「@next/third-parties」なるものがあった。 これを使用すると、かなり楽にブログにGA４を導入できるとのこと。 そこで、この記事では、「@next/third-parties」ライブラリを用いて、GA4でデータが収集できることを目標に作業した記録をまとめる

「@next/third-parties」について

このライブラリ自体は、まだ実験的なライブラリということもあり、最新のものをインストールすることが推奨されている。 できることとしては、
  • Googleタグマネージャーとの組み込み
  • Googleアナリティクスの組み込み
  • Googleマップの埋め込み
  • Youtubeの埋め込み
Googleタグマネージャーとアナリティクス、それぞれのイベント設定も可能な関数がある。
また、以下の記事によるとこのライブラリを使用して、Youtube動画を埋め込むと通常のiframeを使用したページよりもPageSpeedInsightsでの測定結果がよかったらしい。
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ
今回はひとまずGoogleアナリティクスだけだが、他の機能も何は試したいところ。

作業内容

Googleアナリティクスのアカウント作成

割愛

Next.jsでの作業

以下のコマンドで「@next/third-parties」ライブラリをインストール


    npm install @next/third-parties@latest

app/layout.tsxに以下のように組み込む


    import { GoogleAnalytics } from '@next/third-parties/google' export default
    function RootLayout({ children, }: { children: React.ReactNode }) { return (
    <html lang="ja">
    <body>
        {children}
    </body>
    <GoogleAnalytics gaId="ここにGoogleタグIDを入力" />
    </html> 
    ) }

この方法だとサイトのすべてのルートに設置するような書き方だが、コンポーネント化して各ルートに配置することで設置場所を限定することも可能

設置直後は、アクティブユーザーの箇所とリアルタイムの概要のところで計測ができていることが確認できた。
まだ開発が進められている部分なのようなので、ひとまず経過観察

参考