Use axiom to capture events

Author: wong2

.gitignore

@@ -3,3 +3,4 @@ build/
 background.js
 .DS_Store
 *.zip
+.env

build.mjs

@@ -1,10 +1,14 @@
 import archiver from 'archiver'
 import autoprefixer from 'autoprefixer'
+import * as dotenv from 'dotenv'
 import esbuild from 'esbuild'
 import postcssPlugin from 'esbuild-style-plugin'
 import fs from 'fs-extra'
+import process from 'node:process'
 import tailwindcss from 'tailwindcss'
 
+dotenv.config()
+
 const outdir = 'build'
 
 async function deleteOldDir() {
@@ -25,6 +29,7 @@ async function runEsbuild() {
     minify: true,
     define: {
       'process.env.NODE_ENV': '"production"',
+      'process.env.AXIOM_TOKEN': JSON.stringify(process.env.AXIOM_TOKEN || 'UNDEFINED'),
     },
     jsxFactory: 'h',
     jsxFragment: 'Fragment',

package-lock.json

@@ -36,6 +36,7 @@
     "archiver": "^5.3.1",
     "autoprefixer": "^10.4.13",
     "chokidar-cli": "^3.0.0",
+    "dotenv": "^16.0.3",
     "esbuild": "^0.16.4",
     "esbuild-style-plugin": "^1.6.1",
     "eslint": "^8.30.0",

package.json

@@ -1,3 +1,10 @@
 export function captureEvent(event: string, properties?: object) {
-  // TODO
+  fetch('https://api.axiom.co/v1/datasets/extension/ingest', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-ndjson',
+      Authorization: `Bearer ${process.env.AXIOM_TOKEN}`,
+    },
+    body: JSON.stringify({ event, ...(properties || {}) }),
+  }).catch((err) => console.error('captureEvent error', err))
 }

src/analytics.ts

@@ -69,7 +69,7 @@ function ChatGPTQuery(props: Props) {
 
   useEffect(() => {
     if (status === 'success') {
-      captureEvent('showAnswer', { status })
+      captureEvent('show_answer', { host: location.host, language: navigator.language })
     }
   }, [props.question, status])
 

src/content-script/ChatGPTQuery.tsx

@@ -1,21 +1,33 @@
+import { useCallback } from 'react'
+import { captureEvent } from '../analytics'
 import { PromotionResponse } from './api'
 
 interface Props {
   data: PromotionResponse
 }
 
 function Promotion({ data }: Props) {
+  const capturePromotionClick = useCallback(() => {
+    captureEvent('click_promotion', { link: data.url })
+  }, [data.url])
+
   if (data.image && !data.text) {
     return (
-      <a href={data.url} target="_blank" rel="noreferrer" className="mt-5">
+      <a
+        href={data.url}
+        target="_blank"
+        rel="noreferrer"
+        className="mt-5"
+        onClick={capturePromotionClick}
+      >
         <img src={data.image.url} className="w-full" />
       </a>
     )
   }
   return (
     <div className="chat-gpt-card flex flex-row gap-2 mt-5 gpt-promotion">
       {!!data.image && (
-        <a href={data.url} target="_blank" rel="noreferrer">
+        <a href={data.url} target="_blank" rel="noreferrer" onClick={capturePromotionClick}>
           <img
             src={data.image.url}
             width={data.image.size || 100}
@@ -26,22 +38,28 @@ function Promotion({ data }: Props) {
       <div className="flex flex-col justify-between">
         <div>
           {!!data.title && (
-            <a href={data.url} target="_blank" rel="noreferrer">
+            <a href={data.url} target="_blank" rel="noreferrer" onClick={capturePromotionClick}>
               <p className="font-bold">{data.title}</p>
             </a>
           )}
           {!!data.text &&
             (data.title ? (
               <p>{data.text}</p>
             ) : (
-              <a href={data.url} target="_blank" rel="noreferrer">
+              <a href={data.url} target="_blank" rel="noreferrer" onClick={capturePromotionClick}>
                 <p>{data.text}</p>
               </a>
             ))}
         </div>
         <div className="flex flex-row justify-between">
           {!!data.footer && (
-            <a href={data.footer.url} target="_blank" rel="noreferrer" className="text-xs">
+            <a
+              href={data.footer.url}
+              target="_blank"
+              rel="noreferrer"
+              className="text-xs"
+              onClick={capturePromotionClick}
+            >
               {data.footer.text}
             </a>
           )}
@@ -51,6 +69,7 @@ function Promotion({ data }: Props) {
               target="_blank"
               rel="noreferrer"
               className="text-xs rounded-sm border border-solid px-[2px] text-inherit"
+              onClick={capturePromotionClick}
             >
               {data.label.text}
             </a>