时间戳

首页 > 解决方案 > Vue 中的 Matomo 标签管理器实现

vue.js - Vue 中的 Matomo 标签管理器实现

问题描述

我正在使用 Matomo 的 Vue 插件，可在此处找到：https ://github.com/AmazingDreams/vue-matomo

我在 main.js 入口文件中导入了 VueMatomo 插件，如下所示：

import VueMatomo from 'vue-matomo';

然后，我将 VueMatomo 分配为我的 main.js 文件中的全局方法，如下所示：

Vue.use(VueMatomo, {
  // Configure your matomo server and site
  host: 'https://matomo.example.com', 
  siteId: 1, 

  // Enables link tracking on regular links. Note that this won't
  // work for routing links (ie. internal Vue router links)
  // Default: true
  enableLinkTracking: true,

  // Require consent before sending tracking information to matomo
  // Default: false
  requireConsent: false,

  // Whether to track the initial page view
  // Default: true
  trackInitialView: true,

  // Changes the default .js and .php endpoint's filename
  // Default: 'piwik'
  trackerFileName: 'piwik',

  // Whether or not to log debug information
  // Default: false
  debug: false
});

如何在此插件中实现标签？我可以像这样将 trackerUrl 设置为我的容器 url：

// Overrides the autogenerated tracker endpoint entirely
// Default: undefined
trackerUrl: 'https://mycontainer.js'

另外我如何发送自定义数据。例如：

'user':{        
    'role':'consumer', 
    'type':'purchaser'
}

编辑：在 Matomo 标签管理器文档中，它说把它放在 head 标签中。

<!-- MTM -->
<script type="text/javascript">
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://mycontainer.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End MTM -->

vue-matomo 插件是否仍然需要它，或者你可以把

g.src='https://mycontainer.js'

别的地方？

标签： vue.jsmatomo

解决方案

在引擎盖下，Vue Plugin简单地向您展示Matomo tracking client SDK. 您可以通过.this.$matomo

您实际上可以在源代码中看到他们这样做：

const Matomo = MatomoJS.getTracker(trackerEndpoint, siteId)

// Assign matomo to Vue
Vue.prototype.$piwik = Matomo
Vue.prototype.$matomo = Matomo

解决的地方MatomoJS是通过import Matomojs from './matomo'哪个只是一个flat javascript file打包了他们的公共SDK。

推荐阅读