add-react-analytics

Name: add-react-analytics
Availability: InStock
Author: Temps

Integrate Temps analytics into React apps with provider-based tracking.

620|45|Updated Oct 21, 2025

Search Tags:#analytics #react #hooks #events #web-vitals #session-recording #pageviews

Ready to run

npx skills add https://github.com/gotempsh/temps --skill add-react-analytics

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: add-react-analytics
Source: https://github.com/gotempsh/temps/tree/main/skills/add-react-analytics
Command: npx skills add https://github.com/gotempsh/temps --skill add-react-analytics

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Integrate Temps analytics into React applications to provide reliable user interaction tracking, event collection, and performance insights across popular frameworks.

Core Features & Use Cases

Auto-track pageviews and custom events across Next.js App Router, Next.js Pages Router, Vite, Create React App, and Remix.
Monitor scroll depth, element visibility, and user engagement with lightweight hooks and optional session heartbeat.
Enable session recording/replay and Web Vitals metrics to measure performance and improve UX.
Identify users for analytics and debug analytics during development with clear provider configuration.

Quick Start

Install @temps-sdk/react-analytics and wrap your app with TempsAnalyticsProvider to enable analytics.

Frequently Asked Questions about add-react-analytics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I integrate analytics into a React application?▼

To integrate analytics into a React application, install the SDK and wrap your app with a provider component to enable automatic pageview and event tracking.

Can I track Web Vitals and session recording in Next.js?▼

Yes, you can track Web Vitals and session recording in Next.js by configuring the analytics provider to enable performance metrics and replay controls.

Does this analytics provider work with Vite and Remix projects?▼

This analytics provider works with Vite and Remix projects, as well as Next.js and Create React App, supporting auto-tracking across these popular frameworks.

How do I track scroll depth and element visibility in React?▼

You can track scroll depth and element visibility in React by using the provided lightweight hooks to monitor user engagement and element interactions.

Do I need to manually configure pageviews for a Create React App?▼

No, you do not need to manually configure pageviews for a Create React App because the provider supports autoTrack options to automatically capture pageviews and custom events.

What is the best way to identify users for analytics in React?▼

The best way to identify users for analytics in React is through the provider configuration, which allows you to set user identities and debug analytics during development.