diff --git a/web/src/components/buttons/donateButton.tsx b/web/src/components/buttons/donateButton.tsx index b70aae9..7e43ef6 100644 --- 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 index f8b0820..71c25d8 100644 --- 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 index 209e984..d1580eb 100644 --- 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,