🚀 Release/1.2.0

README.md

@@ -17,6 +17,7 @@ npm run start
 
 - TypeScript 적용
 - 검색엔진 최적화(SEO)
+- 구글 애널리틱스 적용(GA)
 - 다국어 지원을 위해 i18next 사용
 - react-awesome-reveal 라이브러리를 이용하여 스크롤 애니메이션 적용
 - 반응형 웹 지원

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "urlink-homepage",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"private": true,
 	"dependencies": {
 		"@emotion/react": "^11.4.1",
@@ -18,6 +18,7 @@
 		"react": "^17.0.2",
 		"react-awesome-reveal": "^3.7.1",
 		"react-dom": "^17.0.2",
+		"react-ga": "^3.3.0",
 		"react-i18next": "^11.8.5",
 		"react-router-dom": "^5.2.0",
 		"react-scripts": "4.0.3",
@@ -58,5 +59,5 @@
 		"eslint-plugin-react-hooks": "^4.2.0",
 		"prettier": "^2.3.2"
 	},
-	"homepage": "."
+	"homepage": "/"
 }

public/index.html

@@ -4,7 +4,7 @@
 		<title>유어링크 urLink</title>
 
 		<meta charset="utf-8" />
-		<link rel="icon" href="https://urlink-official.com/client/favicon.ico" />
+		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<meta name="theme-color" content="#000000">
 		<meta name="description" content="내게 도움이 되는 웹사이트, 저장은 했는데 다시 읽지 않으시나요? 유어링크가 발견한 웹사이트와 방문기록을, 쉽게 정리하고 다시 읽게 도와드릴게요.">

src/components/Footer/index.tsx

@@ -1,3 +1,4 @@
+import ReactGA from 'react-ga'
 import { withTranslation, WithTranslation } from 'react-i18next'
 
 import IconNotion from '../../assets/img/png/icon_notion.png'
@@ -6,25 +7,50 @@ import Contents from '../../locales/ko/translation.json'
 import { FooterSection, SideCotentsWrapper, LeftSide, RightSide } from './styles'
 
 const Footer: React.FC<WithTranslation> = ({ t: translate }) => {
+  const handleClickTermsOfServiceTracking = () => {
+    ReactGA.event({
+      category: 'landing page',
+      action: 'go terms of service page',
+      label: 'terms of service link clicked',
+    })
+  }
+  const handleClickMailTracking = () => {
+    ReactGA.event({
+      category: 'landing page',
+      action: 'click to send mail',
+      label: 'send mail btn clicked',
+    })
+  }
+  const handleClickUrlinkNotionTracking = () => {
+    ReactGA.event({
+      category: 'landing page',
+      action: 'go Ulink notion page',
+      label: 'Urlink notion page link clicked',
+    })
+  }
   return (
     <>
       <FooterSection>
         <Container>
           <SideCotentsWrapper>
             <LeftSide>
               <a
+                onClick={handleClickTermsOfServiceTracking}
                 href="https://www.notion.so/vvidstudio/858782886bc643da8831688192c642a9"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 {translate(Contents.footerSection.text[1])}
               </a>
-              <a href="mailto:[email protected]">{translate(Contents.footerSection.text[2])}</a>
+              <a onClick={handleClickMailTracking} href="mailto:[email protected]">
+                {translate(Contents.footerSection.text[2])}
+              </a>
               <span>{translate(Contents.footerSection.text[0])}</span>
             </LeftSide>
 
             <RightSide>
               <a
+                onClick={handleClickUrlinkNotionTracking}
                 href="https://www.notion.so/vvidstudio/c936d72ea9a2415ea8ca5395d8d8cf22"
                 target="_blank"
                 rel="noopener noreferrer"

src/components/GetStartedLink/index.tsx

@@ -1,3 +1,5 @@
+import ReactGA from 'react-ga'
+
 import ImageLogo from '../../assets/img/png/logo28.png'
 import getLocalStorageItem from '../../utils/getLocalStorageItem'
 /* eslint-disable import/no-cycle */
@@ -21,11 +23,19 @@ export const GetStartedLink: React.FC<IProps> = ({
   children,
   logo,
 }) => {
+  const handleClickLinkTracking = () => {
+    ReactGA.event({
+      category: 'landing page',
+      action: 'go Urlink Chrome Extension',
+      label: 'GetStartedLink btn clicked',
+    })
+  }
   const selectedLanguage = getLocalStorageItem('i18nextLng')
   const URL = `https://chrome.google.com/webstore/detail/urlink/eimpopfllbjbhgkgomhhpolhlpaapdai?hl=${selectedLanguage}`
 
   return (
     <StyledLink
+      onClick={handleClickLinkTracking}
       size={size}
       color={color}
       backgroundColor={backgroundColor}

src/components/Header/index.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
 import { Row } from 'antd'
 import clsx from 'clsx'
 import i18n from 'i18next'
+import ReactGA from 'react-ga'
 import { withTranslation, WithTranslation } from 'react-i18next'
 
 import ImageLogo from '../../assets/img/png/logo_full.png'
@@ -29,6 +30,11 @@ const Header: React.FC<WithTranslation> = ({ t }) => {
   const handleChange = (language: Language) => {
     setCurrentLanguage(language)
     i18n.changeLanguage(language)
+    ReactGA.event({
+      category: 'landing page',
+      action: 'change language',
+      label: 'current language btn clicked',
+    })
   }
 
   useEffect(() => {

src/components/ScrollToTop/index.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
 
+import ReactGA from 'react-ga'
+
 import IconScrollTop from '../../assets/img/svg/scroll-top.svg'
 import getScroll from '../../utils/getScroll'
 import { ScrollUpContainer } from './styles'
@@ -22,6 +24,11 @@ const ScrollToTop = () => {
       top: 0,
       behavior: 'smooth',
     })
+    ReactGA.event({
+      category: 'landing page',
+      action: 'scroll up',
+      label: 'scroll up btn clicked',
+    })
   }
 
   useEffect(() => {

src/index.tsx

@@ -1,11 +1,15 @@
 import ReactDOM from 'react-dom'
+import ReactGA from 'react-ga'
 import { I18nextProvider } from 'react-i18next'
 import { BrowserRouter } from 'react-router-dom'
 import 'antd/dist/antd.css'
 
 import Router from './router'
 import i18n from './translation'
 
+ReactGA.initialize('UA-207149982-1')
+ReactGA.pageview(window.location.pathname + window.location.search)
+
 const App = () => (
   <BrowserRouter>
     <I18nextProvider i18n={i18n}>