如何在使用 Vue.js 的网站上安装 Matomo 跟踪代码？

CiiLii西里网

发布于 2023-08-23 16:59:15

7190

发布于 2023-08-23 16:59:15

文章被收录于专栏：ECS服务器

如果您在网站中使用 Vue.js，则可以使用“vue-matomo” npm 包开始无缝跟踪 Matomo 中的数据。设置方法如下：

1.安装vue-matomo npm包。 npm install --save vue-matomo

2. 使用您的 Matomo 实例详细信息进行初始化VueMatomo（main.js下面的示例代码）。 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 实例中是否可见。

注意： * 如果您按照这些步骤操作，您现在可以通过访问组件中的 Matomo window._paq.push。 * 如果您按照这些步骤操作，但没有数据进入 Matomo，您可以联系我们的支持团队寻求帮助，或尝试使用Matomo 标签管理器（对于单页应用程序请使用此链接）。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-07-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

网站