Capture pushState events.

.gitignore

@@ -14,7 +14,6 @@
 
 # production
 /build
-/public/umami.js
 
 # misc
 .DS_Store

components/layout.js

@@ -17,7 +17,7 @@ export default function Layout({ title, children }) {
           <script
             async
             defer
-            data-website-id="865234ad-6a92-11e7-8846-b05adad3f099"
+            data-website-id="d0059975-b79a-4f83-8926-ed731475fded"
             src="/umami.js"
           />
         )}

pages/api/session.js

@@ -5,7 +5,7 @@ import { allowPost } from 'lib/middleware';
 export default async (req, res) => {
   await allowPost(req, res);
 
-  let result = { success: 0, time: Date.now() };
+  let result = { success: 0 };
 
   const {
     website_id,
@@ -23,6 +23,7 @@ export default async (req, res) => {
 
     if (website) {
       const session = await getSession(session_id);
+      const time = Date.now();
 
       if (!session) {
         await createSession(website_id, session_id, {
@@ -40,7 +41,8 @@ export default async (req, res) => {
         success: 1,
         session_id,
         website_id,
-        hash: hash(`${website_id}${session_id}${result.time}`),
+        time,
+        hash: hash(`${website_id}${session_id}${time}`),
       };
     }
   }

pages/index.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import Layout from 'components/layout';
+import Link from 'next/link';
 
 export default function Home() {
   return (
     <Layout>
       Hello.
       <br />
-      <a href="/?q=abc">abc</a>
+      <Link href="/?q=abc">
+        <a>abc</a>
+      </Link>
       <br />
-      <a href="/?q=123">123</a>
+      <Link href="/?q=123">
+        <a>123</a>
+      </Link>
     </Layout>
   );
 }

scripts/umami/index.js

@@ -1,17 +1,28 @@
 import 'promise-polyfill/src/polyfill';
 import 'unfetch/polyfill';
 
-const HOST_URL = process.env.UMAMI_URL;
-const SESSION_VAR = 'umami.session';
 const {
   screen: { width, height },
   navigator: { language },
   location: { hostname, pathname, search },
   localStorage: store,
   document,
+  history,
 } = window;
 
-const post = (url, params) =>
+const script = document.querySelector('script[data-website-id]');
+
+if (script) {
+  const website_id = script.getAttribute('data-website-id');
+
+  if (website_id) {
+    const sessionKey = 'umami.session';
+    const hostUrl = new URL(script.src).origin;
+    const screen = `${width}x${height}`;
+    let currentUrl = `${pathname}${search}`;
+    let currenrRef = document.referrer;
+
+    const post = (url, params) =>
       fetch(url, {
         method: 'post',
         cache: 'no-cache',
@@ -22,42 +33,57 @@ const post = (url, params) =>
         body: JSON.stringify(params),
       }).then(res => res.json());
 
-const createSession = data =>
-  post(`${HOST_URL}/api/session`, data).then(({ success, ...session }) => {
+    const createSession = data =>
+      post(`${hostUrl}/api/session`, data).then(({ success, ...session }) => {
         if (success) {
-      store.setItem(SESSION_VAR, JSON.stringify(session));
+          store.setItem(sessionKey, JSON.stringify(session));
           return success;
         }
       });
 
-const getSession = () => JSON.parse(store.getItem(SESSION_VAR));
+    const getSession = () => JSON.parse(store.getItem(sessionKey));
 
-const pageView = (url, referrer) =>
-  post(`${HOST_URL}/api/collect`, {
+    const getSessionData = url => ({ website_id, hostname, url, screen, language });
+
+    const pageView = (url, referrer) =>
+      post(`${hostUrl}/api/collect`, {
         type: 'pageview',
         payload: { url, referrer, session: getSession() },
       }).then(({ success }) => {
         if (!success) {
-      store.removeItem(SESSION_VAR);
+          store.removeItem(sessionKey);
         }
         return success;
       });
 
-const script = document.querySelector('script[data-website-id]');
+    const execute = (url, referrer) => {
+      const data = getSessionData(url);
 
-if (script) {
-  const website_id = script.getAttribute('data-website-id');
-
-  if (website_id) {
-    const referrer = document.referrer;
-    const screen = `${width}x${height}`;
-    const url = `${pathname}${search}`;
-    const data = { website_id, hostname, url, screen, language };
-
-    if (!store.getItem(SESSION_VAR)) {
+      if (!store.getItem(sessionKey)) {
         createSession(data).then(success => success && pageView(url, referrer));
       } else {
         pageView(url, referrer).then(success => !success && createSession(data));
       }
+    };
+
+    const handlePush = (state, title, url) => {
+      currenrRef = currentUrl;
+      currentUrl = url;
+      execute(currentUrl, currenrRef);
+    };
+
+    const hook = (type, cb) => {
+      const orig = history[type];
+      return (state, title, url) => {
+        const args = [state, title, url];
+        cb.apply(null, args);
+        return orig.apply(history, args);
+      };
+    };
+
+    history.pushState = hook('pushState', handlePush);
+    history.replaceState = hook('replaceState', handlePush);
+
+    execute(currentUrl, currenrRef);
   }
 }