How to create datalayer,track events etc in React.js or Next.js website?

[Luca_Lattarini]

Hello guys,

I need to track NEXT.JS and React.js webste and send data into AEP CDP. Anyone can suggest how to initiliaze datalayer and track event? Now I am considering to simply use Adobe Launch that sends data to edge but i am ok with web sdk aep as well without using adobe launch.

Thanks

[PratheepArunRaj]

Dear @Luca_Lattarini ,

I am not a developer to comment on how to initialize Data Layer & dispatch Events from Next.js or React.js and I am sure that it is not platform dependent.

However, to send the data to the Adobe Experience Platform, one of the easiest ways is to use (i) AEP WEB SDK through Adobe Launch.

If not, you can directly ingest the data using (ii) streaming 'HTTP API' (link) and there is no coercion to use Adobe Launch.

Thank You, Pratheep Arun Raj B (Arun) | NextRow Digital | Terryn Winter Analytics

[Luca_Lattarini]

Hello Pratheep,

Thanks for your answer.

Basically I am thinking to use Adobe Data Client Layer installed in Adobe Launch. This Layer will catch all events from NEXT.js and send it to AEP.. 

Regarding how to initialize data layer, i found that just to installed ADCL plugin in Adobe launch. Now my issue is to push event into the Adobe Data Layer.

Yes, try to inject directly to AEP via HTTP API Streaming it is another possible way.

Thanks

[PratheepArunRaj]

Dear  Luca_Lattarini,

Pushing Events into the Data Layer has to be done from Next.js or React.js i.e. Content Side.

Defaults events like Page Load, DOM Ready, and Window Loaded are captured by Launch, however, Adobe Client Data Layer Events have to be dispatched from the Content Side.

Any content developer can help you regarding the same. Or wait for a developer to give you some ideas on the implementation.

Thank You, Pratheep Arun Raj B (Arun) | NextRow Digital | Terryn Winter Analytics

[Anil_Umachigi]

@Luca_Lattarini 

RIght so with React ( or any single page app), here's some basic steps to get started. 

1. Have developer implement a data layer, create a spec based on event requirement .. An example
   1. on load --> push default data 
   2. on view change ( product page, cart, checkout events etc) --> push event specific data 
2. Next ensure the Launch is installed 
3. Create rules in launch to listen to the events with Adobe data layer extension
4. Trigger Web SDK event

Alternate approach is to use Server side tracking within the App to directly send data server side

Hope that helps 

[Luca_Lattarini]

Hello @Anil_Umachigi,

Yes, I did as you mentioned, even if it is not so immediate to track page, cart, checkout etc and I am able to catch events in Adobe Launch. 

What about server side tracking? Do you mean AEP via HTTP API Streaming ? 

Thanks

[Anil_Umachigi · Accepted solution]

@Luca_Lattarini Yes that's one option or you could use the server to server API available. 

I just published a post on AEP data collection, this will hopefully help you understand how it is all set up. 

Checkout the sever to server option for your use case.