ninetwo-user-tracking 1.0.11 → 1.0.13

package/dist/index.d.mts

@@ -14,7 +14,16 @@ interface TrackViewProps {
     label?: string;
     threshold?: number;
     readTime?: number;
+    debug?: boolean;
 }
+/**
+ * TrackView
+ * - Dispara {eventName, type: 'view'} quando o elemento entra na viewport (threshold)
+ * - Dispara {eventName+'_read_confirmation', type: 'read_confirmation'} se o elemento permanecer visível por `readTime`
+ *
+ * Observação: evita usar `display: 'contents'` no wrapper porque em alguns cenários o IntersectionObserver não detecta.
+ * Se o wrapper realmente usa display: contents, tentamos observar o primeiro filho disponível.
+ */
 declare const TrackView: React.FC<TrackViewProps>;
 
 declare const useAutoTrackClick: (enabled?: boolean) => void;

package/dist/index.d.ts

@@ -14,7 +14,16 @@ interface TrackViewProps {
     label?: string;
     threshold?: number;
     readTime?: number;
+    debug?: boolean;
 }
+/**
+ * TrackView
+ * - Dispara {eventName, type: 'view'} quando o elemento entra na viewport (threshold)
+ * - Dispara {eventName+'_read_confirmation', type: 'read_confirmation'} se o elemento permanecer visível por `readTime`
+ *
+ * Observação: evita usar `display: 'contents'` no wrapper porque em alguns cenários o IntersectionObserver não detecta.
+ * Se o wrapper realmente usa display: contents, tentamos observar o primeiro filho disponível.
+ */
 declare const TrackView: React.FC<TrackViewProps>;
 
 declare const useAutoTrackClick: (enabled?: boolean) => void;

package/dist/index.js

@@ -219,21 +219,53 @@ var TrackView = ({
   category,
   label,
   threshold = 0.5,
-  readTime = 5e3
+  readTime = 5e3,
+  debug = false
 }) => {
   const ref = (0, import_react4.useRef)(null);
   const timerRef = (0, import_react4.useRef)(null);
   const [hasTriggeredView, setHasTriggeredView] = (0, import_react4.useState)(false);
   const [hasTriggeredRead, setHasTriggeredRead] = (0, import_react4.useState)(false);
   (0, import_react4.useEffect)(() => {
-    if (!ref.current)
+    const rootEl = ref.current;
+    if (!rootEl)
       return;
     if (hasTriggeredView && hasTriggeredRead)
       return;
+    if (typeof window !== "undefined" && !("IntersectionObserver" in window)) {
+      if (!hasTriggeredView) {
+        pushToDataLayer({
+          event: eventName,
+          category,
+          label,
+          type: "view"
+        });
+        setHasTriggeredView(true);
+      }
+      if (!hasTriggeredRead) {
+        timerRef.current = window.setTimeout(() => {
+          pushToDataLayer({
+            event: `read_confirmation`,
+            category,
+            label,
+            type: "read_confirmation"
+          });
+          setHasTriggeredRead(true);
+        }, readTime);
+      }
+      return () => {
+        if (timerRef.current) {
+          window.clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+      };
+    }
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
           if (!hasTriggeredView) {
+            if (debug)
+              console.log("[TrackView] view ->", eventName, { category, label });
             pushToDataLayer({
               event: eventName,
               category,
@@ -242,36 +274,70 @@ var TrackView = ({
             });
             setHasTriggeredView(true);
           }
-          if (!hasTriggeredRead && !timerRef.current) {
-            timerRef.current = setTimeout(() => {
+          if (!hasTriggeredRead && timerRef.current === null) {
+            timerRef.current = window.setTimeout(() => {
+              if (debug)
+                console.log("[TrackView] read_confirmation ->", eventName, { category, label });
               pushToDataLayer({
                 event: `${eventName}_read_confirmation`,
-                // Sufixo solicitado
                 category,
                 label,
                 type: "read_confirmation"
-                // Tipo diferenciado
               });
               setHasTriggeredRead(true);
+              timerRef.current = null;
             }, readTime);
           }
         } else {
           if (timerRef.current) {
-            clearTimeout(timerRef.current);
+            if (debug)
+              console.log("[TrackView] saiu antes do readTime, cancelando timer ->", eventName);
+            window.clearTimeout(timerRef.current);
             timerRef.current = null;
           }
         }
       },
       { threshold }
     );
-    observer.observe(ref.current);
+    let elementToObserve = rootEl;
+    try {
+      const cs = window.getComputedStyle(rootEl);
+      if (cs && cs.display === "contents") {
+        const firstChild = rootEl.firstElementChild;
+        if (firstChild) {
+          elementToObserve = firstChild;
+          if (debug)
+            console.log("[TrackView] wrapper display:contents \u2014 observando primeiro filho", firstChild);
+        } else {
+          if (debug)
+            console.log("[TrackView] wrapper display:contents mas sem filhos \u2014 observando wrapper", rootEl);
+        }
+      }
+    } catch (e) {
+      if (debug)
+        console.warn("[TrackView] erro ao checar computedStyle", e);
+    }
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
     return () => {
       observer.disconnect();
-      if (timerRef.current)
-        clearTimeout(timerRef.current);
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
     };
-  }, [hasTriggeredView, hasTriggeredRead, eventName, category, label, threshold, readTime]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, style: { display: "contents" }, children });
+  }, [
+    hasTriggeredView,
+    hasTriggeredRead,
+    eventName,
+    category,
+    label,
+    threshold,
+    readTime,
+    debug
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, style: { display: "block" }, children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -191,21 +191,53 @@ var TrackView = ({
   category,
   label,
   threshold = 0.5,
-  readTime = 5e3
+  readTime = 5e3,
+  debug = false
 }) => {
   const ref = useRef(null);
   const timerRef = useRef(null);
   const [hasTriggeredView, setHasTriggeredView] = useState(false);
   const [hasTriggeredRead, setHasTriggeredRead] = useState(false);
   useEffect4(() => {
-    if (!ref.current)
+    const rootEl = ref.current;
+    if (!rootEl)
       return;
     if (hasTriggeredView && hasTriggeredRead)
       return;
+    if (typeof window !== "undefined" && !("IntersectionObserver" in window)) {
+      if (!hasTriggeredView) {
+        pushToDataLayer({
+          event: eventName,
+          category,
+          label,
+          type: "view"
+        });
+        setHasTriggeredView(true);
+      }
+      if (!hasTriggeredRead) {
+        timerRef.current = window.setTimeout(() => {
+          pushToDataLayer({
+            event: `read_confirmation`,
+            category,
+            label,
+            type: "read_confirmation"
+          });
+          setHasTriggeredRead(true);
+        }, readTime);
+      }
+      return () => {
+        if (timerRef.current) {
+          window.clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+      };
+    }
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
           if (!hasTriggeredView) {
+            if (debug)
+              console.log("[TrackView] view ->", eventName, { category, label });
             pushToDataLayer({
               event: eventName,
               category,
@@ -214,36 +246,70 @@ var TrackView = ({
             });
             setHasTriggeredView(true);
           }
-          if (!hasTriggeredRead && !timerRef.current) {
-            timerRef.current = setTimeout(() => {
+          if (!hasTriggeredRead && timerRef.current === null) {
+            timerRef.current = window.setTimeout(() => {
+              if (debug)
+                console.log("[TrackView] read_confirmation ->", eventName, { category, label });
               pushToDataLayer({
                 event: `${eventName}_read_confirmation`,
-                // Sufixo solicitado
                 category,
                 label,
                 type: "read_confirmation"
-                // Tipo diferenciado
               });
               setHasTriggeredRead(true);
+              timerRef.current = null;
             }, readTime);
           }
         } else {
           if (timerRef.current) {
-            clearTimeout(timerRef.current);
+            if (debug)
+              console.log("[TrackView] saiu antes do readTime, cancelando timer ->", eventName);
+            window.clearTimeout(timerRef.current);
             timerRef.current = null;
           }
         }
       },
       { threshold }
     );
-    observer.observe(ref.current);
+    let elementToObserve = rootEl;
+    try {
+      const cs = window.getComputedStyle(rootEl);
+      if (cs && cs.display === "contents") {
+        const firstChild = rootEl.firstElementChild;
+        if (firstChild) {
+          elementToObserve = firstChild;
+          if (debug)
+            console.log("[TrackView] wrapper display:contents \u2014 observando primeiro filho", firstChild);
+        } else {
+          if (debug)
+            console.log("[TrackView] wrapper display:contents mas sem filhos \u2014 observando wrapper", rootEl);
+        }
+      }
+    } catch (e) {
+      if (debug)
+        console.warn("[TrackView] erro ao checar computedStyle", e);
+    }
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
     return () => {
       observer.disconnect();
-      if (timerRef.current)
-        clearTimeout(timerRef.current);
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
     };
-  }, [hasTriggeredView, hasTriggeredRead, eventName, category, label, threshold, readTime]);
-  return /* @__PURE__ */ jsx2("div", { ref, style: { display: "contents" }, children });
+  }, [
+    hasTriggeredView,
+    hasTriggeredRead,
+    eventName,
+    category,
+    label,
+    threshold,
+    readTime,
+    debug
+  ]);
+  return /* @__PURE__ */ jsx2("div", { ref, style: { display: "block" }, children });
 };
 export {
   TrackView,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ninetwo-user-tracking",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "User tracking abstraction for React/Nextjs with GTM",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",