_app.js
2.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import "../styles/bootstrap.min.css";
import "../styles/animate.min.css";
import "../styles/remixicon.css";
import "react-accessible-accordion/dist/fancy-example.css";
import "../styles/styles.css";
import "../styles/responsive.css";
import "react-tabs/style/react-tabs.css";
import "swiper/css";
import "swiper/css/bundle";
import Head from "next/head";
import GoTop from "@/layout/GoTop";
import Footer from "@/layout/Footer";
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",
}) {
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
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"
/>
</Head>
<Header />
<Component {...pageProps} />
<GoTop />
<Footer />
</Providers>
</>
);
}