feat(#2464): integrated stats code mamoto

package-lock.json

@@ -8,6 +8,7 @@
       "name": "spa_instat_tv",
       "version": "0.1.0",
       "dependencies": {
+        "@jonkoops/matomo-tracker-react": "^0.7.0",
         "@stripe/react-stripe-js": "^1.4.0",
         "@stripe/stripe-js": "^1.13.2",
         "babel-polyfill": "^6.26.0",
@@ -3711,6 +3712,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/@jonkoops/matomo-tracker": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@jonkoops/matomo-tracker/-/matomo-tracker-0.7.0.tgz",
+      "integrity": "sha512-ppCXiDaVytTQOP6hNZIBwjUph5IrGgDoQw4IF5sBoA3PBpMAc5tWtPExbVWTR5pJWpTcp11dv2M83n9pm7LpeQ=="
+    },
+    "node_modules/@jonkoops/matomo-tracker-react": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@jonkoops/matomo-tracker-react/-/matomo-tracker-react-0.7.0.tgz",
+      "integrity": "sha512-3iwG/QM1T6KokU/NZNCkhOccIkhaNnO1+0bTv2JsLbsS7u7hWxpio20gfBjCRd/9N1AMiGidvytG2FK9tu7WFw==",
+      "dependencies": {
+        "@jonkoops/matomo-tracker": "^0.7.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@mdx-js/loader": {
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.22.tgz",
@@ -36087,6 +36104,19 @@
         }
       }
     },
+    "@jonkoops/matomo-tracker": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@jonkoops/matomo-tracker/-/matomo-tracker-0.7.0.tgz",
+      "integrity": "sha512-ppCXiDaVytTQOP6hNZIBwjUph5IrGgDoQw4IF5sBoA3PBpMAc5tWtPExbVWTR5pJWpTcp11dv2M83n9pm7LpeQ=="
+    },
+    "@jonkoops/matomo-tracker-react": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@jonkoops/matomo-tracker-react/-/matomo-tracker-react-0.7.0.tgz",
+      "integrity": "sha512-3iwG/QM1T6KokU/NZNCkhOccIkhaNnO1+0bTv2JsLbsS7u7hWxpio20gfBjCRd/9N1AMiGidvytG2FK9tu7WFw==",
+      "requires": {
+        "@jonkoops/matomo-tracker": "^0.7.0"
+      }
+    },
     "@mdx-js/loader": {
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.22.tgz",

package.json

@@ -18,6 +18,7 @@
     "lff": "REACT_APP_CLIENT=lff react-scripts start"
   },
   "dependencies": {
+    "@jonkoops/matomo-tracker-react": "^0.7.0",
     "@stripe/react-stripe-js": "^1.4.0",
     "@stripe/stripe-js": "^1.13.2",
     "babel-polyfill": "^6.26.0",

src/config/pages.tsx

@@ -2,6 +2,7 @@ export const PAGES = {
   about_the_project: 'https://instatsport.com/InStatTV/ott_platform',
   home: '/',
   match: '/matches',
+  matomoBaseUrl: 'https://matomo.instat.tv/',
   player: '/players',
   team: '/teams',
   tournament: '/tournaments',

src/features/App/index.tsx

@@ -1,10 +1,13 @@
 import { Suspense } from 'react'
 import { Router } from 'react-router-dom'
 
+import { createInstance, MatomoProvider } from '@jonkoops/matomo-tracker-react'
+
 import { history } from 'config/history'
 import { client } from 'config/clients'
-import { setClientTitleAndDescription } from 'helpers/setClientHeads'
+import { PAGES } from 'config/pages'
 
+import { setClientTitleAndDescription } from 'helpers/setClientHeads'
 import { isMatchPage } from 'helpers/isMatchPage'
 
 import { GlobalStores } from 'features/GlobalStores'
@@ -18,6 +21,11 @@ import { AuthenticatedApp } from './AuthenticatedApp'
 
 setClientTitleAndDescription(client.title, client.description)
 
+const matomoInstance = createInstance({
+  siteId: 1,
+  urlBase: PAGES.matomoBaseUrl,
+})
+
 const Main = () => {
   const { loadingUser, user } = useAuthStore()
 
@@ -32,6 +40,7 @@ const Main = () => {
 }
 
 const OTTApp = () => (
+  <MatomoProvider value={matomoInstance}>
     <Router history={history}>
       <Theme>
         <GlobalStyles />
@@ -44,6 +53,7 @@ const OTTApp = () => (
         </GlobalStores>
       </Theme>
     </Router>
+  </MatomoProvider>
 )
 
 export default OTTApp

src/features/GlobalStores/index.tsx

@@ -1,9 +1,12 @@
-import { ReactNode } from 'react'
+import { ReactNode, useEffect } from 'react'
+
+import { useMatomo } from '@jonkoops/matomo-tracker-react'
 
 import { getLanguageUrlParam } from 'helpers/languageUrlParam'
 
 import { AuthStore } from 'features/AuthStore'
 import { LexicsStore } from 'features/LexicsStore'
+import { useLocation } from 'react-router'
 
 const initialLanguage = getLanguageUrlParam()
 
@@ -11,10 +14,19 @@ type Props = {
   children: ReactNode,
 }
 
-export const GlobalStores = ({ children }: Props) => (
+export const GlobalStores = ({ children }: Props) => {
+  const { pathname, search } = useLocation()
+  const { trackPageView } = useMatomo()
+
+  useEffect(() => {
+    trackPageView()
+  }, [trackPageView, pathname, search])
+
+  return (
     <LexicsStore initialLanguage={initialLanguage}>
       <AuthStore>
         {children}
       </AuthStore>
     </LexicsStore>
   )
+}