React & SPA Installation Guide - Help Center

For client-side React apps (Single Page Applications created with Create React App or Vite), tracking affiliate clicks is as simple as adding our track.js snippet to your core HTML file.

Installing the Tracker

Open your public/index.html (if using CRA) or index.html (if using Vite) and paste the script directly into the <head> tag:

<head>
    <!-- Other head tags -->
    
    <!-- Discover Mac Apps Tracker -->
    <script 
        src="https://discovermacapps.com/track.js" 
        data-program-id="YOUR_PROGRAM_ID" 
        defer
    ></script>
</head>

[!WARNING] Do not attempt to add this script via a useEffect inside a React component (like App.jsx). It is highly recommended to load the script at the document level to ensure it catches the URL parameters immediately before React potentially modifies the route.

React Router Support

Our script automatically ties into the browser's History API. This means it perfectly supports client-side react-router-dom navigation.

If a user clicks an affiliate link yoursite.com/?ref=johndoe and React Router immediately pushes them to a clean URL yoursite.com/dashboard, our script intercepts the original parameter before the redirect happens.

Dynamic MetaData (Optional)

If you want to manually trigger a tracking event in React (for example, tying an affiliate click to a specific user ID after they log in), you can use the globally available window.DMA object.

import { useEffect } from 'react';

function UserDashboard({ user }) {
  useEffect(() => {
    if (window.DMA && user.id) {
      window.DMA.identify({ userId: user.id, email: user.email });
    }
  }, [user.id]);

  return <div>Welcome back!</div>;
}