Expand my Community achievements bar.

SOLVED

ReactJS and Adobe Analytics

Avatar

Level 1

Is there a tutorial or example on how to implement adobe analytics in a reactjs app? I am looking for reactjs NOT react-native.   I have search and search online but i only see google analytics not adobe analytics.   Is adobe analytics use much in react apps?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

All our sites used to be coded in ReactJS (til we moved to a new vendor with a proprietary front-end code, there is still a potential that we may go back to ReactJS front end and only use the vendor's back-end... but that will be a ways off if it happens)..

 

However, Adobe can be used on any coding system, so long as you can set the data to the front end in some fashion that you can read it.

 

We used a custom data layer (partially because when we set up our tracking, the Adobe Client Data Layer wasn't a thing yet, and second, I am not a big fan of Event based data layers)..... We still use a custom data layer in our current system.

 

First and foremost, is your ReactJS set up to be an SPA (ReactJS can actually go either way, but I suspect SPA as this is more standard).

 

If it is an SPA (single page application), you are first and foremost going to need to detect when pages change... GA/GTM likes to use history change, but depending on your app, this may not work.. it might be too soon for you to read the content of the page and actually track it correctly.

 

I actually preferred to have our developers trigger a custom JS event called "pageChanged" or "pageLoaded", I also had them trigger this on the first page load (real load) so I didn't have to create multiple detections and prevent potential double tracking.... however, if you do decide to use the Adobe Event Based Data Layer, you could just have them set the event for page loaded in the data layer and detect / read the data layer events to tell you when to trigger the tracking.

 

Note, with SPAs and Event Based data layers, the longer a user is on the site, the larger the data layer will get (it will just keep growing), so you might want to build in some sort of purge / truncation to prevent the data layer from getting too large (our data layer overwrote on each "page load" so I didn't have to worry about that).

 

No matter which way you go, you will likely want some sort of data layer (either using the same data that the developers use to build the page, or a custom data layer curating the data that you need, or the Adobe Data Layer with curated data for the page), that you can read from and use to populate your tracking dimensions...

 

You can create Data Elements to read different pieces of the Data Layer, then however you are triggering the tracking (data layer event, custom js event, history change, etc) you can populate the Set Variables action with your Data Elements, then send your beacon.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

All our sites used to be coded in ReactJS (til we moved to a new vendor with a proprietary front-end code, there is still a potential that we may go back to ReactJS front end and only use the vendor's back-end... but that will be a ways off if it happens)..

 

However, Adobe can be used on any coding system, so long as you can set the data to the front end in some fashion that you can read it.

 

We used a custom data layer (partially because when we set up our tracking, the Adobe Client Data Layer wasn't a thing yet, and second, I am not a big fan of Event based data layers)..... We still use a custom data layer in our current system.

 

First and foremost, is your ReactJS set up to be an SPA (ReactJS can actually go either way, but I suspect SPA as this is more standard).

 

If it is an SPA (single page application), you are first and foremost going to need to detect when pages change... GA/GTM likes to use history change, but depending on your app, this may not work.. it might be too soon for you to read the content of the page and actually track it correctly.

 

I actually preferred to have our developers trigger a custom JS event called "pageChanged" or "pageLoaded", I also had them trigger this on the first page load (real load) so I didn't have to create multiple detections and prevent potential double tracking.... however, if you do decide to use the Adobe Event Based Data Layer, you could just have them set the event for page loaded in the data layer and detect / read the data layer events to tell you when to trigger the tracking.

 

Note, with SPAs and Event Based data layers, the longer a user is on the site, the larger the data layer will get (it will just keep growing), so you might want to build in some sort of purge / truncation to prevent the data layer from getting too large (our data layer overwrote on each "page load" so I didn't have to worry about that).

 

No matter which way you go, you will likely want some sort of data layer (either using the same data that the developers use to build the page, or a custom data layer curating the data that you need, or the Adobe Data Layer with curated data for the page), that you can read from and use to populate your tracking dimensions...

 

You can create Data Elements to read different pieces of the Data Layer, then however you are triggering the tracking (data layer event, custom js event, history change, etc) you can populate the Set Variables action with your Data Elements, then send your beacon.