feat: add gtm to load in us only (#16146)
* add gtm to load in us only * fix: Tried to give typescript some help * fix: Alternative fix * fix: Add yarn.lock * fix: Oops * fix: type err --------- Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Udit Takkar <udit222001@gmail.com>
This commit is contained in:
sean-brydon
co-authored by
Alex van Andel
Udit Takkar
Alex van Andel
Udit Takkar
parent
f206b3d135
commit
c41e5ddc2c
@@ -0,0 +1,54 @@
|
||||
import { GoogleTagManager } from "@next/third-parties/google";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
|
||||
|
||||
const CACHE_KEY = "user_geolocation";
|
||||
const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
|
||||
|
||||
export async function fetchGeolocation() {
|
||||
const cachedData = localStorage.getItem(CACHE_KEY);
|
||||
|
||||
if (cachedData) {
|
||||
const { country, timestamp } = JSON.parse(cachedData);
|
||||
|
||||
if (Date.now() - timestamp < CACHE_DURATION) {
|
||||
return { country };
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch("/api/geolocation");
|
||||
const data = await res.json();
|
||||
|
||||
const newCacheData = {
|
||||
country: data.country,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
localStorage.setItem(CACHE_KEY, JSON.stringify(newCacheData));
|
||||
return data;
|
||||
}
|
||||
|
||||
export function useGeolocation() {
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["geolocation"],
|
||||
queryFn: fetchGeolocation,
|
||||
staleTime: 24 * 60 * 60 * 1000, // 24 hours
|
||||
});
|
||||
|
||||
return {
|
||||
isUS: data?.country === "US",
|
||||
loading: isLoading,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
export function GoogleTagManagerComponent() {
|
||||
const { isUS, loading } = useGeolocation();
|
||||
|
||||
if (!isUS || !GTM_ID || loading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <GoogleTagManager gtmId={GTM_ID} />;
|
||||
}
|
||||
@@ -13,6 +13,8 @@ import type { AppProps } from "@lib/app-providers";
|
||||
import AppProviders from "@lib/app-providers";
|
||||
import { seoConfig } from "@lib/config/next-seo.config";
|
||||
|
||||
import { GoogleTagManagerComponent } from "@components/GTM";
|
||||
|
||||
export interface CalPageWrapper {
|
||||
(props?: AppProps): JSX.Element;
|
||||
PageWrapper?: AppProps["Component"]["PageWrapper"];
|
||||
@@ -93,6 +95,7 @@ function PageWrapper(props: AppProps) {
|
||||
<Component {...pageProps} err={err} />
|
||||
)
|
||||
)}
|
||||
<GoogleTagManagerComponent />
|
||||
</AppProviders>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
|
||||
export default function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
const country = req.headers["x-vercel-ip-country"] || "Unknown";
|
||||
res.setHeader("Cache-Control", "public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400");
|
||||
res.status(200).json({ country });
|
||||
}
|
||||
@@ -110,6 +110,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@daily-co/daily-js": "^0.59.0",
|
||||
"@next/third-parties": "^14.2.5",
|
||||
"@vercel/functions": "^1.4.0",
|
||||
"city-timezones": "^1.2.1",
|
||||
"eslint": "^8.34.0",
|
||||
|
||||
@@ -121,15 +121,12 @@ function addHTMLStyles(html?: string) {
|
||||
return "";
|
||||
}
|
||||
const dom = new JSDOM(html);
|
||||
const document = dom.window.document;
|
||||
|
||||
// Select all <a> tags inside <h6> elements --> only used for emojis in rating template
|
||||
const links = document.querySelectorAll("h6 a");
|
||||
const links = Array.from(dom.window.document.querySelectorAll("h6 a")).map((link) => link as HTMLElement);
|
||||
|
||||
links.forEach((link) => {
|
||||
const htmlLink = link as HTMLElement;
|
||||
htmlLink.style.fontSize = "20px";
|
||||
htmlLink.style.textDecoration = "none";
|
||||
link.style.fontSize = "20px";
|
||||
link.style.textDecoration = "none";
|
||||
});
|
||||
|
||||
return dom.serialize();
|
||||
|
||||
@@ -4133,8 +4133,8 @@ __metadata:
|
||||
resolution: "@calcom/api-v2@workspace:apps/api/v2"
|
||||
dependencies:
|
||||
"@calcom/platform-constants": "*"
|
||||
"@calcom/platform-libraries": "npm:@calcom/platform-libraries@0.0.27"
|
||||
"@calcom/platform-libraries-0.0.2": "npm:@calcom/platform-libraries@0.0.2"
|
||||
"@calcom/platform-libraries-0.0.26": "npm:@calcom/platform-libraries@0.0.26"
|
||||
"@calcom/platform-types": "*"
|
||||
"@calcom/platform-utils": "*"
|
||||
"@calcom/prisma": "*"
|
||||
@@ -4465,17 +4465,17 @@ __metadata:
|
||||
"@heroicons/react": ^1.0.6
|
||||
"@prisma/client": ^5.4.2
|
||||
"@tailwindcss/forms": ^0.5.2
|
||||
"@types/node": ^20.3.1
|
||||
"@types/node": 16.9.1
|
||||
"@types/react": 18.0.26
|
||||
autoprefixer: ^10.4.19
|
||||
autoprefixer: ^10.4.12
|
||||
chart.js: ^3.7.1
|
||||
client-only: ^0.0.1
|
||||
eslint: ^8.34.0
|
||||
next: ^14.1.3
|
||||
next: ^13.5.4
|
||||
next-auth: ^4.22.1
|
||||
next-i18next: ^13.2.2
|
||||
postcss: ^8.4.38
|
||||
prisma: ^5.7.1
|
||||
postcss: ^8.4.18
|
||||
prisma: ^5.4.2
|
||||
prisma-field-encryption: ^1.4.0
|
||||
react: ^18.2.0
|
||||
react-chartjs-2: ^4.0.1
|
||||
@@ -4484,7 +4484,7 @@ __metadata:
|
||||
react-live-chat-loader: ^2.8.1
|
||||
swr: ^1.2.2
|
||||
tailwindcss: ^3.3.3
|
||||
typescript: ^5.3.3
|
||||
typescript: ^4.9.4
|
||||
zod: ^3.22.4
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
@@ -4849,6 +4849,15 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@calcom/horizon-workrooms@workspace:packages/app-store/horizon-workrooms":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@calcom/horizon-workrooms@workspace:packages/app-store/horizon-workrooms"
|
||||
dependencies:
|
||||
"@calcom/lib": "*"
|
||||
"@calcom/types": "*"
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@calcom/hubspot@workspace:packages/app-store/hubspot":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@calcom/hubspot@workspace:packages/app-store/hubspot"
|
||||
@@ -5086,17 +5095,6 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@calcom/platform-libraries-0.0.26@npm:@calcom/platform-libraries@0.0.26":
|
||||
version: 0.0.26
|
||||
resolution: "@calcom/platform-libraries@npm:0.0.26"
|
||||
dependencies:
|
||||
"@calcom/core": "*"
|
||||
"@calcom/features": "*"
|
||||
"@calcom/lib": "*"
|
||||
checksum: 95b60b6bccfecf1d75f5b37b6e2b48811d6cbdd6ccb8157fa700558f2947adefd1fa26e7ed123f72960ddbf44ead26cce6e6fbd62505d73f5490abcf7c95563d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@calcom/platform-libraries-0.0.2@npm:@calcom/platform-libraries@0.0.2, @calcom/platform-libraries@npm:0.0.2":
|
||||
version: 0.0.2
|
||||
resolution: "@calcom/platform-libraries@npm:0.0.2"
|
||||
@@ -5108,6 +5106,17 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@calcom/platform-libraries@npm:@calcom/platform-libraries@0.0.27":
|
||||
version: 0.0.27
|
||||
resolution: "@calcom/platform-libraries@npm:0.0.27"
|
||||
dependencies:
|
||||
"@calcom/core": "*"
|
||||
"@calcom/features": "*"
|
||||
"@calcom/lib": "*"
|
||||
checksum: 516c347b3f71e45879925d31f067035a7c6857dc0f474a726dcb58a7949e1d6906e8e21b18a3a480052088ef742048029509aa74b6bde31b51a13fc6ea00a9f4
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@calcom/platform-libraries@workspace:packages/platform/libraries":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@calcom/platform-libraries@workspace:packages/platform/libraries"
|
||||
@@ -5768,23 +5777,23 @@ __metadata:
|
||||
"@radix-ui/react-tabs": ^1.0.0
|
||||
"@radix-ui/react-tooltip": ^1.0.0
|
||||
"@stripe/stripe-js": ^1.35.0
|
||||
"@tanstack/react-query": ^5.17.15
|
||||
"@tanstack/react-query": ^4.3.9
|
||||
"@typeform/embed-react": ^1.2.4
|
||||
"@types/bcryptjs": ^2.4.2
|
||||
"@types/debounce": ^1.2.1
|
||||
"@types/gtag.js": ^0.0.10
|
||||
"@types/micro": 7.3.7
|
||||
"@types/node": ^20.3.1
|
||||
"@types/node": 16.9.1
|
||||
"@types/react": 18.0.26
|
||||
"@types/react-gtm-module": ^2.0.1
|
||||
"@types/xml2js": ^0.4.11
|
||||
"@vercel/analytics": ^0.1.6
|
||||
"@vercel/edge-functions-ui": ^0.2.1
|
||||
"@vercel/og": ^0.5.0
|
||||
autoprefixer: ^10.4.19
|
||||
autoprefixer: ^10.4.12
|
||||
bcryptjs: ^2.4.3
|
||||
class-variance-authority: ^0.7.0
|
||||
clsx: ^2.0.0
|
||||
clsx: ^1.2.1
|
||||
cobe: ^0.4.1
|
||||
concurrently: ^7.6.0
|
||||
cross-env: ^7.0.3
|
||||
@@ -5814,7 +5823,7 @@ __metadata:
|
||||
next-i18next: ^13.2.2
|
||||
next-seo: ^6.0.0
|
||||
playwright-core: ^1.38.1
|
||||
postcss: ^8.4.38
|
||||
postcss: ^8.4.18
|
||||
prism-react-renderer: ^1.3.5
|
||||
react: ^18.2.0
|
||||
react-confetti: ^6.0.1
|
||||
@@ -5837,14 +5846,14 @@ __metadata:
|
||||
remark: ^14.0.2
|
||||
remark-html: ^14.0.1
|
||||
remeda: ^1.24.1
|
||||
stripe: ^15.3.0
|
||||
stripe: ^9.16.0
|
||||
tailwind-merge: ^1.13.2
|
||||
tailwindcss: ^3.3.3
|
||||
ts-node: ^10.9.1
|
||||
typescript: ^5.3.3
|
||||
typescript: ^4.9.4
|
||||
wait-on: ^7.0.1
|
||||
xml2js: ^0.6.0
|
||||
zod: ^3.22.4
|
||||
zod: ^3.22.2
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
@@ -9822,6 +9831,18 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@next/third-parties@npm:^14.2.5":
|
||||
version: 14.2.5
|
||||
resolution: "@next/third-parties@npm:14.2.5"
|
||||
dependencies:
|
||||
third-party-capital: 1.0.20
|
||||
peerDependencies:
|
||||
next: ^13.0.0 || ^14.0.0
|
||||
react: ^18.2.0
|
||||
checksum: e2d32f9d9891c0189c88b2e096e11f6b1e63a6155bee2ebaf1a72531839ea8aa670b039f9d1f68337ad046cdeb429b9cb028676ffd1078e9259341bbda9d5b68
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@noble/curves@npm:1.1.0, @noble/curves@npm:~1.1.0":
|
||||
version: 1.1.0
|
||||
resolution: "@noble/curves@npm:1.1.0"
|
||||
@@ -16161,6 +16182,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@tanstack/query-core@npm:4.36.1":
|
||||
version: 4.36.1
|
||||
resolution: "@tanstack/query-core@npm:4.36.1"
|
||||
checksum: 47672094da20d89402d9fe03bb7b0462be73a76ff9ca715169738bc600a719d064d106d083a8eedae22a2c22de22f87d5eb5d31ef447aba771d9190f2117ed10
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@tanstack/query-core@npm:5.17.19":
|
||||
version: 5.17.19
|
||||
resolution: "@tanstack/query-core@npm:5.17.19"
|
||||
@@ -16168,6 +16196,25 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@tanstack/react-query@npm:^4.3.9":
|
||||
version: 4.36.1
|
||||
resolution: "@tanstack/react-query@npm:4.36.1"
|
||||
dependencies:
|
||||
"@tanstack/query-core": 4.36.1
|
||||
use-sync-external-store: ^1.2.0
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-native: "*"
|
||||
peerDependenciesMeta:
|
||||
react-dom:
|
||||
optional: true
|
||||
react-native:
|
||||
optional: true
|
||||
checksum: 1aff0a476859386f8d32253fa0d0bde7b81769a6d4d4d9cbd78778f0f955459a3bdb7ee27a0d2ee7373090f12998b45df80db0b5b313bd0a7a39d36c6e8e51c5
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@tanstack/react-query@npm:^5.17.15":
|
||||
version: 5.17.19
|
||||
resolution: "@tanstack/react-query@npm:5.17.19"
|
||||
@@ -21345,6 +21392,7 @@ __metadata:
|
||||
dependencies:
|
||||
"@changesets/cli": ^2.26.1
|
||||
"@daily-co/daily-js": ^0.59.0
|
||||
"@next/third-parties": ^14.2.5
|
||||
"@playwright/test": ^1.45.3
|
||||
"@snaplet/copycat": ^4.1.0
|
||||
"@testing-library/jest-dom": ^5.16.5
|
||||
@@ -22362,6 +22410,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"clsx@npm:^1.2.1":
|
||||
version: 1.2.1
|
||||
resolution: "clsx@npm:1.2.1"
|
||||
checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"clsx@npm:^2.0.0":
|
||||
version: 2.1.0
|
||||
resolution: "clsx@npm:2.1.0"
|
||||
@@ -45361,6 +45416,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"third-party-capital@npm:1.0.20":
|
||||
version: 1.0.20
|
||||
resolution: "third-party-capital@npm:1.0.20"
|
||||
checksum: ef5eae00bdb82b538b9f628a011fc294cd6f4bafdbb46d88f3d1a72e8c3b9e2cc2a547fdb62bc16bdd847e9da3dac2df676b154c64914f6c90ea15aac6ce0a6a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"thirty-two@npm:^1.0.2":
|
||||
version: 1.0.2
|
||||
resolution: "thirty-two@npm:1.0.2"
|
||||
@@ -47375,6 +47437,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"use-sync-external-store@npm:^1.2.0":
|
||||
version: 1.2.2
|
||||
resolution: "use-sync-external-store@npm:1.2.2"
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: fe07c071c4da3645f112c38c0e57beb479a8838616ff4e92598256ecce527f2888c08febc7f9b2f0ce2f0e18540ba3cde41eb2035e4fafcb4f52955037098a81
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"utif@npm:^2.0.1":
|
||||
version: 2.0.1
|
||||
resolution: "utif@npm:2.0.1"
|
||||
|
||||
Reference in New Issue
Block a user