Airtake Analytics 적용 (#2855)

apps/website/.env

@@ -31,6 +31,7 @@ PRIVATE_JWK=
 PRIVATE_TWITTER_CONSUMER_KEY=
 PRIVATE_TWITTER_CONSUMER_SECRET=
 
+PUBLIC_AIRTAKE_TOKEN=
 PUBLIC_MIXPANEL_TOKEN=
 PUBLIC_PULUMI_STACK=LOCAL
 PUBLIC_DATADOG_APP_ID=

apps/website/package.json

@@ -17,6 +17,7 @@
     "test": "playwright test"
   },
   "dependencies": {
+    "@airtake/browser": "^0.1.0-alpha.5",
     "@apple/app-store-server-library": "^1.4.0",
     "@aws-sdk/client-s3": "^3.614.0",
     "@aws-sdk/client-ses": "^3.614.0",

apps/website/src/hooks/client.ts

@@ -1,7 +1,8 @@
-import { setupMixpanel } from '$lib/analytics';
+import { setupAirtake, setupMixpanel } from '$lib/analytics';
 import { setupGlobals } from './common';
 
 export { handleError } from './common';
 
 setupGlobals();
+setupAirtake();
 setupMixpanel();

apps/website/src/lib/analytics/airtake.ts

@@ -0,0 +1,9 @@
+import Airtake from '@airtake/browser';
+import { env } from '$env/dynamic/public';
+
+export const setupAirtake = () => {
+  Airtake.init({
+    baseUrl: 'https://ingest.airtake.dev',
+    token: env.PUBLIC_AIRTAKE_TOKEN,
+  });
+};

apps/website/src/lib/analytics/index.ts

@@ -1 +1,21 @@
+import airtake from '@airtake/browser';
+import mixpanel from 'mixpanel-browser';
+
+export * from './airtake';
 export * from './mixpanel';
+
+const analytics = {
+  track: (event: string, properties?: Record<string, unknown>) => {
+    mixpanel.track(event, properties);
+    airtake.track(event, properties);
+  },
+
+  reset: () => {
+    mixpanel.reset();
+    airtake.reset();
+  },
+};
+
+export { analytics };
+export { default as airtake } from '@airtake/browser';
+export { default as mixpanel } from 'mixpanel-browser';

apps/website/src/lib/analytics/mixpanel.ts

@@ -8,5 +8,3 @@ export const setupMixpanel = () => {
     persistence: 'localStorage',
   });
 };
-
-export { default as mixpanel } from 'mixpanel-browser';

apps/website/src/lib/components/Post.svelte

@@ -6,7 +6,7 @@
   import IconMessageCircle from '~icons/tabler/message-circle';
   import IconMoodSmile from '~icons/tabler/mood-smile';
   import { fragment, graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { humanizeNumber } from '$lib/utils';
   import { css } from '$styled-system/css';
   import { flex } from '$styled-system/patterns';
@@ -328,7 +328,7 @@
           type="button"
           on:click={async () => {
             await unbookmarkPost({ bookmarkGroupId: $post.bookmarkGroups[0].id, postId: $post.id });
-            mixpanel.track('post:unbookmark', { postId: $post.id, via: 'feed' });
+            analytics.track('post:unbookmark', { postId: $post.id, via: 'feed' });
           }}
         >
           <Icon style={css.raw({ color: 'gray.900' })} icon={IconBookmarkFilled} size={20} />
@@ -351,7 +351,7 @@
             }
 
             await bookmarkPost({ postId: $post.id });
-            mixpanel.track('post:bookmark', { postId: $post.id, via: 'feed' });
+            analytics.track('post:bookmark', { postId: $post.id, via: 'feed' });
           }}
         >
           <Icon style={css.raw({ color: 'gray.400' })} icon={IconBookmark} size={20} />

apps/website/src/lib/components/pages/collections/CreateCollectionModal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import mixpanel from 'mixpanel-browser';
   import { createEventDispatcher } from 'svelte';
   import IconCamera from '~icons/tabler/camera';
   import { graphql } from '$glitch';
+  import { analytics } from '$lib/analytics';
   import { Button, Icon, Image, Modal } from '$lib/components';
   import { FormField, TextArea, TextInput } from '$lib/components/forms';
   import { ThumbnailPicker } from '$lib/components/media';
@@ -45,7 +45,7 @@
     extra: () => ({ thumbnailId: thumbnail?.id }),
     onSuccess: ({ id, name }) => {
       open = false;
-      mixpanel.track('space:collection:create', { spaceId, collectionId: id });
+      analytics.track('space:collection:create', { spaceId, collectionId: id });
       dispatch('success', { id, name, thumbnail });
     },
   });

apps/website/src/lib/emoji/Emoji.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import IconX from '~icons/tabler/x';
   import { graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Icon } from '$lib/components';
   import { cx } from '$styled-system/css';
   import { center } from '$styled-system/patterns';
@@ -43,7 +43,7 @@
         postId,
         emoji,
       });
-      mixpanel.track('post:reaction:delete', { postId, emoji });
+      analytics.track('post:reaction:delete', { postId, emoji });
     }}
   >
     <em-emoji

apps/website/src/lib/emoji/EmojiPicker.svelte

@@ -4,7 +4,7 @@
   import IconMoodPlus from '~icons/tabler/mood-plus';
   import { afterNavigate } from '$app/navigation';
   import { fragment, graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Icon, LoginRequireAlert } from '$lib/components';
   import { createFloatingActions } from '$lib/svelte/actions';
   import { css } from '$styled-system/css';
@@ -93,7 +93,7 @@
           emoji: emoji.id,
         });
 
-        mixpanel.track('post:reaction:create', { postId: $query.post.id, emoji: emoji.id, via: variant });
+        analytics.track('post:reaction:create', { postId: $query.post.id, emoji: emoji.id, via: variant });
       },
       exceptEmojis,
       perLine: 8,

apps/website/src/lib/tiptap/node-views/access-barrier/Component.svelte

@@ -12,7 +12,7 @@
   import { browser } from '$app/environment';
   import { afterNavigate } from '$app/navigation';
   import { graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Button, Icon, LoginRequireAlert, Modal, Tooltip } from '$lib/components';
   import { isWebView, onFlutterMessage, postFlutterMessage } from '$lib/flutter';
   import { createFloatingActions, portal } from '$lib/svelte/actions';
@@ -158,7 +158,7 @@
         revisionId,
       });
 
-      mixpanel.track('post:purchase', {
+      analytics.track('post:purchase', {
         postId: $query?.post.id,
         price: node.attrs.price,
       });
@@ -521,7 +521,7 @@
                   revisionId,
                 });
 
-                mixpanel.track('post:purchase', {
+                analytics.track('post:purchase', {
                   postId: $query?.post.id,
                   price: node.attrs.price,
                 });

apps/website/src/routes/(auth)/find-account/+page.svelte

@@ -3,15 +3,15 @@
   import qs from 'query-string';
   import IconDeviceMobile from '~icons/tabler/device-mobile';
   import { page } from '$app/stores';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Alert, Button, Helmet, Icon, Link } from '$lib/components';
   import { css } from '$styled-system/css';
   import { flex } from '$styled-system/patterns';
 
   let accountNotFoundOpen = false;
 
   const handleUserIdentityVerification = () => {
-    mixpanel.track('user:personal-identity-verification:start');
+    analytics.track('user:personal-identity-verification:start');
 
     // @ts-expect-error portone 관련 코드
     IMP.init('imp72534540');

apps/website/src/routes/(auth)/login/+page@.svelte

@@ -5,7 +5,7 @@
   import Naver from '$assets/icons/naver.svg?component';
   import FullLogo from '$assets/logos/full.svg?component';
   import { graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Helmet, Icon, Image } from '$lib/components';
   import { css } from '$styled-system/css';
   import { center, flex } from '$styled-system/patterns';
@@ -112,7 +112,7 @@
             provider: 'GOOGLE',
           });
 
-          mixpanel.track('user:login:start', { method: 'google' });
+          analytics.track('user:login:start', { method: 'google' });
           location.href = url;
         }}
       >
@@ -140,7 +140,7 @@
             provider: 'NAVER',
           });
 
-          mixpanel.track('user:login:start', { method: 'naver' });
+          analytics.track('user:login:start', { method: 'naver' });
           location.href = url;
         }}
       >

apps/website/src/routes/(auth)/login/code/+page.svelte

@@ -4,7 +4,7 @@
   import IconCheck from '~icons/tabler/check';
   import { page } from '$app/stores';
   import { graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Button, Helmet, Icon } from '$lib/components';
   import { DigitsInput } from '$lib/components/forms';
   import { createMutationForm } from '$lib/form';
@@ -24,7 +24,7 @@
     `),
     schema: IssueUserEmailAuthorizationTokenSchema,
     onSuccess: (resp) => {
-      mixpanel.track('user:login:success', { method: 'email:code' });
+      analytics.track('user:login:success', { method: 'email:code' });
       location.href = qs.stringifyUrl({
         url: '/api/email',
         query: { token: resp.token },
@@ -105,7 +105,7 @@
         if (!email) return;
 
         await loginUser({ email });
-        mixpanel.track('user:login:start', { method: 'email:code' });
+        analytics.track('user:login:start', { method: 'email:code' });
         emailResendTime = dayjs.kst().formatAsDateTime();
       }}
     >

apps/website/src/routes/(auth)/login/email/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Button, Helmet } from '$lib/components';
   import { FormField, TextInput } from '$lib/components/forms';
   import { createMutationForm } from '$lib/form';
@@ -20,7 +20,7 @@
     `),
     schema: LoginUserSchema,
     onSuccess: async (resp) => {
-      mixpanel.track('user:login:start', { method: 'email' });
+      analytics.track('user:login:start', { method: 'email' });
       await goto(`/login/next?email=${resp.email}`);
     },
   });

apps/website/src/routes/(auth)/login/next/+page.svelte

@@ -6,7 +6,7 @@
   import IconCheck from '~icons/tabler/check';
   import { page } from '$app/stores';
   import { graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Button, Helmet, Icon } from '$lib/components';
   import { css } from '$styled-system/css';
   import { center, flex } from '$styled-system/patterns';
@@ -120,7 +120,7 @@
         if (!email) return;
 
         await loginUser({ email });
-        mixpanel.track('user:login:start', { method: 'email' });
+        analytics.track('user:login:start', { method: 'email' });
         emailResendTime = dayjs.kst().formatAsDateTime();
       }}
     >

apps/website/src/routes/(auth)/signup/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Button, Helmet, Link } from '$lib/components';
   import { Checkbox, FormField, TextInput } from '$lib/components/forms';
   import { createMutationForm } from '$lib/form';
@@ -31,7 +31,7 @@
     schema: CreateUserSchema,
     initialValues: { name: '' },
     onSuccess: () => {
-      mixpanel.track('user:signup:success');
+      analytics.track('user:signup:success');
       location.href = '/';
     },
   });

apps/website/src/routes/(default)/(feed)/challenge/+page.svelte

@@ -3,7 +3,7 @@
   import { goto } from '$app/navigation';
   import ChallengeTitle from '$assets/icons/challenge.svg?component';
   import { graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Button, Helmet, Icon, Post } from '$lib/components';
   import { css } from '$styled-system/css';
   import { center, flex } from '$styled-system/patterns';
@@ -133,7 +133,7 @@
           }
 
           const { permalink } = await createPost({ spaceId: undefined });
-          mixpanel.track('post:create', { via: 'challenge-feed' });
+          analytics.track('post:create', { via: 'challenge-feed' });
           await goto(`/editor/${permalink}`);
         }}
       >

apps/website/src/routes/(default)/CommentNotification.svelte

@@ -4,7 +4,7 @@
   import IconMessageCircle from '~icons/tabler/message-circle';
   import { goto } from '$app/navigation';
   import { fragment, graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Icon } from '$lib/components';
   import { css } from '$styled-system/css';
   import type { CommentNotification_commentNotification } from '$glitch';
@@ -50,7 +50,7 @@
   const redirect = async (notification: typeof $commentNotification) => {
     if (notification.state === 'UNREAD') {
       await markNotificationAsRead({ notificationId: notification.id });
-      mixpanel.track('user:notification-state:read');
+      analytics.track('user:notification-state:read');
     }
 
     const resp = await ky.get(`/api/notification/${notification.id}`);

apps/website/src/routes/(default)/CreateSpaceModal.svelte

@@ -5,7 +5,7 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { fragment, graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Button, Icon, Image, Modal, Tooltip } from '$lib/components';
   import { FormField, TextInput } from '$lib/components/forms';
   import { ThumbnailPicker } from '$lib/components/media';
@@ -65,7 +65,7 @@
     onSuccess: async ({ id, slug }) => {
       dispatch('create', { id });
 
-      mixpanel.track('space:create', { useSpaceProfile: true, via });
+      analytics.track('space:create', { useSpaceProfile: true, via });
       open = false;
 
       if (via === 'user-menu') {

apps/website/src/routes/(default)/EmojiReactionNotification.svelte

@@ -6,7 +6,7 @@
   import IconMoodHeart from '~icons/tabler/mood-heart';
   import { goto } from '$app/navigation';
   import { fragment, graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Icon } from '$lib/components';
   import { emojiData } from '$lib/emoji';
   import { css } from '$styled-system/css';
@@ -57,7 +57,7 @@
   const redirect = async (notification: typeof $emojiReactionNotification) => {
     if (notification.state === 'UNREAD') {
       await markNotificationAsRead({ notificationId: notification.id });
-      mixpanel.track('user:notification-state:read');
+      analytics.track('user:notification-state:read');
     }
 
     const resp = await ky.get(`/api/notification/${notification.id}`);

apps/website/src/routes/(default)/Header.svelte

@@ -3,7 +3,7 @@
   import { goto } from '$app/navigation';
   import FullLogo from '$assets/logos/full.svg?component';
   import { fragment, graphql } from '$glitch';
-  import { mixpanel } from '$lib/analytics';
+  import { analytics } from '$lib/analytics';
   import { Button, Icon } from '$lib/components';
   import { css } from '$styled-system/css';
   import { flex } from '$styled-system/patterns';
@@ -119,7 +119,7 @@
           type="button"
           on:click={async () => {
             const { permalink } = await createPost({ spaceId: undefined });
-            mixpanel.track('post:create', { via: 'feed' });
+            analytics.track('post:create', { via: 'feed' });
             await goto(`/editor/${permalink}`);
           }}
         >