add conversion code not need to deploy server

container/Home/AreasofExpertise.js

@@ -67,7 +67,7 @@ const areasofExpertise = [
 ];
 
 const AreasofExpertise = ({Areas}) => {
-  console.log(Areas, "areas");
+  // console.log(Areas, "areas");
   return (
     <>
       <div className="areas-of-expertise pt-100 pb-70 bglight">

container/Home/FunctionalAreas.js

@@ -63,7 +63,7 @@ const services = [
 ];
 
 const FunctionalAreas = ({functionarea}) => {
-  console.log(functionarea ,"functionarea")
+  // console.log(functionarea ,"functionarea")
   return (
     <>
       <div className="functional-areas pt-100 pb-70">

package-lock.json

@@ -21,6 +21,8 @@
         "react-accessible-accordion": "^5.0.0",
         "react-bootstrap": "^2.10.4",
         "react-dom": "^18.3.1",
+        "react-facebook-pixel": "^1.0.4",
+        "react-gtm-module": "^2.0.11",
         "react-hook-form": "^7.53.0",
         "react-js-pagination": "^3.0.3",
         "react-paginate": "^8.2.0",
@@ -3470,6 +3472,16 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-facebook-pixel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-facebook-pixel/-/react-facebook-pixel-1.0.4.tgz",
+      "integrity": "sha512-givZY8MS0v/mdbRzvcvouBo/j0TtDiu/93f4gIjJXwDDgwlf6bYUiQvb2qcqjluOOD/hIKUQHNYLNsSOnoEklg=="
+    },
+    "node_modules/react-gtm-module": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz",
+      "integrity": "sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw=="
+    },
     "node_modules/react-hook-form": {
       "version": "7.53.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",

package.json

@@ -22,6 +22,8 @@
     "react-accessible-accordion": "^5.0.0",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
+    "react-facebook-pixel": "^1.0.4",
+    "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.53.0",
     "react-js-pagination": "^3.0.3",
     "react-paginate": "^8.2.0",

pages/_app.js

@@ -14,67 +14,84 @@ import Header from "@/layout/Header";
 import TopHeader from "@/layout/TopHeader";
 import Providers from "@/redux/providers";
 import { store } from "@/redux/store";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import qs from "qs";
+import axios from "axios";
+import { useRouter } from "next/router";
+import TagManager from "react-gtm-module";
 
-export default function App({ Component, pageProps, title = "Advith", description = "Finance Consulting - Powered by Knowledge, Driven by People, Committed to Client Servicing"  }) {
+export default function App({
+  Component,
+  pageProps,
+  title = "Advith",
+  description = "Finance Consulting - Powered by Knowledge, Driven by People, Committed to Client Servicing",
+}) {
+  const [code, setCode] = useState(null);
+  const router = useRouter();
+  const temp = router.isReady;
+
+  const gtmCall = async () => {
+    const query = { populate: [""] };
+    const queryString = qs.stringify(query, { encodeValuesOnly: true });
+    const endpoint = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${queryString}`;
+    const response = await axios.get(endpoint);
+    if (response) {
+      setCode(response.data.data);
+    }
+  };
+
+  const gtmtag = code?.GtmTag;
+
+  useEffect(() => {
+    gtmCall(); // Fetch GTM tag when the component mounts
+  }, [temp]);
+
+  useEffect(() => {
+    if (gtmtag && typeof window !== "undefined") {
+      // Initialize GTM only in the client-side
+      TagManager.initialize({
+        gtmId: gtmtag,
+      });
+    }
+
+    
+  }, [gtmtag]); // Re-run effect when gtmtag changes
+
+  useEffect(() => {
+    const loadFacebookPixel = async () => {
+      const { default: ReactPixel } = await import("react-facebook-pixel");
+      ReactPixel.init("2400625270215830", null, {
+        autoConfig: true,
+        debug: true,
+      });
+      ReactPixel.pageView();  // Track page view
+      ReactPixel.track("ViewContent");  // Track a custom event, for example
+    };
+  
+    if (typeof window !== "undefined") {
+      loadFacebookPixel();
+    }
+  
+    return () => {
+    };
+  }, []);
   return (
     <>
       <Providers store={store}>
         <Head>
-       
-        <title>{title}</title>
-        <meta charSet="utf-8" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, shrink-to-fit=no"
-          />
-        <meta name="description" content={description} />
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={description} />
-          <link
-            rel="apple-touch-icon"
-            sizes="180x180"
-            href="images/fav.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="32x32"
-            href="images/fav.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="16x16"
-            href="images/fav.png"
-          />
-
-        {/* Google Tag Manager Script */}
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              (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-KKQVF9HD');
-            `,
-          }}
-        />
-        {/* End Google Tag Manager */}
-      </Head>
+          <title>{title}</title>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <link rel="apple-touch-icon" sizes="180x180" href="images/fav.png" />
+          <link rel="icon" type="image/png" sizes="32x32" href="images/fav.png" />
+          <link rel="icon" type="image/png" sizes="16x16" href="images/fav.png" />
+        </Head>
 
-      {/* Google Tag Manager (NoScript) */}
-      <noscript
-        dangerouslySetInnerHTML={{
-          __html: `
-            <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KKQVF9HD"
-            height="0" width="0" style="display:none;visibility:hidden"></iframe>
-          `,
-        }}
-      />
-        {/* <TopHeader /> */}
         <Header />
-       
         <Component {...pageProps} />
         <GoTop />
         <Footer />

pages/corpedia/index.js

@@ -14,6 +14,7 @@ import { fetchCorpediaList } from "@/redux/slices/corpediaslice";
 import ReactPaginate from "react-paginate";
 import Seo from "@/components/reuseables/Seo/Seo";
 import Pagination from "react-js-pagination";
+import { fetchcodeList } from "@/redux/slices/mangerslice";
 
 // const services = [
 //   {
@@ -122,10 +123,13 @@ const CorpediaPage = ({ CorpediaData }) => {
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(fetchCorpediaList());
+    dispatch(fetchcodeList());
   }, [dispatch]);
 
   const corpedialist = useSelector((state) => state.corpedialist.data);
+  const tagmangerlist = useSelector((state) => state.tagmangerlist.data);
 
+  console.log(tagmangerlist,"tagmangerlist")
   // Pagination setup
   const [currentPage, setCurrentPage] = useState(1); // Start at page 1
   const postsPerPage = 6; // Number of items per page
@@ -280,7 +284,7 @@ export const getStaticProps = async () => {
     });
 
     const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/corpedia-page?${query1String}`;
-    console.log(`Final corpedia: ${endpoint1}`);
+    // console.log(`Final corpedia: ${endpoint1}`);
 
     const response1 = await axios.get(endpoint1);
     const CorpediaData = response1.data.data;

redux/slices/mangerslice.js

+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+import qs from "qs";
+
+export const fetchcodeList = createAsyncThunk(
+  "MangerSlice/fetchcodeList",
+  async () => {
+    const query = {
+      populate: [
+       "conversion"
+      ]
+      
+    };
+    const queryString = qs.stringify(query, {
+      encodeValuesOnly: true,
+    });
+    const endpoint = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${queryString}`;
+    const response = await axios.get(endpoint);
+    const data = response.data.data;
+    return data;
+  }
+);
+
+const MangerSlice = createSlice({
+  name: "manger",
+  initialState: {
+    status: "idle",
+    data: [],
+    error: null,
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchcodeList.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchcodeList.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.data = action.payload;
+      })
+      .addCase(fetchcodeList.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.error.message;
+      });
+  },
+});
+export default MangerSlice.reducer;

redux/store.js

@@ -6,6 +6,7 @@ import functionlistSlice from "./slices/functionareaslice"
 import CorpediaListSlice from "./slices/corpediaslice"
 import TaxwireListSlice from "./slices/taxwireslice"
 import BudgetListSlice from "./slices/budgetslice"
+import MangerSlice from "./slices/mangerslice"
 export const store = configureStore({
   reducer: {
     bloglist : bloglistslice,
@@ -14,6 +15,7 @@ export const store = configureStore({
     functionarea: functionlistSlice,
     corpedialist:CorpediaListSlice,
     taxwirelist:TaxwireListSlice,
-    budgetlist:BudgetListSlice
+    budgetlist:BudgetListSlice,
+    tagmangerlist:MangerSlice,
   },
 });