Reactを使用しているWebサイトでMatomoによるデータトラッキングを開始するにはどうすればよいですか？

2025年01月21日 React 統合追跡データ

ウェブサイトにReact を使用している場合、Matomo タグマネージャを使用してシームレスにMatomoでトラッキングデータを開始できます。Matomo で新しいサイトを作成すると、Matomo タグマネージャが自動的に Matomo トラッキングコードタグをコンテナに事前設定します。

1つのコンテナを複数のウェブサイトに使用する場合は、以下の手順を実施する際に、必ずそのコンテナのトラッキングコードを使用してください。

以下の手順に従って設定してください：

Matomo Tag Managerのコンテナで、「Triggers」に移動し、「Create new Trigger」をクリックします。
User Engagement “セクションで “History Change “トリガーを選択する。
トリガーには、例えば “History Change “のように名前を付ける。
新しいトリガーを作成」をクリックします。
別のトリガーを作成し、今回はトリガータイプに “Pageview “を選択する。
Pageview “セクションで “Pageview “トリガーを選択する。
トリガーに、例えば “Pageview “のような名前をつける。
新しいトリガーを作成」をクリックします。
次に、タグに移動し、「新しいタグを作成」をクリックし、タグの種類として「Matomo Analytics 」を選択します。
Matomo設定変数を選択し、トラッキングタイプを「ページビュー」に設定します。
カスタムタイトルを{{PageTitle}}に設定します。
カスタムURLに{{PageOrigin}}/{{PageHash}}を設定します。そうでない場合は、{{PageUrl}}と設定します。
オプション「Execute this tag when any of these triggers are triggered 」で、作成した「History Change」と「Pageview」のトリガーを選択します。
MatomoタグマネージャJSコードを App.js（またはその他の関連ファイル）に挿入します。「React.useEffect」メソッドを使用することをお勧めします。以下の例では、React.js の「Hello World」アプリにMatomo Tag Manager JSコードを追加しています。


    import React from 'react';

    export default function App () {
    React.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='{YOUR_MATOMO_TAG_MANAGER_CONTAINER_URL}'; s.parentNode.insertBefore(g,s);
    }, [])

    return (
        <div>
            <h1>Hello World</h1>
        </div>
    )
   }

15.{YOUR_MATOMO_TAG_MANAGER_CONTAINER_URL}「を、使いたいコンテナ・コードに置き換えてください。コンテナ・コードは、」container_*.js” という形式です。コンテナ・コードは「container_*.js」という形式です。
16.プレビュー／デバッグモードを使用して、トリガーとタグが期待通りに動作していることをテストし、確認します。
17.トリガーとタグが期待通りに動作していることを確認したら、変更をパブリッシュしてウェブサイトにデプロイします。

おめでとう！Matomo タグマネージャを使用して、Matomo Analytics トラッキングコードを正常にインストールしました。ヒットがトラッキングされていることを確認するには、ウェブサイトにアクセスし、このデータが Matomo インスタンスで表示されていることを確認してください。

技術情報