feat: add google tags for relevant pages

wondrous-bot-admin/src/components/GoogleTag/PostBodyGoogleTag.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+
+const PostBodyGoogleTag = () => {
+  const [domReady, setDomReady] = useState(false);
+  useEffect(() => {
+    setDomReady(true);
+    // Create a div to be the portal target
+    const target = document.createElement("div");
+    target.id = "gtm-noscript-container";
+    document.body.appendChild(target);
+
+    return () => {
+      // Cleanup - remove the target element when the component unmounts or the page changes
+      if (document.body.contains(target)) {
+        document.body.removeChild(target);
+      }
+    };
+  }, []);
+  return domReady
+    ? ReactDOM.createPortal(
+        <>
+          {/* Google Tag Manager (noscript) */}
+          <noscript>
+            <iframe
+              src="https://www.googletagmanager.com/ns.html?id=GTM-W3DT4LQ8"
+              height="0"
+              width="0"
+              style={{ display: "none", visibility: "hidden" }}
+            ></iframe>
+          </noscript>
+          {/* End Google Tag Manager (noscript) */}
+        </>,
+        document.getElementById("gtm-noscript-container")
+      )
+    : null;
+};
+
+export default PostBodyGoogleTag;

wondrous-bot-admin/src/components/GoogleTag/PostHeaderGoogleTag.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+
+const PostHeaderGoogleTag = () => {
+  useEffect(() => {
+    // Define the script content
+    const scriptContent = `(function(w,d,s,l,i){
+      w[l]=w[l]||[];
+      w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
+      var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
+      j.async=true;
+      j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
+      f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-W3DT4LQ8');`;
+
+    // Create script element
+    const script = document.createElement("script");
+    script.textContent = scriptContent;
+
+    // Append the script to the document
+    document.head.appendChild(script);
+
+    // Clean up function to remove the script when the component unmounts
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, []);
+
+  // Return nothing as it doesn't render anything
+  return null;
+};
+
+export default PostHeaderGoogleTag;

wondrous-bot-admin/src/components/Onboarding/FinalizeComponent/index.tsx

@@ -1,4 +1,6 @@
 import { Box } from "@mui/material";
+import PostBodyGoogleTag from "components/GoogleTag/PostBodyGoogleTag";
+import PostHeaderGoogleTag from "components/GoogleTag/PostHeaderGoogleTag";
 import { SignupAuthLayout } from "components/Shared/AuthLayout";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
@@ -15,6 +17,8 @@ const OnboardingFinalizeComponent = () => {
 
   return (
     <SignupAuthLayout>
+      <PostHeaderGoogleTag />
+      <PostBodyGoogleTag />
       <Box display="flex" justifyContent="center" alignItems="center" height="100%" width="100%">
         <video
           src="/signup-loading.webm"

wondrous-bot-admin/src/components/Onboarding/PlanSelect/index.tsx

@@ -7,6 +7,8 @@ import { PricingOptionsTitle } from "components/Pricing/PricingOptionsListItem";
 import { useLazyQuery } from "@apollo/client";
 import { GET_CHECKOUT_LINK } from "graphql/queries/subscription";
 import useAlerts, { useGlobalContext } from "utils/hooks";
+import PostHeaderGoogleTag from "components/GoogleTag/PostHeaderGoogleTag";
+import PostBodyGoogleTag from "components/GoogleTag/PostBodyGoogleTag";
 
 const PlanSelectComponent = () => {
   const { setSnackbarAlertOpen, setSnackbarAlertMessage, setSnackbarAlertAutoHideDuration } = useAlerts();
@@ -75,6 +77,8 @@ const PlanSelectComponent = () => {
 
   return (
     <SignupAuthLayout>
+      <PostHeaderGoogleTag />
+      <PostBodyGoogleTag />
       <Grid
         display="flex"
         flexDirection="column"

wondrous-bot-admin/src/components/Onboarding/index.tsx

@@ -11,6 +11,8 @@ import GoogleTag from "components/GoogleTag";
 import Modal from "components/Shared/Modal";
 import { getBaseUrl } from "utils/common";
 import useAlerts from "utils/hooks";
+import PostHeaderGoogleTag from "components/GoogleTag/PostHeaderGoogleTag";
+import PostBodyGoogleTag from "components/GoogleTag/PostBodyGoogleTag";
 
 const DiscordClientID = import.meta.env.VITE_DISCORD_CLIENT_ID;
 
@@ -116,7 +118,8 @@ const OnboardingComponent = () => {
     <SignupAuthLayout>
       <MetaPixel />
       <GoogleTag />
-
+      <PostHeaderGoogleTag />
+      <PostBodyGoogleTag />
       <Modal noHeader open {...(isMobile ? {} : { maxWidth: 600 })}>
         <Box display="flex" flexDirection="column" gap="42px">
           <Box display="flex" gap="18px" flexDirection="column" justifyContent="center" alignItems="center">

wondrous-bot-admin/src/components/SignupComponent/index.tsx

@@ -6,6 +6,8 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import { handleUserOnboardingRedirect } from "utils/common";
 import CollectCredentials from "./CollectCredentials";
 import MetaPixel from "components/MetaPixel";
+import PostHeaderGoogleTag from "components/GoogleTag/PostHeaderGoogleTag";
+import PostBodyGoogleTag from "components/GoogleTag/PostBodyGoogleTag";
 
 const SignupComponent = () => {
   const navigate = useNavigate();
@@ -28,6 +30,8 @@ const SignupComponent = () => {
 
   return (
     <SignupAuthLayout>
+      <PostHeaderGoogleTag />
+      <PostBodyGoogleTag />
       <MetaPixel />
       <Box display="flex" justifyContent="center" alignItems="center" height="100%" width="60%" flex="1">
         <Box display="flex" justifyContent="center" alignItems="center" padding="20px">

wondrous-bot-admin/src/pages/home.tsx

@@ -19,6 +19,8 @@ import { getPlan } from "utils/common";
 import GoogleTag from "components/GoogleTag";
 import HomeTutorial from "components/TutorialComponent/Tutorials/HomeTutorial";
 import { TourDataContext } from "utils/context";
+import PostHeaderGoogleTag from "components/GoogleTag/PostHeaderGoogleTag";
+import PostBodyGoogleTag from "components/GoogleTag/PostBodyGoogleTag";
 
 const typographyStyles = {
   fontFamily: "Poppins",
@@ -238,7 +240,8 @@ const HomePage = () => {
       {isTelegramOrDiscordConnected ? <HomeTutorial /> : null}
       <Grid display="flex" flexDirection="column" height="100%" minHeight="100vh" gap="24px">
         <GoogleTag />
-
+        <PostHeaderGoogleTag />
+        <PostBodyGoogleTag />
         <AddBotModal open={shouldDisplayAddModal} onClose={handleOnBotModalClose} />
         <ConfigureNotificationsOnboardingModal
           open={openDiscordNotificationModal}