Merge pull request #6 from thebinaryfelix/refactor/update-ga-events

Refactor/update GA events
thebinaryfelix · Mar 23, 2024 · 26bb9e6 · 26bb9e6
2 parents d61c858 + fffef9c
commit 26bb9e6
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.5.4",
-    "@next/third-parties": "^14.1.4",
+    "@next/third-parties": "^14.2.0-canary.34",
     "clipboard": "^2.0.11",
     "negotiator": "^0.6.3",
     "next": "14.1.3",

diff --git a/src/client/components/atoms/CopyEmailButton/CopyEmailButton.tsx b/src/client/components/atoms/CopyEmailButton/CopyEmailButton.tsx
@@ -21,8 +21,7 @@ export const CopyEmailButton = ({
     const clipboard = new Clipboard(".copy-email-button");
     clipboard.on("success", () => {
       setShowSuccess(true);
-      sendGAEvent({
-        event: "copyEmailButton",
+      sendGAEvent("event", "copy_email", {
         page: "home",
         action: "clipboard",
         value: "success",
@@ -45,11 +44,9 @@ export const CopyEmailButton = ({
       <Button
         data-clipboard-text={CONTACT_EMAIL}
         onClick={() =>
-          sendGAEvent({
-            event: "copyEmailButton",
+          sendGAEvent("event", "contact_button", {
             page: "home",
             action: "onClick",
-            value: "clicked",
           })
         }
         className="copy-email-button w-full h-[40px] rounded-xl bg-button-light dark:bg-button-dark mt-4 text-sm text-text-light dark:text-text-dark"
@@ -59,9 +56,8 @@ export const CopyEmailButton = ({
 
       <div className="relative">
         <span
-          className={`w-24 flex justify-center text-emerald-600 dark:text-emerald-400 text-xs absolute top-1 right-0 ${
-            showSuccess ? "" : "hidden"
-          }`}
+          className={`w-24 flex justify-center text-emerald-600 dark:text-emerald-400 text-xs absolute top-1 right-0 ${showSuccess ? "" : "hidden"
+            }`}
         >
           {successFeedback}
         </span>

diff --git a/src/client/components/atoms/SkillCard/SkillCard.tsx b/src/client/components/atoms/SkillCard/SkillCard.tsx
@@ -44,8 +44,7 @@ export const SkillCard = ({ Icon, tags, title }: SkillCardProps) => {
 
   const handleToggleRotate = () => {
     setRotateCard((state) => !state);
-    sendGAEvent({
-      event: "toggleRotateSkillCard",
+    sendGAEvent("event", "rotate_skill_card", {
       page: "home",
       action: `click:${title}`,
       value: `rotate-${rotateCard ? "back" : "front"}`,

diff --git a/src/client/components/atoms/ToggleThemeButton/ToggleThemeButton.tsx b/src/client/components/atoms/ToggleThemeButton/ToggleThemeButton.tsx
@@ -16,7 +16,7 @@ export const ToggleThemeButton = ({ dictionary }: TranslationProps) => {
 
   const handleToggleTheme = () => {
     const newTheme = isDark ? "light" : "dark";
-    sendGAEvent({ event: "toggle_theme", theme: newTheme });
+    sendGAEvent("event", "toggle_theme", { theme: newTheme });
     setTheme(newTheme);
   };
 
@@ -28,9 +28,8 @@ export const ToggleThemeButton = ({ dictionary }: TranslationProps) => {
     return null;
   }
 
-  const buttonLabel = `${dictionary.theme.toggle} ${
-    dictionary.theme[isDark ? "light" : "dark"]
-  }`;
+  const buttonLabel = `${dictionary.theme.toggle} ${dictionary.theme[isDark ? "light" : "dark"]
+    }`;
 
   return (
     <button