refactor: use gtm triggers

fluidity-money · Sep 13, 2024 · 64a3640 · 64a3640
1 parent a0c95c2
commit 64a3640
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/web/src/components/buttons/donateButton.tsx b/web/src/components/buttons/donateButton.tsx
@@ -13,6 +13,7 @@ import FavedIcon from "#/images/icons/faved.svg";
 import Loader from "../loader";
 import { config } from "@/config";
 import useClickAnimation from "@/hooks/useClickAnimation";
+import { sendGTMEvent } from "@next/third-parties/google";
 
 export default function DonateButton() {
   const account = useActiveAccount();
@@ -28,7 +29,7 @@ export default function DonateButton() {
     if (account) {
       startAnimation();
       incrementDonationClicks(selectedStream.hash);
-      window.gtag("event", "button_click", {
+      sendGTMEvent({
         event_category: "donation",
         event_label: "cat_donation",
         value: config.features.web3.donation.clickUnit,

diff --git a/web/src/components/googleAnalytics.tsx b/web/src/components/googleAnalytics.tsx
@@ -1,6 +1,8 @@
 "use client";
 import Script from "next/script";
 import { GoogleTagManager } from "@next/third-parties/google";
+import { useActiveAccount } from "thirdweb/react";
+import { useEffect } from "react";
 
 export const grantedConsent = {
   ad_storage: "granted",
@@ -20,6 +22,15 @@ export const deniedConsent = {
 
 export default function GoogleAnalytics() {
   const gtmId = "GTM-KWBPC355";
+  const account = useActiveAccount();
+
+  useEffect(() => {
+    if (account?.address) {
+      window.localStorage.setItem("walletAddress", account.address);
+    } else {
+      window.localStorage.removeItem("walletAddress");
+    }
+  }, [account?.address]);
 
   return (
     <>
@@ -36,7 +47,7 @@ export default function GoogleAnalytics() {
 
                 if (localStorage.getItem('userId') != null) {
                   window.dataLayer.push({
-                    'user_id': localStorage.getItem('userId')
+                    'walletAddress': localStorage.getItem('walletAddress')
                 });
         }
                 `}

diff --git a/web/src/stores/userStore.ts b/web/src/stores/userStore.ts
@@ -5,6 +5,7 @@ import { Account } from "thirdweb/wallets";
 import toast from "react-hot-toast";
 import { prepareContractCall, sendTransaction, toUnits } from "thirdweb";
 import { streams } from "@/streams";
+import { sendGTMEvent } from "@next/third-parties/google";
 interface UserStore {
   favs: string[];
   favStream: (streamHash: string) => void;
@@ -130,7 +131,7 @@ export async function handleDonation(id: string, account: Account) {
     });
 
     await sendTransaction({ transaction, account });
-    window.gtag("event", "bg-action", {
+    sendGTMEvent({
       event_category: "donation",
       event_label: "cat_donation_completed",
       value: config.features.web3.donation.clickUnit * donation,
@@ -142,7 +143,7 @@ export async function handleDonation(id: string, account: Account) {
     updateDonationStatus(id, "success");
   } catch (e) {
     updateDonationStatus(id, "error", e);
-    window.gtag("event", "bg-action", {
+    sendGTMEvent({
       event_category: "donation",
       event_label: "cat_donation_failed",
       value: config.features.web3.donation.clickUnit * donation,