Logos-Engineering · mnuzulia · Sep 1, 2021
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@emotion/styled": "^11.3.0",
     "@fontsource/lexend": "^4.4.5",
     "@fontsource/poppins": "^4.5.0",
+    "@splitbee/web": "^0.2.4",
     "framer-motion": "^4.1.17",
     "next": "^11.0.0",
     "next-pwa": "^5.2.21",

diff --git a/src/components/AccessibleLink.tsx b/src/components/AccessibleLink.tsx
@@ -6,20 +6,22 @@ import Link, { LinkProps } from "next/link";
 
 type AccessibleLinkProps = LinkProps & ChakraLinkProps;
 
-const AccessibleLink = ({
+const AccessibleLink:React.FC<AccessibleLinkProps> = ({
   href,
   isExternal,
   children,
   as,
   role,
+  onClick,
   ...props
-}: AccessibleLinkProps) => {
+}) => {
   return (
     <Link href={href} as={as} passHref>
       <ChakraLink
         isExternal={isExternal}
         role={role}
         aria-label={props["aria-label"]}
+        onClick={onClick}
       >
         {children}
       </ChakraLink>

diff --git a/src/components/homepage/Article/Article.tsx b/src/components/homepage/Article/Article.tsx
@@ -8,6 +8,9 @@ import {
   Button,
   Link,
 } from "@chakra-ui/react";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { WEBINAR_LINK } from "constants/paths";
 import ArticleCard from "./ArticleCard";
 
 export default function Article() {
@@ -52,7 +55,7 @@ export default function Article() {
                   Our Latest Articles
                 </Heading>
                 <Link href="https://logosid.xyz" role="link" isExternal>
-                  <Button variant="primary">Visit Our Website</Button>
+                  <Button variant="primary" onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.REGISTER_WEBINAR,{link: WEBINAR_LINK})}>Visit Our Website</Button>
                 </Link>
               </Box>
 

diff --git a/src/components/homepage/Cta.tsx b/src/components/homepage/Cta.tsx
@@ -8,6 +8,9 @@ import {
   Image,
   VStack,
 } from "@chakra-ui/react";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { WEBINAR_LINK } from "constants/paths";
 import AccessibleLink from "../AccessibleLink";
 
 const Cta = () => {
@@ -39,7 +42,7 @@ const Cta = () => {
                   href="https://karyakarsa.com/logos_id"
                   isExternal
                 >
-                  <Button>Support Us</Button>
+                  <Button onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.SUPPORT, {link: WEBINAR_LINK})}>Support Us</Button>
                 </AccessibleLink>
               </VStack>
             </GridItem>

diff --git a/src/components/homepage/FollowUs.tsx b/src/components/homepage/FollowUs.tsx
@@ -1,45 +1,47 @@
-import { VStack, HStack, Heading } from "@chakra-ui/react";
+import { VStack, HStack, Heading, Button } from "@chakra-ui/react";
 import AccessibleLink from "@/components/AccessibleLink";
-import Instagram from "../icons/Instagram";
-import Spotify from "../icons/Spotify";
-import Twitter from "../icons/Twitter";
-import Youtube from "../icons/Youtube";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { SOCIAL_MEDIA } from '../../constants/data';
+import { Instagram, Spotify, Twitter, Youtube} from '../icons/index';
 
 const FollowUs = () => {
+  const renderIcon = (type: string) => {
+    switch (type) {
+      case "instagram":
+       return <Instagram boxSize="64px" color="pink.500" />
+      case "spotify":
+        return  <Spotify boxSize="64px" color="pink.500" />  
+      case "twitter":
+        return <Twitter width="60px" height="64px" color="pink.500" />
+      case "youtube":
+        return <Youtube width="92px" height="64px" color="pink.500" />
+      default:
+        break;
+    }
+  }
+
+  const renderItem = (item:any, index: number) => {
+    return (
+    <AccessibleLink
+      key={index}
+      href={item.link}
+      isExternal
+      aria-label={item.label}
+      onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.EXTERNAL_LINK, {type: item.label, link:item.link})}
+      >
+        {renderIcon(item.label)}
+    </AccessibleLink>
+    );
+  };
+
   return (
     <VStack spacing="64px" as="section" mb="140px" id="sosial-media">
       <Heading variant="h1" as="h1" color="black.primary">
         Follow Us
       </Heading>
       <HStack minW="555px" spacing="111px">
-        <AccessibleLink
-          href="https://instagram.com/_logosid"
-          isExternal
-          aria-label="Instagram"
-        >
-          <Instagram boxSize="64px" color="pink.500" />
-        </AccessibleLink>
-        <AccessibleLink
-          href="https://open.spotify.com/show/2bwe0dyWnFKmqXaYCSwhML?si=VflhXjXRQqCL0VTVTO2_Zw&nd=1"
-          isExternal
-          aria-label="Spotify"
-        >
-          <Spotify boxSize="64px" color="pink.500" />
-        </AccessibleLink>
-        <AccessibleLink
-          href="https://twitter.com/logos_id"
-          isExternal
-          aria-label="Twitter"
-        >
-          <Twitter width="60px" height="64px" color="pink.500" />
-        </AccessibleLink>
-        <AccessibleLink
-          href="https://www.youtube.com/channel/UCh3AnUWH0gaiRi-ibilRj2Q"
-          isExternal
-          aria-label="Youtube"
-        >
-          <Youtube width="92px" height="64px" color="pink.500" />
-        </AccessibleLink>
+        {SOCIAL_MEDIA.map((item, index)=>renderItem(item, index))}
       </HStack>
     </VStack>
   );

diff --git a/src/components/homepage/Hero.tsx b/src/components/homepage/Hero.tsx
@@ -14,6 +14,9 @@ import {
 } from "@chakra-ui/react";
 import Image from "next/image";
 import HeroImage from "@/public/img/hero.png";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { SUPPORT_LINK, WEBINAR_LINK } from "constants/paths";
 
 const SquareIllustrate = (props: any) => {
   return (
@@ -37,6 +40,11 @@ const Hero = () => {
   const variantTitle = useBreakpointValue({ base: "mobile-h1", lg: "h1" });
   const variantSubtitle = useBreakpointValue({ base: "md", lg: "lg" });
 
+  const pressButton = (link: any, type:string) =>{
+    let event = type === 'webinar' ? SPLITBEE_EVENTS_NAME.REGISTER_WEBINAR : SPLITBEE_EVENTS_NAME.SUPPORT_US;
+    splitbee.track(`${event}`, {link})
+  }
+
   return (
     <Box w="full" position="relative" as="section" id="hero">
       <Box
@@ -87,12 +95,13 @@ const Hero = () => {
               Pop Culture, dan Sains.
             </Text>
             <HStack spacing="24px" mt="32px" d={{ base: "none", lg: "flex" }}>
-              <Link isExternal href="https://lynk.id/logos_id">
-                <Button variant="primary" size="md" fontWeight="semibold">
+
+              <Link isExternal href={WEBINAR_LINK}>
+                <Button variant="primary" size="md" fontWeight="semibold" onClick={()=>pressButton(WEBINAR_LINK, 'webinar')}>
                   Daftar Webinar
                 </Button>
               </Link>
-              <Link isExternal href="https://karyakarsa.com/logos_id">
+              <Link isExternal href={SUPPORT_LINK}>
                 <Button
                   variant="outline"
                   borderColor="white"
@@ -103,6 +112,7 @@ const Hero = () => {
                     borderColor: "blue.700",
                     bg: "blue.700",
                   }}
+                  onClick={()=>{pressButton(SUPPORT_LINK, 'support')}}
                 >
                   Support Us
                 </Button>

diff --git a/src/components/homepage/Webinar.tsx b/src/components/homepage/Webinar.tsx
@@ -13,6 +13,9 @@ import {
 } from "@chakra-ui/react";
 import Image from "next/image";
 import ImageWebinar from "@/public/img/image-webinar.png";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { WEBINAR_LINK } from "constants/paths";
 
 export default function Webinar() {
   const variantTitle = useBreakpointValue({ base: "mobile-h3", lg: "h3" });
@@ -22,6 +25,7 @@ export default function Webinar() {
     lg: "lg",
   });
   const variantSizeButton = useBreakpointValue({ base: "xs", sm: "md" });
+
   return (
     <Container mb="20" mt={{ base: "50px", lg: "0" }} as="section" id="webinar">
       <Grid
@@ -68,7 +72,7 @@ export default function Webinar() {
             </Text>
           </VStack>
           <Link href="https://lynk.id/logos_id" role="link" isExternal>
-            <Button variant="primary" size={variantSizeButton}>
+            <Button variant="primary" size={variantSizeButton} onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.REGISTER_WEBINAR, {link: WEBINAR_LINK})}>
               Daftar Webinar
             </Button>
           </Link>

diff --git a/src/components/icons/Instagram.tsx b/src/components/icons/Instagram.tsx
@@ -1,6 +1,6 @@
 import { Icon } from "@chakra-ui/react";
 
-const Instagram = (props: any) => {
+export const Instagram = (props: any) => {
   return (
     <Icon
       viewBox="0 0 64 64"
@@ -20,4 +20,3 @@ const Instagram = (props: any) => {
   );
 };
 
-export default Instagram;
diff --git a/src/components/icons/Spotify.tsx b/src/components/icons/Spotify.tsx
@@ -1,6 +1,6 @@
 import { Icon } from "@chakra-ui/react";
 
-const Spotify = (props: any) => {
+export const Spotify = (props: any) => {
   return (
     <Icon
       viewBox="0 0 64 64"
@@ -16,4 +16,3 @@ const Spotify = (props: any) => {
   );
 };
 
-export default Spotify;
diff --git a/src/components/icons/Twitter.tsx b/src/components/icons/Twitter.tsx
@@ -1,6 +1,6 @@
 import { Icon } from "@chakra-ui/react";
 
-const Twitter = (props: any) => {
+export const Twitter = (props: any) => {
   return (
     <Icon
       viewBox="0 0 62 50"
@@ -16,4 +16,3 @@ const Twitter = (props: any) => {
   );
 };
 
-export default Twitter;
diff --git a/src/components/icons/Youtube.tsx b/src/components/icons/Youtube.tsx
@@ -1,6 +1,6 @@
 import { Icon } from "@chakra-ui/react";
 
-const Youtube = (props: any) => {
+export const Youtube = (props: any) => {
   return (
     <Icon
       viewBox="0 0 92 64"
@@ -16,4 +16,3 @@ const Youtube = (props: any) => {
   );
 };
 
-export default Youtube;
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
@@ -0,0 +1,4 @@
+export { Instagram } from './Instagram';
+export { Spotify } from './Spotify';
+export { Twitter } from './Twitter';
+export { Youtube } from './Youtube';
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -9,6 +9,9 @@ import {
   Button,
   Link,
 } from "@chakra-ui/react";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { LOGOS_LINK, MICROSITE_GITHUB_LINK } from '../../constants/paths';
 
 const Footer = () => {
   return (
@@ -31,8 +34,8 @@ const Footer = () => {
               Please contact us through this button below.
             </Text>
             <HStack spacing="24px" mt="32px">
-              <Link role="link" href="https://logosid.xyz" isExternal>
-                <Button variant="primary">Visit Our Website</Button>
+              <Link role="link" href={LOGOS_LINK} isExternal>
+                <Button onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.ARTICLES_LOGOS, {link: LOGOS_LINK})} variant="primary">Visit Our Website</Button>
               </Link>
             </HStack>
           </GridItem>
@@ -44,9 +47,10 @@ const Footer = () => {
             &copy; 2021. Made with ❤ by
           </Text>
           <Link
-            href="https://github.com/logos-engineer/microsite-logos"
+            href={MICROSITE_GITHUB_LINK}
             isExternal
             role="link"
+            onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.EXTERNAL_LINK, {link: MICROSITE_GITHUB_LINK})}
           >
             <Text variant="lg" color="white">
               Logos Engineer

diff --git a/src/constants/data.ts b/src/constants/data.ts
@@ -0,0 +1,24 @@
+import { INSTAGRAM_LINK, SPOTIFY_LINK, TWITTER_LINK, YOUTUBE_LINK } from "./paths";
+
+export const SOCIAL_MEDIA = [
+    {
+        id: 1,
+        label: 'instagram',
+        link: INSTAGRAM_LINK,
+    },
+    {
+        id: 2,
+        label: 'spotify',
+        link: SPOTIFY_LINK,
+    },
+    {
+        id: 3,
+        label: 'twitter',
+        link: TWITTER_LINK,
+    },
+    {
+        id: 4,
+        label: 'youtube',
+        link: YOUTUBE_LINK,
+    }
+]
diff --git a/src/constants/eventSplitbee.ts b/src/constants/eventSplitbee.ts
@@ -0,0 +1,6 @@
+export const SPLITBEE_EVENTS_NAME: any = {
+    REGISTER_WEBINAR: 'register_webinar',
+    SUPPORT_US: 'support_us',
+    ARTICLES_LOGOS: 'articles_logos_website',
+    EXTERNAL_LINK: 'external_link',
+  };
diff --git a/src/constants/paths.ts b/src/constants/paths.ts
@@ -1,2 +1,11 @@
 export const HOME: string = `https://microsite-logos.vercel.app`;
 export const META_IMAGE: string = `/img/meta-small.png`;
+export const WEBINAR_LINK: any = `https://lynk.id/logos_id`;
+export const SUPPORT_LINK: any = `https://karyakarsa.com/logos_id`;
+export const LOGOS_LINK: any = `https://logosid.xyz`;
+export const MICROSITE_GITHUB_LINK: any = `https://github.com/logos-engineer/microsite-logos`;
+export const INSTAGRAM_LINK: any = `https://instagram.com/_logosid`;
+export const SPOTIFY_LINK: any = `https://open.spotify.com/show/2bwe0dyWnFKmqXaYCSwhML?si=VflhXjXRQqCL0VTVTO2_Zw&nd=1`;
+export const TWITTER_LINK: any = `https://twitter.com/logos_id`;
+export const YOUTUBE_LINK: any = `https://www.youtube.com/channel/UCh3AnUWH0gaiRi-ibilRj2Q`;
+
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+import splitbee from "@splitbee/web";
 import Hero from "@/components/homepage/Hero";
 import Webinar from "@/components/homepage/Webinar";
 import Article from "@/components/homepage/Article/Article";
@@ -6,6 +8,17 @@ import FollowUs from "@/components/homepage/FollowUs";
 import Cta from "@/components/homepage/Cta";
 
 const Home = () => {
+
+  useEffect((): void => {
+    splitbee.init({
+      token: 'M6FJO0PCQR94', 
+      disableCookie: false,
+      scriptUrl: "https://cdn.splitbee.io/sb.js",
+      apiUrl: "https://hive.splitbee.io",
+    })
+
+  }, []);
+
   return (
     <Layout>
       <Hero />