diff --git a/web/public/index.html b/web/public/index.html
index 9c248d4..36d234b 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -11,8 +11,7 @@
     <meta name="description" content="themer takes a set of colors and generates themes for your apps: editors, terminals, wallpapers, and more.">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <title>themer</title>
-    <!-- <script async src="https://mjswensen.tel/client.js"></script> -->
-    <script>window.__ssa__log = function() {};</script>
+    <script>!function(t){window.__ssa__log=function(e,n){var o=new XMLHttpRequest;o.open("POST",t+"/v1/event"),o.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),o.send("url="+encodeURIComponent(window.location.href)+"&dpr="+(window.devicePixelRatio||1)+"&w="+window.innerWidth+"&h="+window.innerHeight+"&name="+encodeURIComponent(e)+(n?"&"+function e(n,o,t){t=t||[];if("object"==typeof n)for(var i in n)e(n[i],o?o+"["+i+"]":i,t);else t.push(o+"="+encodeURIComponent(n));return t.join("&")}(n,"metadata"):""))},window.__ssa__log("load",{referrer:window.document.referrer}),window.addEventListener("beforeunload",function(){window.__ssa__log("unload")})}(window.__ssa__ORIGIN||"https://mjswensen.tel");</script>
   </head>
   <body>
     <noscript>
diff --git a/web/src/ColorInput.js b/web/src/ColorInput.js
index af42488..b4faf8f 100644
--- a/web/src/ColorInput.js
+++ b/web/src/ColorInput.js
@@ -1,4 +1,5 @@
-import React, { useRef, useContext } from 'react';
+import React, { useRef, useContext, useCallback } from 'react';
+import { debounce } from 'lodash';
 import numeral from 'numeral';
 import { DropletIcon } from './Icons';
 import styles from './ColorInput.module.css';
@@ -14,6 +15,7 @@ export default ({ className, style, colorKey, help }) => {
     setActiveRawColor,
     getActiveContrastFromBackground,
   } = useContext(ThemeContext);
+  const debouncedLogEvent = useCallback(debounce(window.__ssa__log, 1000), []);
   const contrast = colorKey === 'shade0'
     ? null
     : numeral(getActiveContrastFromBackground(colorKey)).format('0.00');
@@ -34,7 +36,10 @@ export default ({ className, style, colorKey, help }) => {
               borderBottomColor: getActiveColorOrFallback([colorKey]),
             }}
             value={ getActiveRawColor(colorKey) }
-            onChange={ evt => setActiveRawColor(colorKey, evt.target.value) }
+            onChange={ evt => {
+              setActiveRawColor(colorKey, evt.target.value);
+              debouncedLogEvent('change raw color', { inputType: 'text' });
+            } }
             ref={ textInput }
           />
         </label>
@@ -62,7 +67,10 @@ export default ({ className, style, colorKey, help }) => {
             type="color"
             className={ styles.colorInput }
             value={ getActiveColorOrFallback([colorKey], colorKey === 'shade0') }
-            onChange={ evt => setActiveRawColor(colorKey, evt.target.value) }
+            onChange={ evt => {
+              setActiveRawColor(colorKey, evt.target.value);
+              debouncedLogEvent('change raw color', { inputType: 'color' });
+            } }
             tabIndex="-1"
           />
         </label>
