月別: 2017年11月

通常では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が存在すればページビューを送信するようにしています。

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