diff --git a/package.json b/package.json index e7bdd0cea..881c1e292 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "copy-to-clipboard": "^3.3.1", + "fathom-client": "^3.0.0", "marked": "2.0.3", "next": "10.2.0", "next-seo": "^4.24.0", diff --git a/src/hooks/useFathom.ts b/src/hooks/useFathom.ts new file mode 100644 index 000000000..0d2646da9 --- /dev/null +++ b/src/hooks/useFathom.ts @@ -0,0 +1,31 @@ +import * as Fathom from "fathom-client"; +import { useRouter } from "next/router"; +import { useEffect } from "react"; + +const fathomCode = process.env.NEXT_PUBLIC_FATHOM_CODE; +const siteURL = process.env.NEXT_PUBLIC_SITE_URL; + +export const useFathom = () => { + const router = useRouter(); + + useEffect(() => { + if (!fathomCode || !siteURL) return; + + // Initialize Fathom when the app loads + Fathom.load(fathomCode, { + url: "https://kiwi.railway.app/script.js", + includedDomains: [siteURL], + }); + + const onRouteChangeComplete = () => { + Fathom.trackPageview(); + }; + // Record a pageview when route changes + router.events.on("routeChangeComplete", onRouteChangeComplete); + + // Unassign event listener + return () => { + router.events.off("routeChangeComplete", onRouteChangeComplete); + }; + }, []); +}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index b76ba5a93..0960aeb27 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,8 +3,11 @@ import React from "react"; import { SEO } from "../components/SEO"; import { GlobalStyles } from "../styles/GlobalStyles"; import { TwinGlobalStyles } from "../styles/TwinGlobalStyles"; +import { useFathom } from "../hooks/useFathom"; const MyApp = ({ Component, pageProps }: AppProps) => { + useFathom(); + return ( <> diff --git a/yarn.lock b/yarn.lock index 9fd99de17..598c9625c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1206,6 +1206,11 @@ fastq@^1.6.0: dependencies: reusify "^1.0.4" +fathom-client@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/fathom-client/-/fathom-client-3.0.0.tgz#409c047cf1e2fea45b148e28d50fcd635e992893" + integrity sha512-d0oH2SHWCMIVLbbegB7nBIjSvbqbHrZBZxIOWSVAxlJL/roL0Ah9NNb6rTIcKMlA4gov9AjWQGEcZRzlnGc3XQ== + fd-slicer@~1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"