@optic7409/resolvo-analytics/dist/react/components/AnalyticsTracker.js

Simplified analytics client library for Next.js with automatic SSR handling, one-line integration, and comprehensive tracking

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { AnalyticsClient } from '../../core/AnalyticsClient';
let globalClient = null;
export function AnalyticsTracker({ config, children, trackClicks = true, trackForms = true, customSelectors = [] }) {
    const containerRef = useRef(null);
    useEffect(() => {
        // Initialize client if not already done
        if (!globalClient) {
            globalClient = new AnalyticsClient(config);
        }
        const container = containerRef.current;
        if (!container)
            return;
        const handleClick = async (event) => {
            const target = event.target;
            // Check if it's a trackable element
            const isButton = target.tagName === 'BUTTON';
            const isLink = target.tagName === 'A';
            const hasTrackAttr = target.hasAttribute('data-track');
            const matchesCustomSelector = customSelectors.some(selector => target.matches(selector));
            if (trackClicks && (isButton || isLink || hasTrackAttr || matchesCustomSelector)) {
                const eventName = target.getAttribute('data-track-event') || 'click';
                const properties = {
                    element: target.tagName.toLowerCase(),
                    text: target.textContent?.trim() || '',
                    className: target.className || '',
                    id: target.id || '',
                    href: target.getAttribute('href') || undefined,
                    ...(target.dataset.trackProps ? JSON.parse(target.dataset.trackProps) : {})
                };
                await globalClient?.track(eventName, properties);
            }
        };
        const handleFormSubmit = async (event) => {
            if (!trackForms)
                return;
            const target = event.target;
            if (target.tagName === 'FORM') {
                const formData = new FormData(target);
                const fields = Array.from(formData.keys());
                await globalClient?.track('form_submit', {
                    formId: target.id || '',
                    formName: target.name || '',
                    fields: fields,
                    fieldCount: fields.length
                });
            }
        };
        // Add event listeners
        container.addEventListener('click', handleClick);
        container.addEventListener('submit', handleFormSubmit);
        return () => {
            container.removeEventListener('click', handleClick);
            container.removeEventListener('submit', handleFormSubmit);
        };
    }, [config, trackClicks, trackForms, customSelectors]);
    // Provide access to the client for manual tracking
    useEffect(() => {
        if (globalClient && typeof window !== 'undefined') {
            window.analytics = {
                track: (event, properties) => globalClient?.track(event, properties),
                identify: (userId, properties) => globalClient?.identify(userId, properties),
                trackPageView: (url, title) => globalClient?.trackPageView(url, title)
            };
        }
    }, []);
    return (_jsx("div", { ref: containerRef, style: { display: 'contents' }, children: children }));
}