From 500bcba7b85e9236f9e8e9c533e03dd0e50070c8 Mon Sep 17 00:00:00 2001 From: Pedro Bernardina Date: Fri, 10 Oct 2025 14:42:26 -0300 Subject: [PATCH] feat(analytics): add extra params prop to gtm --- website/components/Analytics.tsx | 52 ++++++++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 3 deletions(-) diff --git a/website/components/Analytics.tsx b/website/components/Analytics.tsx index e61d79b41..7b106c47a 100644 --- a/website/components/Analytics.tsx +++ b/website/components/Analytics.tsx @@ -13,7 +13,9 @@ export const getGTMIdFromSrc = (src: string | undefined) => { interface TagManagerProps { trackingId: string; src?: string; + extraParams?: ExtraParams[]; } + export function GoogleTagManager(props: TagManagerProps) { const _isOnPremises = !!props.src; const hasTrackingId = "trackingId" in props; @@ -29,6 +31,19 @@ export function GoogleTagManager(props: TagManagerProps) { `/ns.html?id=${hasTrackingId ? props.trackingId : ""}`, hostname, ); + const reservedKeys = new Set(["id", "ns"]); + + for (const { key, value } of (props.extraParams ?? [])) { + if (reservedKeys.has(key.toLowerCase())) { + continue; + } + + if (key) { + src.searchParams.append(key, value); + noscript.searchParams.append(key, value); + } + } + return ( <> @@ -103,6 +118,19 @@ const snippet = () => { }); }); }; + +/** @title {{key}} - {{value}} */ +interface ExtraParams { + /** + * @description key for extra param. + */ + key: string; + /** + * @description value for extra param. + */ + value: string; +} + export interface Props { /** * @description google tag manager container id. For more info: https://developers.google.com/tag-platform/tag-manager/web#standard_web_page_installation . @@ -118,13 +146,23 @@ export interface Props { * @description custom url for serving google tag manager. */ src?: string; + /** + * @description extra params for google tag manager url. + */ + extraParams?: ExtraParams[]; /** * @description Disable forwarding events into dataLayer */ disableAutomaticEventPush?: boolean; } export default function Analytics( - { trackingIds, src, googleAnalyticsIds, disableAutomaticEventPush }: Props, + { + trackingIds, + src, + googleAnalyticsIds, + disableAutomaticEventPush, + extraParams, + }: Props, ) { const isDeploy = !!context.isDeploy; // Prevent breacking change. Drop this in next major to only have @@ -137,14 +175,22 @@ export default function Analytics( {isDeploy && ( <> {trackingIds?.map((trackingId) => ( - + ))} {googleAnalyticsIds?.map((trackingId) => ( ))} {/* Drop this in next major to only have trackingId or trackingId and src */} {src && !trackingIds?.length && ( - + )} )}