【Next.js】SSGサイトにてMatomo（Piwik）のアクセス解析を設置する

公開日: 2023年12月28日

更新日: 2025年2月11日

カテゴリ: Web

タグ: Matomo, Next.js

Next.jsでSSGサイトを作成している場合のMatomo（Piwik）のアクセス解析の設置方法を紹介します。

環境

今回は次の環境で作業しました。

Next.js 13.4.19
Matomo 5.0.0

今回はNext.jsのApp Routerを使用して実装しています。

設置手順

設置手順は以下の通りです。

[Matomo]ウェブサイトの作成
[Matomo]タグマネージャーの設定
[Next.js]タグマネージャーの設置

1. [Matomo]ウェブサイトの作成

次の手順でMatomoのウェブサイトを作成します。

Matomoにログイン

まずはMatomoにログインします。

ウェブサイトの作成

ウェブサイトを作成します。

Matomoウェブサイト作成

「ウェブサイト」をクリックします。

Matomoウェブサイト作成

名前とURLを入力して「保存」をクリックします。（他の項目はデフォルトのままでOKです）

これでMatomoのウェブサイトの作成は完了です。

2. [Matomo]タグマネージャーの設定

次にMatomoのタグマネージャーを設定します。

タグマネージャーのページへ移動

タグマネージャーのページに移動します（①）。サイト選択のプルダウンを先ほど作成したサイトに変更します（②）。すでに新しく作ったサイト用のタグマネージャが作成されていますので、矢印部分のコードをインストールするアイコンをクリックします（③）。

タグマネージャーのコードをコピー

下図のようなコードが表示されますので、コピーします。

これでMatomoのタグマネージャーの設定は完了です。

3. [Next.js]タグマネージャーの設置

Next.jsアプリのソースコードにタグマネージャーを設置します。

タグマネージャーのReactコンポーネントを作成

componentsディレクトリにMatomoTagManager.jsを作成し、次のようにコードを記述します。

usePathnameとuseSearchParamsをインポートします。
useEffectを使用して、pathnameとsearchParamsが変更されたときにタグマネージャーのコードを実行します。
- これでページ遷移時にタグマネージャーのコードが実行されます。
https://piwik.example.com/js/container_xxxxx.jsの部分は、先ほどコピーしたタグマネージャーのコードに置き換えます。

components/MatomoTagManager.js

'use client'
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

const MatomoTagManager = () => {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    var _mtm = window._mtm = window._mtm || [];
    _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src='https://piwik.example.com/js/container_xxxxx.js'; s.parentNode.insertBefore(g,s);
  }, [pathname, searchParams])
  return (
    <>
    </>
  )
}
export default MatomoTagManager

タグマネージャーのReactコンポーネントを呼び出す

app/layout.jsに次のようにコードを記述します。MatomoTagManagerコンポーネントを呼び出します。

app/layout.js

:
（省略）
:
import MatomoTagManager from "@/components/MatomoTagManager";
export default function RootLayout({children}) {
  return (
    <html lang="ja" suppressHydrationWarning>
      <head />
      <MatomoTagManager />      
      <body className={clsx("min-h-screen bg-background font-sans antialiased",fontSans.variable)}>
        <Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>
          <main className="relative flex flex-col h-screen">
            <Header />
            <div className="container mx-auto max-w-8xl flex-grow flex flex-wrap">
              {children}
            </div>
            <Footer />
          </main>
        </Providers>
      </body>
    </html>
  );
}