Merge pull request #61 from Nexters/feat/gtm

Feat/gtm

package.json

@@ -13,6 +13,7 @@
     "@headlessui/react": "^1.7.18",
     "@headlessui/tailwindcss": "^0.2.0",
     "@lukemorales/query-key-factory": "^1.3.2",
+    "@next/third-parties": "^14.2.2",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
@@ -25,7 +26,7 @@
     "clsx": "^2.1.0",
     "eslint-plugin-tailwindcss": "^3.13.1",
     "lucide-react": "^0.312.0",
-    "next": "14.0.4",
+    "next": "14.2.2",
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",

src/app/(landing)/_components/floating-footer.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/common/button/button";
+import { sendGAEvent } from "@next/third-parties/google";
 import { useRouter } from "next/navigation";
 import React from "react";
 
@@ -9,6 +10,10 @@ const FloatingFooter = React.memo(() => {
 
   const onButtonClick = React.useCallback(() => {
     router.push("/ticker");
+    sendGAEvent({
+      event: "buttonClicked",
+      value: "Landing Page",
+    });
   }, [router]);
 
   return (

src/app/global-provider.tsx

@@ -1,11 +1,11 @@
 "use client";
 
+import { GoogleAnalytics } from "@next/third-parties/google";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { hotjar } from 'react-hotjar';
+import { hotjar } from "react-hotjar";
 import axios, { AxiosError, AxiosResponse } from "axios";
 import React from "react";
-import GAProvider from "./ga-provider";
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -34,18 +34,19 @@ export const GlobalProvider = ({ children }: { children: React.ReactNode }) => {
   const [client] = React.useState(() => new QueryClient());
 
   React.useEffect(() => {
-    if (process.env.NODE_ENV !== 'development') {
+    if (process.env.NODE_ENV !== "development") {
       hotjar.initialize({
         id: HJID,
-        sv: HJSV
+        sv: HJSV,
       });
     }
   }, []);
 
   return (
     <QueryClientProvider client={client}>
       {children}
-      <GAProvider/>
+      {/* <GAProvider /> */}
+      <GoogleAnalytics gaId="G-K20DRKXNTC" />
       <ReactQueryDevtools />
     </QueryClientProvider>
   );

src/utils/gtag.js

@@ -0,0 +1,23 @@
+export const GA_TRACKING_ID = "G-K20DRKXNTC";
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url) => {
+  if (typeof window !== "undefined") {
+    console.log(url);
+    window.gtag("config", GA_TRACKING_ID, {
+      page_path: url,
+    });
+  }
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }) => {
+  if (typeof window !== "undefined") {
+    console.log(action, category, label, value)
+    window.gtag("event", action, {
+      event_category: category,
+      event_label: label,
+      value: value,
+    });
+  }
+};