how to implement Adobe Analitycs on a Reactjs app?

[DavidRo47]

Hi

I'd like to know how to implement Adobe Analytics in an application developed in ReactJS.

The application is basically developed in ReactJS. It will run on Samsung and LG Smart TVs
We're currently finalizing some features, and everything is working, but now we want to use Adobe Analytics

Thank you for your reply

[Vinay_Chauhan]

Hi @DavidRo47 

If you're looking to add Adobe Analytics to your ReactJS app (especially for smart TVs like Samsung and LG), here’s a simple way to get started -

You can use Adobe’s Web SDK (Alloy.js), it’s the newer and more flexible option, and it works well with React apps.

1. Set up the SDK
   If your environment allows, install it via npm -
   
   npm install @adobe/alloy
   
   
   Then initialize it with your config:
   
   

   import alloy from '@adobe/alloy';

   alloy('configure', {
   edgeConfigId: 'your-edge-config-id',
   orgId: 'your-org-id',
   });
   
   

2.  Track events or page views
   For example, on a page load or route change -
   
   
   alloy('sendEvent', {
   xdm: {
   eventType: 'pageView',
   web: {
   webPageDetails: {
   name: 'Home'
   }
   }
   }
   });

3. For Smart TVs
   If the Web SDK doesn’t work directly on those platforms, you might need to use the older 'AppMeasurement.js' script and fire the tracking calls manually (like s.t() or s.tl()).
4. SPA navigation
   Since React is a single-page app, make sure to trigger tracking calls on route changes — using useEffect() inside your router logic usually works well.

Hope that helps! 

[KumarRishii]

Hi @DavidRo47 

You can Implement Adobe Analytics by two common ways to into React.js app

AppMeasurement.js (legacy) — Traditional JavaScript tracking

Adobe Experience Platform Web SDK (modern, using @adobe/alloy)

I suggest to go through below reference links as it may helpful.

https://experienceleaguecommunities.adobe.com/t5/adobe-analytics-questions/react-amp-best-practices-...

https://experienceleaguecommunities.adobe.com/t5/adobe-analytics-questions/react-amp-best-practices-...

[pradnya_balvir]

Hi @DavidRo47 ,

Implementing Adobe Analytics in a ReactJS application, especially for Smart TVs (Samsung, LG), involves integrating the Adobe Experience Platform Web SDK or AppMeasurement.js, depending on the Adobe stack you're using. Given the Smart TV context, where web environments may be limited (e.g., no browser extensions, no full cookie support), you'll want to handle implementation efficiently and with minimal dependencies.

Step-by-Step Guide to Implement Adobe Analytics in ReactJS (for Smart TVs)

Choose the Integration Method

You typically have two options:

1. AppMeasurement.js (Classic Adobe Analytics Library)

   • Lightweight and widely used

   • Easier for custom implementations and Smart TV environments

2. Adobe Experience Platform Web SDK (alloy.js)

   • Recommended if you're using Adobe Experience Platform

   • Heavier; may not be ideal for Smart TV browsers

3. For Classic Adobe Analytics Library

• Follow the AppMeasurement.js guide to:

  • Download the library

  • Insert 

    <script src="AppMeasurement.js">

  • Set up tracking variables and methods

• Instrument your React components:

  • Call s.t() for page loads inside useEffect

  • Use s.tl() for custom interactions (e.g., remote key presses, video control)

• Test thoroughly on Smart TVs:

  • Deploy app to Samsung or LG emulators/devices

  • Validate tracking beacons (look for b/ss calls in network logs)

For Smart TVs:

• Stick to AppMeasurement.js unless AEP Web SDK is strictly required.

• Minimize dependencies and test tracking in slow/limited environments.

• Use React hooks and utils to keep tracking logic clean and centralized