React

Overview

Alytica is a lightweight, privacy-focused web analytics tool designed to provide deep insights into user interactions with minimal performance overhead. For React applications, Alytica offers seamless tracking of page views, user engagement, custom events, and more.

Key Features

• Zero-configuration page view tracking
• Custom event tracking
• Performance-optimized script
• Session and visitor identification

Integration Steps

1. Create a Project

First create a project from your Alytica dashboard by clicking the button "New Website"

2. Add Alytica Script

Add the Alytica tracking script to your HTML file or root component. For React applications, you have multiple integration approaches:

Option 1: index.html (Create React App)

<script 
  src="https://alytica.tech/js/tracker.js" 
  data-website-id="YOUR_WEBSITE_ID" 
  data-domain="yourdomain.com"
></script>

Option 2: Dynamic Script Injection (Recommended for Single Page Applications)

import { useEffect } from 'react';
 
function AlyticaTracker() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://alytica.tech/js/tracker.js';
    script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
    script.setAttribute('data-domain', 'yourdomain.com');
    document.body.appendChild(script);
 
    return () => {
      document.body.removeChild(script);
    };
  }, []);
 
  return null;
}
 
function App() {
  return (
    <>
      <AlyticaTracker />
      {/* Rest of your application */}
    </>
  );
}

2. Track Custom Events

Alytica provides a global window.alytica() function for tracking custom events:

// Track user signup
window.alytica('signup', { 
email:"user@example.com"
});
 
// Track payments for your payment confirmation page to use our payment attribution features
window.alytica('payment', { 
  amount: 49.99, 
  email: 'customer@email.com' 
});
 
// Track custom events
window.alytica('feature_used', { 
  feature: 'dark-mode' 
});

Best Practices

• Always include website ID and domain attributes
• Place the script before your main React application loads
• Use the global window.alytica() function for custom event tracking
• Avoid multiple script insertions

Testing Your Integration

1. Click the Verify Script button in the setup form. This will automatically check if the script is correctly installed and configured on your website.
   • If successful, you'll see a "Verification Successful" message.
   • If it fails, review the script placement and domain settings, then try again.
2. Check Network tab for https://alytica.tech/api/track-visit calls
3. Verify custom events are being sent
4. Use Alytica's dashboard for comprehensive insights

Conclusion

Alytica provides a simple, performance-friendly analytics solution for React applications. By following these steps, you'll gain valuable insights into user behavior with minimal configuration.

Visit Alytica Dashboard →