Add event collection.

lib/db.js

@@ -68,3 +68,25 @@ export async function savePageView(website_id, session_id, url, referrer) {
     }),
   );
 }
+
+export async function saveEvent(website_id, session_id, url, eventType, eventValue) {
+  return runQuery(
+    prisma.pageview.create({
+      data: {
+        website: {
+          connect: {
+            website_uuid: website_id,
+          },
+        },
+        session: {
+          connect: {
+            session_uuid: session_id,
+          },
+        },
+        url,
+        eventType,
+        eventValue,
+      },
+    }),
+  );
+}

lib/utils.js

@@ -91,6 +91,8 @@ export function parseCollectRequest(req) {
       const {
         url,
         referrer,
+        eventType,
+        eventValue,
         session: { website_id, session_id, time, hash: validationHash },
       } = payload;
 
@@ -107,6 +109,8 @@ export function parseCollectRequest(req) {
           session_id,
           url,
           referrer,
+          eventType,
+          eventValue,
         };
       }
     }

pages/api/collect.js

@@ -1,5 +1,5 @@
 import { parseCollectRequest } from 'lib/utils';
-import { savePageView } from 'lib/db';
+import { savePageView, saveEvent } from 'lib/db';
 import { allowPost } from 'lib/middleware';
 
 export default async (req, res) => {
@@ -8,12 +8,16 @@ export default async (req, res) => {
   const values = parseCollectRequest(req);
 
   if (values.success) {
-    const { type, website_id, session_id, url, referrer } = values;
+    const { type, website_id, session_id, url, referrer, eventType, eventValue } = values;
 
     if (type === 'pageview') {
       await savePageView(website_id, session_id, url, referrer).catch(() => {
         values.success = 0;
       });
+    } else if (type === 'event') {
+      await saveEvent(website_id, session_id, url, eventType, eventValue).catch(() => {
+        values.success = 0;
+      });
     }
   }
 

pages/index.js

@@ -14,6 +14,10 @@ export default function Home() {
       <Link href="/?q=123">
         <a>123</a>
       </Link>
+      <br />
+      <button id="primary-button" className="otherClass umami--click" type="button">
+        Button
+      </button>
     </Layout>
   );
 }

scripts/umami/index.js

@@ -10,6 +10,8 @@ const {
   history,
 } = window;
 
+/* Load script */
+
 const script = document.querySelector('script[data-website-id]');
 
 if (script) {
@@ -22,6 +24,8 @@ if (script) {
     let currentUrl = `${pathname}${search}`;
     let currenrRef = document.referrer;
 
+    /* Helper methods */
+
     const post = (url, params) =>
       fetch(url, {
         method: 'post',
@@ -56,6 +60,29 @@ if (script) {
         return success;
       });
 
+    const trackEvent = (url, eventType, eventValue) =>
+      post(`${hostUrl}/api/collect`, {
+        type: 'event',
+        payload: { url, eventType, eventValue, session: getSession() },
+      }).then(({ success }) => {
+        if (!success) {
+          store.removeItem(sessionKey);
+        }
+        return success;
+      });
+
+    const elementToString = e => {
+      return JSON.stringify(
+        e.getAttributeNames().reduce(
+          (obj, val) => {
+            obj[val] = e.getAttribute(val);
+            return obj;
+          },
+          { tag: e.tagName.toLowerCase() },
+        ),
+      );
+    };
+
     const execute = (url, referrer) => {
       const data = getSessionData(url);
 
@@ -69,6 +96,8 @@ if (script) {
       }
     };
 
+    /* Handle push state */
+
     const handlePush = (state, title, url) => {
       currenrRef = currentUrl;
       currentUrl = url;
@@ -87,6 +116,27 @@ if (script) {
     history.pushState = hook('pushState', handlePush);
     history.replaceState = hook('replaceState', handlePush);
 
+    /* Handle events */
+
+    document.querySelectorAll("[class*='umami--']").forEach(e => {
+      e.className.split(' ').forEach(c => {
+        console.log('class', c);
+        if (/^umami--/.test(c)) {
+          const [, event] = c.split('--');
+          console.log('event', event);
+          if (event) {
+            e.addEventListener(event, () => {
+              trackEvent(currentUrl, event, elementToString(e));
+              console.log('exec event', event, elementToString(e));
+            });
+          }
+        }
+      });
+      console.log('match', e);
+    });
+
+    /* Start */
+
     execute(currentUrl, currenrRef);
   }
 }