ninetwo-user-tracking 1.0.6

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface TrackingProviderProps {
+    children: React.ReactNode;
+    gtmId?: string;
+    debug?: boolean;
+}
+declare const TrackingProvider: React.FC<TrackingProviderProps>;
+
+interface TrackViewProps {
+    children: React.ReactNode;
+    eventName: string;
+    category?: string;
+    label?: string;
+    threshold?: number;
+}
+declare const TrackView: React.FC<TrackViewProps>;
+
+declare const useAutoTrackClick: (enabled?: boolean) => void;
+
+export { TrackView, TrackingProvider, useAutoTrackClick };

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface TrackingProviderProps {
+    children: React.ReactNode;
+    gtmId?: string;
+    debug?: boolean;
+}
+declare const TrackingProvider: React.FC<TrackingProviderProps>;
+
+interface TrackViewProps {
+    children: React.ReactNode;
+    eventName: string;
+    category?: string;
+    label?: string;
+    threshold?: number;
+}
+declare const TrackView: React.FC<TrackViewProps>;
+
+declare const useAutoTrackClick: (enabled?: boolean) => void;
+
+export { TrackView, TrackingProvider, useAutoTrackClick };

package/dist/index.js

@@ -0,0 +1,163 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  TrackView: () => TrackView,
+  TrackingProvider: () => TrackingProvider,
+  useAutoTrackClick: () => useAutoTrackClick
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/TrackingProvider.tsx
+var import_react2 = require("react");
+
+// src/hooks/useAutoTrackClick.ts
+var import_react = require("react");
+
+// src/utils/gtm.ts
+var pushToDataLayer = (props) => {
+  if (typeof window === "undefined")
+    return;
+  const dataLayer = window.dataLayer || [];
+  dataLayer.push({
+    event: props.event,
+    // Nome do evento (ex: 'click_cta')
+    event_category: props.category,
+    event_label: props.label,
+    event_type: props.type,
+    interaction_time: (/* @__PURE__ */ new Date()).toISOString()
+  });
+};
+
+// src/hooks/useAutoTrackClick.ts
+var useAutoTrackClick = (enabled = true) => {
+  (0, import_react.useEffect)(() => {
+    if (!enabled || typeof document === "undefined")
+      return;
+    const handleClick = (e) => {
+      const target = e.target;
+      const trackingElement = target.closest("[data-nt-ut-event]");
+      if (trackingElement) {
+        const eventName = trackingElement.getAttribute("data-nt-ut-event");
+        const category = trackingElement.getAttribute("data-nt-ut-category");
+        const label = trackingElement.getAttribute("data-nt-ut-label");
+        const type = trackingElement.getAttribute("data-nt-ut-type");
+        if (!type || type === "click") {
+          const data = {
+            event: eventName || "interaction",
+            category: category || "general",
+            label: label || "",
+            type: "click"
+          };
+          console.log("data =>", data);
+          pushToDataLayer(data);
+        }
+      }
+    };
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [enabled]);
+};
+
+// src/TrackingProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TrackingProvider = ({
+  children,
+  gtmId,
+  debug = false
+}) => {
+  useAutoTrackClick(true);
+  (0, import_react2.useEffect)(() => {
+    if (!gtmId || typeof window === "undefined") {
+      if (debug && !gtmId)
+        console.warn("[NineTwo Tracking] GTM ID n\xE3o fornecido.");
+      return;
+    }
+    const scriptId = "ninetwo-gtm-script";
+    if (document.getElementById(scriptId)) {
+      if (debug)
+        console.log("[NineTwo Tracking] Script j\xE1 existente. Ignorando reinje\xE7\xE3o.");
+      return;
+    }
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      "gtm.start": (/* @__PURE__ */ new Date()).getTime(),
+      event: "gtm.js"
+    });
+    const script = document.createElement("script");
+    script.id = scriptId;
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${gtmId}`;
+    script.onload = () => {
+      if (debug)
+        console.log(`[NineTwo Tracking] \u2705 GTM carregado com sucesso! (${gtmId})`);
+    };
+    script.onerror = () => {
+      if (debug)
+        console.error("[NineTwo Tracking] \u274C Erro ao carregar GTM. Verifique AdBlockers.");
+    };
+    document.head.appendChild(script);
+  }, [gtmId, debug]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+};
+
+// src/components/TrackView.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TrackView = ({
+  children,
+  eventName,
+  category,
+  label,
+  threshold = 0.5
+}) => {
+  const ref = (0, import_react3.useRef)(null);
+  const [hasTriggered, setHasTriggered] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !hasTriggered) {
+          pushToDataLayer({
+            event: eventName,
+            category,
+            label,
+            type: "view"
+          });
+          setHasTriggered(true);
+          observer.disconnect();
+        }
+      },
+      { threshold }
+    );
+    if (ref.current)
+      observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [hasTriggered, eventName, category, label, threshold]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, style: { display: "contents" }, children });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TrackView,
+  TrackingProvider,
+  useAutoTrackClick
+});

package/dist/index.mjs

@@ -0,0 +1,134 @@
+// src/TrackingProvider.tsx
+import { useEffect as useEffect2 } from "react";
+
+// src/hooks/useAutoTrackClick.ts
+import { useEffect } from "react";
+
+// src/utils/gtm.ts
+var pushToDataLayer = (props) => {
+  if (typeof window === "undefined")
+    return;
+  const dataLayer = window.dataLayer || [];
+  dataLayer.push({
+    event: props.event,
+    // Nome do evento (ex: 'click_cta')
+    event_category: props.category,
+    event_label: props.label,
+    event_type: props.type,
+    interaction_time: (/* @__PURE__ */ new Date()).toISOString()
+  });
+};
+
+// src/hooks/useAutoTrackClick.ts
+var useAutoTrackClick = (enabled = true) => {
+  useEffect(() => {
+    if (!enabled || typeof document === "undefined")
+      return;
+    const handleClick = (e) => {
+      const target = e.target;
+      const trackingElement = target.closest("[data-nt-ut-event]");
+      if (trackingElement) {
+        const eventName = trackingElement.getAttribute("data-nt-ut-event");
+        const category = trackingElement.getAttribute("data-nt-ut-category");
+        const label = trackingElement.getAttribute("data-nt-ut-label");
+        const type = trackingElement.getAttribute("data-nt-ut-type");
+        if (!type || type === "click") {
+          const data = {
+            event: eventName || "interaction",
+            category: category || "general",
+            label: label || "",
+            type: "click"
+          };
+          console.log("data =>", data);
+          pushToDataLayer(data);
+        }
+      }
+    };
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [enabled]);
+};
+
+// src/TrackingProvider.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var TrackingProvider = ({
+  children,
+  gtmId,
+  debug = false
+}) => {
+  useAutoTrackClick(true);
+  useEffect2(() => {
+    if (!gtmId || typeof window === "undefined") {
+      if (debug && !gtmId)
+        console.warn("[NineTwo Tracking] GTM ID n\xE3o fornecido.");
+      return;
+    }
+    const scriptId = "ninetwo-gtm-script";
+    if (document.getElementById(scriptId)) {
+      if (debug)
+        console.log("[NineTwo Tracking] Script j\xE1 existente. Ignorando reinje\xE7\xE3o.");
+      return;
+    }
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      "gtm.start": (/* @__PURE__ */ new Date()).getTime(),
+      event: "gtm.js"
+    });
+    const script = document.createElement("script");
+    script.id = scriptId;
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${gtmId}`;
+    script.onload = () => {
+      if (debug)
+        console.log(`[NineTwo Tracking] \u2705 GTM carregado com sucesso! (${gtmId})`);
+    };
+    script.onerror = () => {
+      if (debug)
+        console.error("[NineTwo Tracking] \u274C Erro ao carregar GTM. Verifique AdBlockers.");
+    };
+    document.head.appendChild(script);
+  }, [gtmId, debug]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
+// src/components/TrackView.tsx
+import { useEffect as useEffect3, useRef, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TrackView = ({
+  children,
+  eventName,
+  category,
+  label,
+  threshold = 0.5
+}) => {
+  const ref = useRef(null);
+  const [hasTriggered, setHasTriggered] = useState(false);
+  useEffect3(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !hasTriggered) {
+          pushToDataLayer({
+            event: eventName,
+            category,
+            label,
+            type: "view"
+          });
+          setHasTriggered(true);
+          observer.disconnect();
+        }
+      },
+      { threshold }
+    );
+    if (ref.current)
+      observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [hasTriggered, eventName, category, label, threshold]);
+  return /* @__PURE__ */ jsx2("div", { ref, style: { display: "contents" }, children });
+};
+export {
+  TrackView,
+  TrackingProvider,
+  useAutoTrackClick
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ninetwo-user-tracking",
+  "version": "1.0.6",
+  "description": "User tracking abstraction for React/Nextjs with GTM",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "tracking",
+    "gtm",
+    "analytics"
+  ],
+  "author": "NineTwo",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://guirossetim-M2Z@github.com/guirossetim-M2Z/ninetwo-gtag.git"
+  }
+}