How to create datalayer,track events etc in React.js or Next.js website? | Adobe Higher Education
Skip to main content
Luca_Lattarini
Luca_Lattarini
Level 9
May 13, 2023
Beantwortet

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

  • May 13, 2023
  • 2 Antworten
  • 6058 Ansichten

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

Dieses Thema wurde für Antworten geschlossen.
Beste Antwort von Anil_Umachigi

@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. 

2 Antworten

PratheepArunRaj
Community Advisor and Adobe Champion
PratheepArunRajCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
May 14, 2023

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

Thank You, Pratheep Arun Raj B (Arun) | Xerago | Terryn Winter Analytics
Luca_Lattarini
Luca_LattariniAutor
Level 9
May 15, 2023

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
Community Advisor and Adobe Champion
PratheepArunRajCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
May 15, 2023

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

Thank You, Pratheep Arun Raj B (Arun) | Xerago | Terryn Winter Analytics
Anil_Umachigi
Adobe Employee
Anil_UmachigiAdobe Employee
Adobe Employee
May 16, 2023

@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
Luca_LattariniAutor
Level 9
May 16, 2023

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
Adobe Employee
Anil_UmachigiAdobe EmployeeAntwort
Adobe Employee
May 18, 2023

@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. 

    Allgemeine NutzungsbedingungenAccessibility statement

    Loading footer...