TrackView
Automatically track when an element becomes visible in the viewport using Intersection Observer.
Props
event
string
default:"element_viewed"
Event name to track
Additional properties to include with the event
Content to render and track
Percentage of element that needs to be visible (0-1)
Delay in milliseconds before tracking
Usage
import { TrackView } from 'mentiq-sdk';
function ProductShowcase() {
return (
<TrackView
event="product_viewed"
properties={{ product_id: '123', category: 'electronics' }}
threshold={0.8}
delay={2000}
>
<div className="product">
<h2>Product Name</h2>
<p>Product details...</p>
</div>
</TrackView>
);
}
TrackClick
Track click events on wrapped elements.
Props
Additional properties to include with the event
Content to render and track clicks on
Element identifier for the tracked element
Usage
import { TrackClick } from 'mentiq-sdk';
function CallToAction() {
return (
<TrackClick
element="cta_button"
properties={{ location: 'hero', campaign: 'summer_sale' }}
>
<button className="cta-button">
Get Started
</button>
</TrackClick>
);
}
Automatically captures click coordinates and target element information.
Props
Unique identifier for the form
Whether to track form submissions
Whether to track individual field changes
Usage
Track scroll depth milestones.
Props
Scroll depth percentages to track
Usage
import { TrackScroll } from 'mentiq-sdk';
function BlogPost() {
return (
<TrackScroll milestones={[10, 25, 50, 75, 90, 100]}>
<article>
<h1>Blog Post Title</h1>
<p>Long content...</p>
</article>
</TrackScroll>
);
}
TrackTime
Track time spent on page at specific intervals.
Props
event
string
default:"time_on_page"
Event name to track
Time intervals in seconds to track
Usage
import { TrackTime } from 'mentiq-sdk';
function VideoPage() {
return (
<TrackTime
event="video_page_time"
intervals={[15, 30, 60, 120, 300]}
>
<div>
<h1>Video Tutorial</h1>
<video src="tutorial.mp4" />
</div>
</TrackTime>
);
}
Automatically tracks final time on page when component unmounts.
AnalyticsErrorBoundary
Error boundary that automatically tracks React errors.
Props
Components to monitor for errors
Component to display when an error occurs
onError
(error: Error, errorInfo: React.ErrorInfo) => void
Custom error handler callback
Usage
import { AnalyticsErrorBoundary } from 'mentiq-sdk';
function App() {
return (
<AnalyticsErrorBoundary
fallback={<div>Something went wrong. Please refresh.</div>}
onError={(error, errorInfo) => {
console.error('React error:', error, errorInfo);
}}
>
<YourApp />
</AnalyticsErrorBoundary>
);
}
Props
Whether to measure render performance
Name to identify the component in analytics
Usage
import { PerformanceMonitor } from 'mentiq-sdk';
function Dashboard() {
return (
<PerformanceMonitor
measureRender={true}
componentName="dashboard"
>
<div>
{/* Complex dashboard content */}
</div>
</PerformanceMonitor>
);
}
HeatmapTracker
Track user interactions for heatmap visualization.
Props
element
string
default:"heatmap-element"
Element identifier
Usage
import { HeatmapTracker } from 'mentiq-sdk';
function ProductPage() {
return (
<HeatmapTracker
element="product_page"
trackClicks={true}
trackHovers={true}
trackScrolls={false}
>
<div className="product-details">
<img src="product.jpg" />
<h1>Product Name</h1>
<p>Description...</p>
</div>
</HeatmapTracker>
);
}
Captures exact pixel coordinates relative to both the element and the page.
SessionMonitor
Monitor session activity and track inactivity periods.
Props
Whether to track user inactivity
Inactivity threshold in milliseconds (default: 1 minute)
Usage
import { SessionMonitor } from 'mentiq-sdk';
function App() {
return (
<SessionMonitor
trackInactivity={true}
inactivityThreshold={120000} // 2 minutes
>
<YourApp />
</SessionMonitor>
);
}
withTracking
Higher-Order Component for automatic component view tracking.
Signature
function withTracking<P extends object>(
WrappedComponent: React.ComponentType<P>,
componentName: string,
trackProps?: (props: P) => EventProperties
): React.ComponentType<P>
Usage
import { withTracking } from 'mentiq-sdk';
function ProductCard({ product }) {
return (
<div>
<h3>{product.name}</h3>
<p>{product.price}</p>
</div>
);
}
export default withTracking(ProductCard, 'product_card');
import { withTracking } from 'mentiq-sdk';
function UserProfile({ user }) {
return <div>Profile for {user.name}</div>;
}
export default withTracking(
UserProfile,
'user_profile',
(props) => ({
user_id: props.user.id,
user_tier: props.user.tier,
})
);
All tracking components are designed to be SSR-safe and will only initialize tracking on the client side.