Skip to content

Commit 91f41ef

Browse files
luistakluistak
committed
Add google tag pageview and event
1 parent e41ebba commit 91f41ef

File tree

6 files changed

+109
-267
lines changed

6 files changed

+109
-267
lines changed

‎lib/gtag.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export const GA_TRACKING_ID = 'UA-156485505-1';
2+
3+
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
4+
export function pageview(url: string) {
5+
window.gtag('config', GA_TRACKING_ID, {
6+
page_path: url,
7+
});
8+
}
9+
10+
type EventOptions = {
11+
action: string;
12+
category: string;
13+
label: string;
14+
value?: string;
15+
};
16+
17+
// https://developers.google.com/analytics/devguides/collection/gtagjs/events
18+
export function event({ action, category, label, value }: EventOptions) {
19+
window.gtag('event', action, {
20+
event_category: category,
21+
event_label: label,
22+
value: value,
23+
});
24+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"styled-components": "^5.2.1"
2626
},
2727
"devDependencies": {
28+
"@types/gtag.js": "^0.0.3",
2829
"@types/node": "^14.14.6",
2930
"@types/react": "^16.9.55",
3031
"@types/styled-components": "^5.1.4",
@@ -38,4 +39,4 @@
3839
"prettier": "^2.1.2",
3940
"typescript": "^4.1.0-beta"
4041
}
41-
}
42+
}

‎pages/_app.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
import type { AppProps } from 'next/app';
22
import { getTranslate, Translate } from 'i18n';
3+
import { useEffect } from 'react';
4+
import * as gtag from 'lib/gtag';
35

46
type CustomProps = {
57
t: Translate;
68
};
7-
89
function MyApp({ Component, pageProps, router }: AppProps<CustomProps>) {
910
const { locale } = router;
11+
useEffect(() => {
12+
const handleRouteChange = (url: string) => {
13+
gtag.pageview(url);
14+
};
15+
router.events.on('routeChangeComplete', handleRouteChange);
16+
return () => {
17+
router.events.off('routeChangeComplete', handleRouteChange);
18+
};
19+
}, [router.events]);
1020

1121
return <Component {...pageProps} t={getTranslate(locale)} />;
1222
}

‎pages/_document.tsx‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import Document from 'next/document';
21
import { ServerStyleSheet } from 'styled-components';
2+
import Document, { Html, Head, Main, NextScript } from 'next/document';
3+
import { GA_TRACKING_ID } from 'lib/gtag';
34

45
export default class MyDocument extends Document {
56
static async getInitialProps(ctx) {
@@ -27,4 +28,33 @@ export default class MyDocument extends Document {
2728
sheet.seal();
2829
}
2930
}
31+
32+
render() {
33+
return (
34+
<Html>
35+
<Head>
36+
<script
37+
async
38+
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
39+
/>
40+
<script
41+
dangerouslySetInnerHTML={{
42+
__html: `
43+
window.dataLayer = window.dataLayer || [];
44+
function gtag(){dataLayer.push(arguments);}
45+
gtag('js', new Date());
46+
gtag('config', '${GA_TRACKING_ID}', {
47+
page_path: window.location.pathname,
48+
});
49+
`,
50+
}}
51+
/>
52+
</Head>
53+
<body>
54+
<Main />
55+
<NextScript />
56+
</body>
57+
</Html>
58+
);
59+
}
3060
}

‎pages/index.tsx‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { Translate } from 'i18n';
44
import { PageTemplate } from 'components/template';
55
import styled from 'styled-components';
66

7+
import * as gtag from 'lib/gtag';
8+
79
const Image = styled(NextImage)`
810
border-radius: 50%;
911
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.5);
@@ -43,6 +45,20 @@ const socialMedias = {
4345
link: 'https://linkedin.com/in/luis-takahashi',
4446
},
4547
};
48+
type SocialMedia = {
49+
alt: string;
50+
src: string;
51+
link: string;
52+
};
53+
type SocialMediaKey = keyof typeof socialMedias;
54+
55+
const handleSocialMediaClick = (socialMedia: SocialMediaKey) => () => {
56+
gtag.event({
57+
action: 'social_click',
58+
category: 'Social media',
59+
label: socialMedia,
60+
});
61+
};
4662

4763
type HomeProps = {
4864
t: Translate;
@@ -59,16 +75,19 @@ const Home: NextPage<HomeProps> = ({ t }) => (
5975
style={{ margin: 'auto' }}
6076
/>
6177
<ImageContainer>
62-
{Object.entries(socialMedias).map(([socialMedia, { alt, src, link }]) => (
63-
<a
64-
key={socialMedia}
65-
href={link}
66-
target="_blank"
67-
rel="noreferrer noreferrer"
68-
>
69-
<img src={src} alt={alt} width={20} height={20} />
70-
</a>
71-
))}
78+
{Object.entries(socialMedias).map(
79+
([socialMedia, { alt, src, link }]: [SocialMediaKey, SocialMedia]) => (
80+
<a
81+
key={socialMedia}
82+
href={link}
83+
target="_blank"
84+
rel="noreferrer noreferrer"
85+
onClick={handleSocialMediaClick(socialMedia)}
86+
>
87+
<img src={src} alt={alt} width={20} height={20} />
88+
</a>
89+
)
90+
)}
7291
</ImageContainer>
7392
</PageTemplate>
7493
);

0 commit comments

Comments
 (0)