@arkyn/components 1.3.146 → 1.3.147

package/src/components/GoogleTagManager/index.tsx

@@ -0,0 +1,39 @@
+import { ClientOnly } from "../../components/ClientOnly";
+import { GoogleTagManagerClient } from "./GoogleTagManager.client";
+
+type GoogleTagManagerProps = {
+  gtmId: string;
+  events?: Record<string, string>;
+  dataLayer?: Record<string, string>;
+  dataLayerName?: string;
+  auth?: string;
+  preview?: string;
+};
+
+function GoogleTagManager(props: GoogleTagManagerProps) {
+  const {
+    gtmId,
+    auth = "",
+    preview = "",
+    dataLayerName = "dataLayer",
+    events = {},
+    dataLayer = {},
+  } = props;
+
+  return (
+    <ClientOnly>
+      {() => (
+        <GoogleTagManagerClient
+          auth={auth}
+          dataLayer={dataLayer}
+          dataLayerName={dataLayerName}
+          events={events}
+          gtmId={gtmId}
+          preview={preview}
+        />
+      )}
+    </ClientOnly>
+  );
+}
+
+export { GoogleTagManager };

package/src/components/GoogleTagManager/snippets/appendToDataLayer.ts

@@ -0,0 +1,14 @@
+type AppendToDataLayer = {
+  dataLayer: Record<string, string>;
+  dataLayerName: string;
+};
+
+function appendToDataLayer(props: AppendToDataLayer) {
+  const { dataLayer, dataLayerName } = props;
+
+  return `
+  window.${dataLayerName} = window.${dataLayerName} || [];
+  window.${dataLayerName}.push(${JSON.stringify(dataLayer)})`;
+}
+
+export { appendToDataLayer };

package/src/components/GoogleTagManager/snippets/generateGTMElements.ts

@@ -0,0 +1,43 @@
+import { appendToDataLayer } from "./appendToDataLayer";
+
+type GenerateGTMElementsProps = {
+  id: string;
+  events: Record<string, string>;
+  dataLayer: Record<string, string>;
+  dataLayerName: string;
+  preview: string;
+  auth: string;
+};
+
+function generateGTMElements(props: GenerateGTMElementsProps) {
+  const { id, events, dataLayer, dataLayerName, preview, auth } = props;
+
+  const gtmAuth = `&gtm_auth=${auth}`;
+  const gtmPreview = `&gtm_preview=${preview}`;
+
+  if (!id) console.warn("GTM Id is required");
+
+  const iframe = `
+    <iframe src="https://www.googletagmanager.com/ns.html?id=${id}${gtmAuth}${gtmPreview}&gtm_cookies_win=x"
+      height="0" width="0" style="display:none;visibility:hidden" id="tag-manager"></iframe>`;
+
+  const script = `
+    (function(w,d,s,l,i){w[l]=w[l]||[];
+      w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', ${JSON.stringify(
+        events
+      ).slice(1, -1)}});
+      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+'${gtmAuth}${gtmPreview}&gtm_cookies_win=x';
+      f.parentNode.insertBefore(j,f);
+    })(window,document,'script','${dataLayerName}','${id}');`;
+
+  const dataLayerVar = appendToDataLayer({ dataLayer, dataLayerName });
+
+  return {
+    iframe,
+    script,
+    dataLayerVar,
+  };
+}
+
+export { generateGTMElements };

package/src/hooks/useHydrated.ts

@@ -0,0 +1,15 @@
+import { useSyncExternalStore } from "react";
+
+function subscribe() {
+  return () => {};
+}
+
+function useHydrated() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+
+export { useHydrated };

package/src/index.ts

@@ -9,7 +9,6 @@ export {
 export { Badge } from "./components/Badge";
 export { Card } from "./components/Card";
 export { Divider } from "./components/Divider";
-export { GoogleMap } from "./components/GoogleMap";
 export { Skeleton } from "./components/Skeleton";
 export {
   TableBody,
@@ -49,6 +48,7 @@ export { Tooltip } from "./components/Tooltip";
 export { useAutomation } from "./hooks/useAutomation";
 export { useDrawer } from "./hooks/useDrawer";
 export { useFieldErrors } from "./hooks/useFieldErrors";
+export { useHydrated } from "./hooks/useHydrated";
 export { useModal } from "./hooks/useModal";
 export { useScopedParams } from "./hooks/useScopedParams";
 export { useToast } from "./hooks/useToast";
@@ -58,3 +58,8 @@ export { DrawerProvider } from "./provider/DrawerProvider";
 export { GoogleProvider } from "./provider/GoogleProvider";
 export { ModalProvider } from "./provider/ModalProvider";
 export { ToastProvider } from "./provider/ToastProvider";
+
+// Others
+export { ClientOnly } from "./components/ClientOnly";
+export { GoogleMap } from "./components/GoogleMap";
+export { GoogleTagManager } from "./components/GoogleTagManager";