通常ではindex.html
に以下のようなコードを書くだけでOKです。
<script>
(function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://whoge.mautic.net/mtc.js','mt');
mt('send', 'pageview')
</script>
しかしJS内でページ遷移が発生するSPAなどでは、初回ロードしかトラッキングしてくれません。
React + react-route (v4)の場合は、以下のようにすることで対応できました。
class AppRoutes extends React.Component {
componentWillUpdate() {
const MauticJS = 'MauticJS'
if (window.hasOwnProperty(MauticJS)) {
window[MauticJS].sendPageview()
}
}
render () {
return (
<Switch>
<Route exact path="/" component={RouteTop} exact />
<Route path="/:slug" component={RouteSingle} />
</Switch>
)
}
}
MauticJS
オブジェクトが生成されるまですこしラグがあります。
また、初回ロードはhtmlに記載したmt関数でトラッキングできています。
そのため、routeタグをまとめたコンポーネントを用意して、componentWIllUpdateなどでページ遷移を検知します。
その後、window.MauticJS
が存在すればページビューを送信するようにしています。

もうちょっと良い方法などがあるかもですが、ひとまず現時点でわかっている方法として記録します。