Pulse Logo
Pulse
Back to Integrations

React Integration

For standard React SPAs (Create React App, Vite, etc.), you can simply add the script tag to your index.html.

Method 1: index.html (Recommended)

The simplest way is to add the script tag directly to the <head> of your index.html file.

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <!-- Pulse Analytics -->
    <script 
      defer 
      data-domain="your-site.com" 
      src="https://pulse.ciphera.net/script.js"
    ></script>
    
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Method 2: Programmatic Injection

If you need to load the script dynamically (e.g., only in production), you can use a useEffect hook in your main App component.

src/App.tsx
import { useEffect } from 'react'

function App() {
  useEffect(() => {
    // Only load in production
    if (process.env.NODE_ENV === 'production') {
      const script = document.createElement('script')
      script.defer = true
      script.setAttribute('data-domain', 'your-site.com')
      script.src = 'https://pulse.ciphera.net/script.js'
      document.head.appendChild(script)
    }
  }, [])

  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  )
}