skills.rest
gotempsh
gotempshOFFICIAL
Explore all skills by this author →
Website𝕏@gotempshGitHub

add-react-analytics

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
One-click install
npx skills add https://github.com/gotempsh/temps --skill add-react-analytics
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
dudedesi12dudedesi12

analytics-dashboard

Integrates analytics dashboards and event tracking for web apps.

Community
Advanced
Ditto190Ditto190

state-management

Organize and synchronize application state across UI components with reusable containers and hooks.

Community
Intermediate
Sienci-LabsSienci-Labs
363

integration-react-react-router-7-declarative

Integrate PostHog analytics into React Router v7 declarative apps.

Official
Intermediate