chore: track cloud/self-host click (#949)

Author: tianzhou

src/components/shared/header/header.tsx

@@ -8,6 +8,7 @@ import Link from '@/components/shared/link';
 import MobileMenu from '@/components/shared/mobile-menu';
 
 import Route from '@/lib/route';
+import { EVENTS } from '@/lib/events';
 
 import AboutIcon from '@/svgs/about.inline.svg';
 import BlogIcon from '@/svgs/blog.inline.svg';
@@ -393,10 +394,22 @@ const Header = () => {
           </ul>
           <div className="ml-auto flex items-center gap-2 md:mr-10 sm:hidden">
             <GithubStarCounter />
-            <Button href={Route.DOCS_CLOUD} theme="primary-outline" className="w-[88px]" size="sm">
+            <Button
+              href={Route.DOCS_CLOUD}
+              theme="primary-outline"
+              className="w-[88px]"
+              size="sm"
+              event={EVENTS.CLOUD_CLICK}
+            >
               Cloud
             </Button>
-            <Button href={Route.DOCS_SELF_HOST} theme="gray-filled" className="w-[116px]" size="sm">
+            <Button
+              href={Route.DOCS_SELF_HOST}
+              theme="gray-filled"
+              className="w-[116px]"
+              size="sm"
+              event={EVENTS.SELF_HOST_CLICK}
+            >
               Self-host
             </Button>
           </div>

src/components/shared/mobile-menu/mobile-menu.tsx

@@ -13,6 +13,7 @@ import Button from '@/components/shared/button';
 import Link from '@/components/shared/link';
 
 import Route from '@/lib/route';
+import { EVENTS } from '@/lib/events';
 
 import AboutIcon from '@/svgs/about.inline.svg';
 import BlogIcon from '@/svgs/blog.inline.svg';
@@ -267,10 +268,20 @@ const MobileMenu = () => {
               </li>
             </div>
             <div className="sticky bottom-0 z-10 mt-auto hidden flex-col gap-4 pt-4 sm:flex sm:gap-2">
-              <Button href={Route.DOCS_SELF_HOST} theme="gray-filled" size="md">
+              <Button
+                href={Route.DOCS_SELF_HOST}
+                theme="gray-filled"
+                size="md"
+                event={EVENTS.SELF_HOST_CLICK}
+              >
                 Self-host
               </Button>
-              <Button href={Route.DOCS_CLOUD} theme="primary-outline" size="md">
+              <Button
+                href={Route.DOCS_CLOUD}
+                theme="primary-outline"
+                size="md"
+                event={EVENTS.CLOUD_CLICK}
+              >
                 Cloud
               </Button>
             </div>

src/lib/events.ts

@@ -1,3 +1,5 @@
 export const EVENTS = {
   PLAN_CLICK: 'plan.click',
+  CLOUD_CLICK: 'cloud.click',
+  SELF_HOST_CLICK: 'self-host.click',
 };