技術情報

Matomoでイベントトラッキングを実装する

2025年01月21日 イベント追跡 レポート 使用方法

 

Matomoでイベントトラッキングを設定するには、主に2つの方法があります。1つ目は、Matomoに組み込まれているタグマネージャプラグインを使用する方法です。もう1つは、あなたのウェブサイトにJavaScriptコードを追加する方法です。両方の設定方法の詳細は以下をご覧ください。

Matomoタグマネージャがインストールされていれば、イベントトラッキングを導入する最も簡単な方法です。トラッキングしたいイベントごとにタグを作成するだけです。以下に、あなたのサイトでのメールリンククリックを追跡するイベントを作成するためのステップバイステップのガイド例を示します。

  1. Matomoタグマネージャの設定と構成(コンテナを作成し、コンテナ・コードをインストールする）。
  2. Matomoのタグマネージャーをクリックし、タグのページにアクセスします。
  3. 新しいタグを作成する大きな緑色のボタンをクリックします。
  4. Matomo Analyticsのタグタイプを選択します。
  5. タグにわかりやすい名前を付けます。例：マトモイベント – メールリンククリック
  6. Matomoの設定を確認してください。よくわからない場合は、デフォルトの設定を使用してください。
  7. トラッキングの種類として「イベント」を選択します。
  8. これで、次のフィールドにイベント構造を追加する準備ができました。この例では、次のようになります：
    1. イベントカテゴリー連絡先
    2. イベントアクションEメールリンククリック
    3. イベント名{ClickDestinationUrl}}。
    4. イベント値：
      注：上記の例では、イベント名はウェブサイト自体からデータを取得するタグマネージャ可変から動的に入力されます。フィールドの横にある四角いコードアイコンから参照できます。
      Matomo Tag Manager - Event Name Variable
  9. 次のステップは、トリガーを選択することです。いくつかのオプションがポップアップ表示されます。この例では、[Click]セクションで[All Links Click]を選択すると、イベントとして追跡するリンクをカスタマイズするオプションが表示されます。
  10. この例では、All Email Links をトリガー名として使用することができます。
  11. トリガーを制限して、特にメールリンクをターゲットにするようにするには、Only trigger when (オプション)セクションにいくつかの詳細を追加する必要があります。これらのステップにより、メールリンクのみがカウントされるようになります：
    1. 最初のフィールドでクリック先URLを選択します。
    2. 2つ目のフィールドは “starts with “を選択します。
    3. 最後のフィールドにmailto:と入力します。これはEメールリンクを作成する際に使用する接頭辞です。
    4. 新しいトリガーを作成(Create New Trigger)」の大きな緑色のボタンをクリックして、トリガーを確定します。
  12. これでトリガーがタグ設定に添付されたので、「新しいタグを作成」をクリックできます。
  13. 最後に、コンテナを公開する必要があります。これは、新しいタグを作成したときに表示される成功メッセージから行うか、メニューからPublishを選択することで行うことができます。
    Matomo Tag Created Successfully
  14. 新しいイベントトラッキングタグを設定したら、それが機能しているかテストしてください。これを行うには、サイトにアクセスし、Eメールリンクをクリックします。その後、Matomoにログインし、訪問者セクションに移動し、訪問ログを表示するようにクリックしてください。これにより、リアルタイムで訪問を確認することができ、右側に表示されているイベントでの訪問を確認することができるはずです。
    Event Tracking Visit Log

より視覚的なステップバイステップで、別の例をご覧になりたい場合は、ブログのMatomoタグマネージャーイベントトラッキングガイドをご覧ください。

JavaScriptでMatomoのイベントトラッキングを設定する方法

イベントトラッキングを設定する2つ目の方法は、もう少し技術的な自信が必要です。あなたのウェブサイトのコードに直接JavaScriptのスニペットを統合する必要があります。リンクはイベントトラッキングと統合するための最も一般的な要素の一つです。

JavaScriptにはオンクリックリンクに追加することができます。標準的なHTMLリンクは次のようなものです：

<a href="mailto:name@example.com" title="Email Us">Email Us</a>

HTMLのリンクは基本タグaを含み、hrefで設定されたリンクを含むいくつかの属性を含んでいます。HTMLリンクはJavaScriptのonClick関数で拡張することができ、以下のようになります：

<a href="mailto:name@example.com" title="Email Us" onclick="_paq.push(['trackEvent', 'Contact', 'Email Link Click', 'name@example.com']);">Email Us</a>

上にあるように、コードの大部分は上の最初のリンクと同じ形式に従っているが、追加でオンクリック属性で指定します。イベントをトリガーする実際のJavaScript関数は、引用符の中に含まれています。

_paq.push(['trackEvent', 'Contact', 'Email Link Click', 'name@example.com']);

上記のコード例は、以下のイベントデータを追跡する：

  • イベントカテゴリー連絡先
  • イベントのアクションEメールリンククリック
  • イベント名name@example.com

これは、データをプラットフォームにプッシュしたいことを Matomo に伝えることで動作します _paq.push([ ]); そして、trackEvent は送信されるデータのタイプを定義します。そして、Matomo は次の 2 つから 4 つの属性をイベントとして認識します; Category, Action, Name, Value。。

また、上記のコードではtrackEventの後に3つの値しか表示されていないことにお気づきかもしれません。これは、Event Value属性がオプションだからです。NameやValueが必須でない場合は、空白のパラメータを追加するのではなく、単純に最後のパラメータを省略することができます。値を追跡したいイベントの例については、以下のサンプルを参照してください：

_paq.push(['trackEvent', 'eCommerce', 'Add to Wishlist', 'Smartphone', 1000]);

上記のコード例では、アイテムがウィッシュリストに追加されたときに、そのアイテムの価格が設定されます：

  • イベントカテゴリー電子商取引
  • イベントのアクションウィッシュリストに追加
  • イベント名スマートフォン
  • イベント値：1000

値が数値であるため、これまでのテキスト文字列のようにシングルクォーテーションが必要ないことにお気づきでしょう。JavaScript によるイベントのトラッキングについてもっと知りたい場合は、Matomo developer guide をご覧ください。