Skip to content

Commit 298c4f1

Browse files
author
Maulida Nuzulia
committed
feat: add log analytics
1 parent 23b17ba commit 298c4f1

19 files changed

Lines changed: 7958 additions & 52 deletions

‎next-env.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/types/global" />
33
/// <reference types="next/image-types/global" />
4+
5+
// NOTE: This file should not be edited
6+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@emotion/styled": "^11.3.0",
1919
"@fontsource/lexend": "^4.4.5",
2020
"@fontsource/poppins": "^4.5.0",
21+
"@splitbee/web": "^0.2.4",
2122
"framer-motion": "^4.1.17",
2223
"next": "^11.0.0",
2324
"next-pwa": "^5.2.21",

‎src/components/AccessibleLink.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,22 @@ import Link, { LinkProps } from "next/link";
66

77
type AccessibleLinkProps = LinkProps & ChakraLinkProps;
88

9-
const AccessibleLink = ({
9+
const AccessibleLink:React.FC<AccessibleLinkProps> = ({
1010
href,
1111
isExternal,
1212
children,
1313
as,
1414
role,
15+
onClick,
1516
...props
16-
}: AccessibleLinkProps) => {
17+
}) => {
1718
return (
1819
<Link href={href} as={as} passHref>
1920
<ChakraLink
2021
isExternal={isExternal}
2122
role={role}
2223
aria-label={props["aria-label"]}
24+
onClick={onClick}
2325
>
2426
{children}
2527
</ChakraLink>

‎src/components/homepage/Article/Article.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import {
88
Button,
99
Link,
1010
} from "@chakra-ui/react";
11+
import splitbee from "@splitbee/web";
12+
import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
13+
import { WEBINAR_LINK } from "constants/paths";
1114
import ArticleCard from "./ArticleCard";
1215

1316
export default function Article() {
@@ -52,7 +55,7 @@ export default function Article() {
5255
Our Latest Articles
5356
</Heading>
5457
<Link href="https://logosid.xyz" role="link" isExternal>
55-
<Button variant="primary">Visit Our Website</Button>
58+
<Button variant="primary" onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.REGISTER_WEBINAR,{link: WEBINAR_LINK})}>Visit Our Website</Button>
5659
</Link>
5760
</Box>
5861

‎src/components/homepage/Cta.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import {
88
Image,
99
VStack,
1010
} from "@chakra-ui/react";
11+
import splitbee from "@splitbee/web";
12+
import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
13+
import { WEBINAR_LINK } from "constants/paths";
1114
import AccessibleLink from "../AccessibleLink";
1215

1316
const Cta = () => {
@@ -39,7 +42,7 @@ const Cta = () => {
3942
href="https://karyakarsa.com/logos_id"
4043
isExternal
4144
>
42-
<Button>Support Us</Button>
45+
<Button onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.SUPPORT, {link: WEBINAR_LINK})}>Support Us</Button>
4346
</AccessibleLink>
4447
</VStack>
4548
</GridItem>

‎src/components/homepage/FollowUs.tsx‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
1-
import { VStack, HStack, Heading } from "@chakra-ui/react";
1+
import { VStack, HStack, Heading, Button } from "@chakra-ui/react";
22
import AccessibleLink from "@/components/AccessibleLink";
3-
import Instagram from "../icons/Instagram";
4-
import Spotify from "../icons/Spotify";
5-
import Twitter from "../icons/Twitter";
6-
import Youtube from "../icons/Youtube";
3+
import splitbee from "@splitbee/web";
4+
import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
5+
import { SOCIAL_MEDIA } from '../../constants/data';
6+
import { Instagram, Spotify, Twitter, Youtube} from '../icons/index';
77

88
const FollowUs = () => {
9+
const renderIcon = (type: string) => {
10+
switch (type) {
11+
case "instagram":
12+
return <Instagram boxSize="64px" color="pink.500" />
13+
case "spotify":
14+
return <Spotify boxSize="64px" color="pink.500" />
15+
case "twitter":
16+
return <Twitter width="60px" height="64px" color="pink.500" />
17+
case "youtube":
18+
return <Youtube width="92px" height="64px" color="pink.500" />
19+
default:
20+
break;
21+
}
22+
}
23+
24+
const renderItem = (item:any, index: number) => {
25+
return (
26+
<AccessibleLink
27+
key={index}
28+
href={item.link}
29+
isExternal
30+
aria-label={item.label}
31+
onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.EXTERNAL_LINK, {type: item.label, link:item.link})}
32+
>
33+
{renderIcon(item.label)}
34+
</AccessibleLink>
35+
);
36+
};
37+
938
return (
1039
<VStack spacing="64px" as="section" mb="140px" id="sosial-media">
1140
<Heading variant="h1" as="h1" color="black.primary">
1241
Follow Us
1342
</Heading>
1443
<HStack minW="555px" spacing="111px">
15-
<AccessibleLink
16-
href="https://instagram.com/_logosid"
17-
isExternal
18-
aria-label="Instagram"
19-
>
20-
<Instagram boxSize="64px" color="pink.500" />
21-
</AccessibleLink>
22-
<AccessibleLink
23-
href="https://open.spotify.com/show/2bwe0dyWnFKmqXaYCSwhML?si=VflhXjXRQqCL0VTVTO2_Zw&nd=1"
24-
isExternal
25-
aria-label="Spotify"
26-
>
27-
<Spotify boxSize="64px" color="pink.500" />
28-
</AccessibleLink>
29-
<AccessibleLink
30-
href="https://twitter.com/logos_id"
31-
isExternal
32-
aria-label="Twitter"
33-
>
34-
<Twitter width="60px" height="64px" color="pink.500" />
35-
</AccessibleLink>
36-
<AccessibleLink
37-
href="https://www.youtube.com/channel/UCh3AnUWH0gaiRi-ibilRj2Q"
38-
isExternal
39-
aria-label="Youtube"
40-
>
41-
<Youtube width="92px" height="64px" color="pink.500" />
42-
</AccessibleLink>
44+
{SOCIAL_MEDIA.map((item, index)=>renderItem(item, index))}
4345
</HStack>
4446
</VStack>
4547
);

‎src/components/homepage/Hero.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ import {
1414
} from "@chakra-ui/react";
1515
import Image from "next/image";
1616
import HeroImage from "@/public/img/hero.png";
17+
import splitbee from "@splitbee/web";
18+
import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
19+
import { SUPPORT_LINK, WEBINAR_LINK } from "constants/paths";
1720

1821
const SquareIllustrate = (props: any) => {
1922
return (
@@ -37,6 +40,11 @@ const Hero = () => {
3740
const variantTitle = useBreakpointValue({ base: "mobile-h1", lg: "h1" });
3841
const variantSubtitle = useBreakpointValue({ base: "md", lg: "lg" });
3942

43+
const pressButton = (link: any, type:string) =>{
44+
let event = type === 'webinar' ? SPLITBEE_EVENTS_NAME.REGISTER_WEBINAR : SPLITBEE_EVENTS_NAME.SUPPORT_US;
45+
splitbee.track(`${event}`, {link})
46+
}
47+
4048
return (
4149
<Box w="full" position="relative" as="section" id="hero">
4250
<Box
@@ -87,12 +95,13 @@ const Hero = () => {
8795
Pop Culture, dan Sains.
8896
</Text>
8997
<HStack spacing="24px" mt="32px" d={{ base: "none", lg: "flex" }}>
90-
<Link isExternal href="https://lynk.id/logos_id">
91-
<Button variant="primary" size="md" fontWeight="semibold">
98+
99+
<Link isExternal href={WEBINAR_LINK}>
100+
<Button variant="primary" size="md" fontWeight="semibold" onClick={()=>pressButton(WEBINAR_LINK, 'webinar')}>
92101
Daftar Webinar
93102
</Button>
94103
</Link>
95-
<Link isExternal href="https://karyakarsa.com/logos_id">
104+
<Link isExternal href={SUPPORT_LINK}>
96105
<Button
97106
variant="outline"
98107
borderColor="white"
@@ -103,6 +112,7 @@ const Hero = () => {
103112
borderColor: "blue.700",
104113
bg: "blue.700",
105114
}}
115+
onClick={()=>{pressButton(SUPPORT_LINK, 'support')}}
106116
>
107117
Support Us
108118
</Button>

‎src/components/homepage/Webinar.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import {
1313
} from "@chakra-ui/react";
1414
import Image from "next/image";
1515
import ImageWebinar from "@/public/img/image-webinar.png";
16+
import splitbee from "@splitbee/web";
17+
import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
18+
import { WEBINAR_LINK } from "constants/paths";
1619

1720
export default function Webinar() {
1821
const variantTitle = useBreakpointValue({ base: "mobile-h3", lg: "h3" });
@@ -22,6 +25,7 @@ export default function Webinar() {
2225
lg: "lg",
2326
});
2427
const variantSizeButton = useBreakpointValue({ base: "xs", sm: "md" });
28+
2529
return (
2630
<Container mb="20" mt={{ base: "50px", lg: "0" }} as="section" id="webinar">
2731
<Grid
@@ -68,7 +72,7 @@ export default function Webinar() {
6872
</Text>
6973
</VStack>
7074
<Link href="https://lynk.id/logos_id" role="link" isExternal>
71-
<Button variant="primary" size={variantSizeButton}>
75+
<Button variant="primary" size={variantSizeButton} onClick={()=> splitbee.track(SPLITBEE_EVENTS_NAME.REGISTER_WEBINAR, {link: WEBINAR_LINK})}>
7276
Daftar Webinar
7377
</Button>
7478
</Link>

‎src/components/icons/Instagram.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Icon } from "@chakra-ui/react";
22

3-
const Instagram = (props: any) => {
3+
export const Instagram = (props: any) => {
44
return (
55
<Icon
66
viewBox="0 0 64 64"
@@ -20,4 +20,3 @@ const Instagram = (props: any) => {
2020
);
2121
};
2222

23-
export default Instagram;

‎src/components/icons/Spotify.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Icon } from "@chakra-ui/react";
22

3-
const Spotify = (props: any) => {
3+
export const Spotify = (props: any) => {
44
return (
55
<Icon
66
viewBox="0 0 64 64"
@@ -16,4 +16,3 @@ const Spotify = (props: any) => {
1616
);
1717
};
1818

19-
export default Spotify;

0 commit comments

Comments
 (0)