Vue.jsを使用しているウェブサイトにMatomoのトラッキングコードをインストールするにはどうすればよいですか?
あなたのウェブサイトでVue.jsを使用している場合、「vue-matomo」 npmパッケージを使用してMatomoでシームレスにデータをトラッキングすることができます。設定方法は以下の通りです:
1.vue-matomo npmパッケージをインストールします。
npm install --save vue-matomo
2.main.js
でVueMatomo
を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 タグマネージャを試してみてください(シングル・ページ・アプリケーションの場合は、このリンクを使用してください)。