Add ga events to several actions

src/components/CopyText.tsx

@@ -8,16 +8,19 @@ export type CopyTextProps = HTMLProps<HTMLDivElement> & {
  textToCopy?: string;
  textClassName?: string;
  copyButtonClassName?: string;
+ onCopyButtonClick?: () => void;
 };
 
 export default function CopyText({
  text,
  textToCopy,
  textClassName,
  copyButtonClassName,
+ onCopyButtonClick,
  ...props
 }: CopyTextProps) {
  const onClickCopyToClipboard = () => {
+ onCopyButtonClick?.();
  navigator.clipboard.writeText(textToCopy || text);
  toast.success("Copied to clipboard!");
  };

src/components/EnergyAlert.tsx

@@ -4,14 +4,26 @@ import CopyText from "./CopyText";
 import Link from "./Link";
 import clsx from "clsx";
 import { toSubsocialAddress } from "@subsocial/utils";
+import { useSendGaUserEvent } from "src/utils/ga/events";
 
 export type EnergyAlertProps = AlertProps & {
  address: string;
 };
 
 export default function EnergyAlert({ address, ...props }: EnergyAlertProps) {
+ const sendGaEvent = useSendGaUserEvent();
  if (!address) return null;
 
+ const onClickDiscordLink = () => {
+ sendGaEvent("Click on discord link in energy alert");
+ };
+ const onCopyButtonClick = () => {
+ sendGaEvent("Click on copy energy command button in energy alert");
+ };
+ const onCopy = () => {
+ sendGaEvent("Copy energy command in energy alert");
+ };
+
  return (
  <Alert
  className={clsx("rounded-lg border border-base-yellow bg-light-yellow", props.className)}
@@ -25,11 +37,18 @@ export default function EnergyAlert({ address, ...props }: EnergyAlertProps) {
  <div className="flex flex-col gap-4">
  <div className="flex flex-col gap-2">
  <span>1. Copy the text below.</span>
- <CopyText text={`!energy ${toSubsocialAddress(address)}`} />
+ <CopyText
+ onCopyButtonClick={onCopyButtonClick}
+ onCopy={onCopy}
+ text={`!energy ${toSubsocialAddress(address)}`}
+ />
  </div>
  <div>
  2. Paste the text into the energy-bot channel in our{" "}
- <Link href="https://discord.com/invite/w2Rqy2M" openInNewTab>
+ <Link
+ href="https://discord.com/invite/w2Rqy2M"
+ openInNewTab
+ onClick={onClickDiscordLink}>
  Discord.
  </Link>
  </div>

src/components/SavedTweetsLinks.tsx

@@ -3,21 +3,40 @@ import { useWalletStore } from "src/store";
 import Link from "./Link";
 import clsx from "clsx";
 import { getP4ESpace } from "src/configs/spaces";
+import { useSendGaUserEvent } from "src/utils/ga/events";
 
 export type SavedTweetsLinksProps = HTMLProps<HTMLDivElement>;
 
 const getLinks = (
  address: string,
-): { text: string; href: string; openInNewTab?: boolean; authOnly?: boolean }[] => {
+): {
+ text: string;
+ href: string;
+ openInNewTab?: boolean;
+ authOnly?: boolean;
+ gaEvent?: string;
+}[] => {
  const savedTweetLink = `https://polkaverse.com/accounts/${address}#tweets`;
  const p4eSpaceLink = `https://polkaverse.com/${getP4ESpace()}`;
  return [
- { text: "Twitter Backups", href: p4eSpaceLink, openInNewTab: true },
- { text: "My Saved Tweets", href: savedTweetLink, openInNewTab: true, authOnly: true },
+ {
+ text: "Twitter Backups",
+ href: p4eSpaceLink,
+ openInNewTab: true,
+ gaEvent: "Go to Twitter Backups Space",
+ },
+ {
+ text: "My Saved Tweets",
+ href: savedTweetLink,
+ openInNewTab: true,
+ authOnly: true,
+ gaEvent: "Go to My Saved Tweets",
+ },
  ];
 };
 
 export default function SavedTweetsLinks(props: SavedTweetsLinksProps) {
+ const sendGaEvent = useSendGaUserEvent();
  const { address } = useWalletStore(state => ({
  address: state.account?.address.toString(),
  }));
@@ -26,13 +45,14 @@ export default function SavedTweetsLinks(props: SavedTweetsLinksProps) {
 
  return (
  <div {...props} className={clsx("flex gap-6", props.className)}>
- {linksList.map(({ href, text, openInNewTab }) => {
+ {linksList.map(({ href, text, openInNewTab, gaEvent }) => {
  return (
  <Link
  href={href}
  openInNewTab={openInNewTab}
  withArrowIcon={openInNewTab}
  className="!font-normal text-base-blue"
+ onClick={() => gaEvent && sendGaEvent(gaEvent)}
  key={href}>
  {text}
  </Link>

src/components/Sidebar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Button } from "@material-tailwind/react";
 import { useWalletStore } from "src/store";
 import type { WalletAccount } from "@talismn/connect-wallets";
+import { useSendGaUserEvent } from "src/utils/ga/events";
 
 type SidebarProps = {
  checked: boolean;
@@ -12,15 +13,18 @@ type SidebarProps = {
 };
 
 const Sidebar = ({ accounts, checked, onCheck, onChangeAccount, children }: SidebarProps) => {
+ const sendGaEvent = useSendGaUserEvent();
  const { setAccounts } = useWalletStore(state => ({
  setAccounts: state.setAccounts,
  }));
 
  const handleChangeAccount = (account: WalletAccount | null) => {
+ sendGaEvent(`Change account to ${account?.name}`);
  onChangeAccount(account);
  };
 
  const handleDisconnect = () => {
+ sendGaEvent("Disconnect wallet");
  setAccounts(undefined);
  handleChangeAccount(null);
  };

src/components/cards/FetchTweetCard.tsx

@@ -12,6 +12,7 @@ import TweetBody from "../render/TweetBody";
 import { rootInput } from "styles/common";
 import { BaseTweetProps } from "src/types/common";
 import { urlMatcher } from "src/utils/string";
+import { useSendGaUserEvent } from "src/utils/ga/events";
 
 type FetchTweetCardProps = {
  disabled: boolean;
@@ -22,6 +23,7 @@ const returnRemovedUrlIdx = (firstCondition: boolean, secondCondition: boolean)
  firstCondition && secondCondition ? -2 : -1;
 
 const FetchTweetCard = ({ disabled, onFetchTweet }: FetchTweetCardProps) => {
+ const sendGaEvent = useSendGaUserEvent();
  // const { data: session, status } = useSession();
 
  const [tweetUrl, setTweetUrl] = useState("");
@@ -37,6 +39,7 @@ const FetchTweetCard = ({ disabled, onFetchTweet }: FetchTweetCardProps) => {
  }, [fetchedTweet]);
 
  const handleFetchTweet = async () => {
+ sendGaEvent("Click on find tweet button");
  setLoadingTweet(true);
  setFetchedTweet(null);
 

src/components/cards/SendTweetCard.tsx

@@ -14,6 +14,7 @@ import { rootInput } from "styles/common";
 import EnergyAlert from "components/EnergyAlert";
 import { useMyBalance } from "src/hooks/use-balance";
 import { getP4ESpace } from "src/configs/spaces";
+import { useSendGaUserEvent } from "src/utils/ga/events";
 
 type SendTweetCardProps = {
  disabled: boolean;
@@ -22,6 +23,7 @@ type SendTweetCardProps = {
 };
 
 const SendTweetCard = ({ disabled, fetchedTweet, onSuccess }: SendTweetCardProps) => {
+ const sendGaEvent = useSendGaUserEvent();
  const {
  loadingSpaces,
  loadingCreatePost,
@@ -49,6 +51,7 @@ const SendTweetCard = ({ disabled, fetchedTweet, onSuccess }: SendTweetCardProps
  const handleChangeSpaceId = (value?: React.ReactNode) => {
  const spaceId = value as string;
  if (spaceId) {
+ sendGaEvent(`Change space id to ${spaceId}`);
  setSelectedSpaceId(spaceId);
  }
  };
@@ -61,6 +64,7 @@ const SendTweetCard = ({ disabled, fetchedTweet, onSuccess }: SendTweetCardProps
 
  const handleCreatePostWithSpaceId = () => {
  if (fetchedTweet && account && selectedSpaceId) {
+ sendGaEvent("Click on Publish to Subsocial button");
  createPostWithSpaceId({
  account,
  content: fetchedTweet,

src/components/wallet-connect/ConnectButton.tsx

@@ -1,11 +1,14 @@
 import NewLogoPolkadot from "public/images/NewLogoPolkadot.svg";
+import { useSendGaUserEvent } from "src/utils/ga/events";
 
 type ConnectButtonProps = {
  onConnect: () => void;
 };
 
 const ConnectButton = ({ onConnect }: ConnectButtonProps) => {
+ const sendGaEvent = useSendGaUserEvent();
  const handleConnect = () => {
+ sendGaEvent("Click on connect wallet button");
  onConnect();
  };
 

src/utils/ga/categories.ts

@@ -0,0 +1,8 @@
+const categories = {
+ user: {
+ guest: "Guest",
+ signin: "Signed In User",
+ },
+};
+
+export default categories;

src/utils/ga/events.ts

@@ -0,0 +1,40 @@
+import { event } from "nextjs-google-analytics";
+import categories from "./categories";
+import { useWalletStore } from "src/store";
+import { useCallback } from "react";
+
+type CreateEventProps = {
+ category: string;
+ action: string;
+ userId?: string;
+};
+
+const sendGaEvent = ({ action, category, userId }: CreateEventProps) => {
+ event(action, { category, userId });
+};
+
+export const sendGuestGaEvent = (action: string) =>
+ sendGaEvent({
+ category: categories.user.guest,
+ action,
+ });
+
+export const sendSignedInGaEvent = (action: string, address?: string) =>
+ sendGaEvent({
+ category: categories.user.signin,
+ action,
+ userId: address,
+ });
+
+export const useSendGaUserEvent = () => {
+ const { address } = useWalletStore(state => ({
+ address: state.account?.address,
+ }));
+ const memoizedSignInGaEvent = useCallback(
+ (action: string) => sendSignedInGaEvent(action, address),
+ [address],
+ );
+ const sendGAEvent = address ? memoizedSignInGaEvent : sendGuestGaEvent;
+
+ return sendGAEvent;
+};