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,63 +1,89 @@
 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) =>
-  fetch(url, {
-    method: 'post',
-    cache: 'no-cache',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(params),
-  }).then(res => res.json());
-
-const createSession = data =>
-  post(`${HOST_URL}/api/session`, data).then(({ success, ...session }) => {
-    if (success) {
-      store.setItem(SESSION_VAR, JSON.stringify(session));
-      return success;
-    }
-  });
-
-const getSession = () => JSON.parse(store.getItem(SESSION_VAR));
-
-const pageView = (url, referrer) =>
-  post(`${HOST_URL}/api/collect`, {
-    type: 'pageview',
-    payload: { url, referrer, session: getSession() },
-  }).then(({ success }) => {
-    if (!success) {
-      store.removeItem(SESSION_VAR);
-    }
-    return success;
-  });
-
 const script = document.querySelector('script[data-website-id]');
 
 if (script) {
   const website_id = script.getAttribute('data-website-id');
 
   if (website_id) {
-    const referrer = document.referrer;
+    const sessionKey = 'umami.session';
+    const hostUrl = new URL(script.src).origin;
     const screen = `${width}x${height}`;
-    const url = `${pathname}${search}`;
-    const data = { website_id, hostname, url, screen, language };
+    let currentUrl = `${pathname}${search}`;
+    let currenrRef = document.referrer;
 
-    if (!store.getItem(SESSION_VAR)) {
-      createSession(data).then(success => success && pageView(url, referrer));
-    } else {
-      pageView(url, referrer).then(success => !success && createSession(data));
-    }
+    const post = (url, params) =>
+      fetch(url, {
+        method: 'post',
+        cache: 'no-cache',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(params),
+      }).then(res => res.json());
+
+    const createSession = data =>
+      post(`${hostUrl}/api/session`, data).then(({ success, ...session }) => {
+        if (success) {
+          store.setItem(sessionKey, JSON.stringify(session));
+          return success;
+        }
+      });
+
+    const getSession = () => JSON.parse(store.getItem(sessionKey));
+
+    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(sessionKey);
+        }
+        return success;
+      });
+
+    const execute = (url, referrer) => {
+      const data = getSessionData(url);
+
+      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);
   }
 }