技術情報

Vue.jsを使用しているウェブサイトにMatomoのトラッキングコードをインストールするにはどうすればよいですか?

2025年01月21日 Vue.js 統合 追跡データ

 

あなたのウェブサイトでVue.jsを使用している場合、「vue-matomo」 npmパッケージを使用してMatomoでシームレスにデータをトラッキングすることができます。設定方法は以下の通りです:

1.vue-matomo npmパッケージをインストールします。

npm install --save vue-matomo

2.main.jsVueMatomoをMatomoインスタンスの詳細で初期化します。

Vue3のコード例:


    import { createApp } from 'vue'
    import VueMatomo from 'vue-matomo'
    import App from './App.vue'

    createApp(App)
        .use(VueMatomo, {
            // Configure your matomo server and site by providing
            host: '{YOUR_MATOMO_INSTANCE_URL}',
            siteId: {YOUR_SITE_ID},
        })
        .mount('#app')


    window._paq.push(['trackPageView']); //To track pageview

Vue2のコード例:


    import Vue from 'vue'
    import App from './App.vue'
    import VueMatomo from 'vue-matomo'

    Vue.use(VueMatomo, {
        host: '{YOUR_MATOMO_INSTANCE_URL}',
        siteId: {YOUR_SITE_ID}
    });

    new Vue({
      el: '#app',
      router,
      components: {App},
      template: ''
    })

    window._paq.push(['trackPageView']); //To track pageview

おめでとう!vue-matomo “npmパッケージを使用して、Matomo Analyticsトラッキングコードをインストールしました。ヒット数がトラッキングされていることを確認するには、ウェブサイトにアクセスし、このデータが Matomo インスタンスで表示されていることを確認してください。

注釈
* これらのステップを実行した場合、window._paq.push を通してコンポーネント内の Matomo にアクセスすることができます。
* これらのステップを実行しても、Matomo にデータが入らない場合は、サポートチームに問い合わせるか、Matomo タグマネージャを試してみてください(シングル・ページ・アプリケーションの場合は、このリンクを使用してください)。