Klaro Consent ManagerとMatomoの併用

2025年01月21日同意管理同意管理追跡データ

はじめに

クラロは、サービスベースのブロッキング、多言語、REST API、リアルタイム統計をサポートする人気の同意管理プラットフォームです。オープンソース版とクラウドサービス版の両方があります。

このステップバイステップガイドでは、KlaroオープンソースまたはKlaro CloudとMatomoを連携させる設定方法を学びます。Klaroは訪問者の同意を要求し追跡することができ、MatomoはKlaroによって提供された同意のステータスに基づいてアナリティクスの追跡を有効または無効にします。

クラロ・クラウドサービス

前提条件

Klaro クラウドサービスの場合、Klaro アカウントを作成し、同意マネージャーコードを Web サイトに追加するために必要な手順を完了しておく必要があります。

ステップ1) Matomoのサービスを追加する

Klaroのダッシュボードにログイン
設定したいウェブサイトを選択する
設定タブを選択
「デフォルト設定」をクリック
「サービスの追加」ボックスに「matomo」と入力し、「新しいサービスとして追加」をクリックする。

ステップ2) Matomoサービスの設定

サービス一覧から「Matomo」をクリック。
タイプAnalyticsをサービス目的のドロップダウンに「Analytics」と入力し、「新しい目的を追加」をクリックします。

サービスのデフォルト状態を「オン」に設定する。
/^pk.*$/.という名前のクッキー定義を追加する。
/^mtm.*$/.という名前のクッキー定義を追加する。
/^MATOMO.*$/.という名前のクッキー定義を追加する。
サービスを保存する。

ステップ3） MatomoとKlaroの接続

MatomoのJavaScriptトラッカーがKlaroによって提供される訪問者の同意ステータスを常に使用するようにするには、以下のコードをKlaroコードの下の各ウェブサイトページのヘッダーに追加する必要があります。

<script>
function KlaroWatcher() {};
KlaroWatcher.prototype.update = function(obj, name, data) { 
  if (data !== 'undefined' && data.hasOwnProperty('matomo')) {
    if (data.matomo) { 
      _paq.push(['setConsentGiven']);
      _paq.push(['setCookieConsentGiven']);
    } else {
      _paq.push(['forgetConsentGiven']);
      _paq.push(['forgetCookieConsentGiven']);
    }
  }  
}; 
window.kw = new KlaroWatcher();

var waitForTrackerCount = 0;
function matomoWaitForTracker() {
  if (typeof _paq === 'undefined' || typeof klaro === 'undefined') {                
    if (waitForTrackerCount < 40) {
      setTimeout(matomoWaitForTracker, 250);
      waitForTrackerCount++;  
      return;
    }
  } else {
    klaro.getManager().watch(kw);
  }
}  
document.addEventListener('DOMContentLoaded', matomoWaitForTracker());
</script>

Matomoが使用する同意モードを設定する必要がある：Matomo Trackerの同意モードを設定する

クラロ・オープンソース

前提条件

Klaroオープンソースの場合、すでに同意マネージャーのコードをダウンロードし、ウェブサイトに追加し、config.jsを設定しているはずです。

ステップ1) KlaroオープンソースにMatomoサービスを追加する

Matomoのサービス定義を追加するには、config.jsファイルを編集し、servicesセクションを見つけてください：

var klaroConfig = {

    ....

    services: [
       // Add here
    ],
};

以下の設定をservicesセクションに追加します：

{
 name: 'matomo',
 default: true,
 title: 'Matomo',
 purposes: ['analytics'],
 cookies: [
     [/^_pk_.*$/, '/', 'localhost'],
     [/^_mtm_.*$/, '/', 'localhost'],
     [/^MATOMO.*$/, '/', 'localhost'],
 ],
 callback: function(consent, service) {
     if (_paq !== 'undefined') {}
         if (consent == true){
              _paq.push(['setConsentGiven']);
              _paq.push(['setCookieConsentGiven']);
         } else {
              _paq.push(['forgetConsentGiven']);
              _paq.push(['forgetCookieConsentGiven'])
         }
      }
  },
  required: false,
  optOut: false,
  onlyOnce: true,
 },

更新したconfig.jsファイルを保存して、変更を反映させます。

Matomoが使用する同意モードを設定する必要がある：Matomo Trackerの同意モードを設定する

このステップはクラロ・クラウドサービスそしてクラロ・オープンソース:

Matomoは2つの異なる方法で同意を適用できます：

「クッキーへの同意」
このモードは、個人データが追跡されない場合に使用できます。クッキーを使用することに同意しない場合でも、Matomo はクッキーを使用せずに訪問者を追跡し、すべての測定基準を提供しますが、一部の測定基準の精度は低下する可能性があります。クッキーは、アナリティクスへの同意がKlaroで与えられている場合にのみ使用されます。

「追跡への同意
ユーザー識別子や電子商取引の注文など、個人データが追跡される場合は、このモードを使用する必要があります。もしアナリティクスがKlaroで与えられていない場合、Matomoはトラッキングを一切行いません。

Matomoにおける個人データ処理の詳細はこちらをご覧ください。

選択した Matomo 同意モードに応じて、手順 a または手順 b に従ってください。

MatomoのダッシュボードのAdministration > Measurables > Tracking Codeに移動し、正しいウェブサイトが選択されていることを確認してください。

Matomoのダッシュボードに表示されているトラッキングコードをコピーします。それをテキストエディタに貼り付けます。以下のようになるはずです：

<!-- Matomo -->
<!-- SAMPLE CODE - DO NOT COPY THIS -->
<!-- COPY THE TRACKING CODE FROM YOUR MATOMO DASHBOARD -->
<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
  })();
</script>
<script src="//matomo/matomo.js"></script>
<!-- End Matomo Code -->

_paq.push(['requireCookieConsent']);で始まる最初の行の直前に_paq.push.という行を追加します。

出来上がったコードは次のようになるはずです：

<!-- Matomo -->
<!-- SAMPLE CODE - DO NOT COPY THIS -->
<!-- COPY THE TRACKING CODE FROM YOUR MATOMO DASHBOARD -->
<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['requireCookieConsent']);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
  })();
</script>
<script src="//matomo/matomo.js"></script>
<!-- End Matomo Code -->

もしすでにMatomoのトラッキングコードがページにある場合は、この更新版に置き換えてください。

MatomoのダッシュボードのAdministration > Measurables > Tracking Codeに移動し、正しいウェブサイトが選択されていることを確認してください。

<!-- Matomo -->
<!-- SAMPLE CODE - DO NOT COPY THIS -->
<!-- COPY THE TRACKING CODE FROM YOUR MATOMO DASHBOARD -->
<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
  })();
</script>
<script src="//matomo/matomo.js"></script>
<!-- End Matomo Code -->

_paq.push(['requireConsent'];で始まる最初の行の直前に_paq.push.という行を追加します。

出来上がったコードは次のようになるはずです：

<!-- Matomo -->
<!-- SAMPLE CODE - DO NOT COPY THIS -->
<!-- COPY THE TRACKING CODE FROM YOUR MATOMO DASHBOARD -->
<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['requireConsent'];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
  })();
</script>
<script src="//matomo/matomo.js"></script>
<!-- End Matomo Code -->

もしすでにMatomoのトラッキングコードがページにある場合は、この更新版に置き換えてください。

結論

このガイドのステップにうまく従えば、あなたのウェブサイトはKlaroとMatomoの両方が連動し、Klaroは訪問者の同意をすべて管理し、Matomo JavaScriptトラッカーは追跡されることに同意した訪問者のみを追跡します。

技術情報

はじめに

クラロ・クラウドサービス

前提条件

ステップ1) Matomoのサービスを追加する

ステップ2) Matomoサービスの設定

ステップ3） MatomoとKlaroの接続

ステップ4) Matomo Tracker同意モード

クラロ・オープンソース

前提条件

ステップ1) KlaroオープンソースにMatomoサービスを追加する

ステップ2) Matomo Tracker同意モード

Matomo Trackerの同意モードの設定

ステップ a) クッキーへの同意

ステップ 2) 追跡への同意

結論