how to implement Adobe Analitycs on a Reactjs app?

Question

HiI'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 TVsWe're currently finalizing some features, and everything is working, but now we want to use Adobe AnalyticsThank you for your reply

pradnya_balvir · Accepted Answer

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:

AppMeasurement.js (Classic Adobe Analytics Library)
- Lightweight and widely used
- Easier for custom implementations and Smart TV environments
Adobe Experience Platform Web SDK (alloy.js)
- Recommended if you're using Adobe Experience Platform
- Heavier; may not be ideal for Smart TV browsers
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

Vinay_Chauhan · Answer

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.

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',
});
Track events or page views
For example, on a page load or route change -

alloy('sendEvent', {
xdm: {
eventType: 'pageView',
web: {
webPageDetails: {
name: 'Home'
}
}
}
});
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()).
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!

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

Choose the Integration Method

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

Choose the Integration Method

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded