Adobe Experience Platform Data Collection

jorisdebeer · 8/19/21

Does Adobe provide a NPM package for adding Adobe Launch to a ReactJS web application?

Where can I find it?

If not, is there any clear documentation and guide for adding Adobe Launch and tracking pages and clicks for a ReactJS web application?

Alexis_Cazes_ · 10/28/21

For React application add the Adobe Launch script in the head of your html file, index.html I guess.

Adobe Launch will then load and you can use it in the same way as you would do with default implementation.

Some restriction are that page bottom is not really useful anymore unless it is something for first load of page and you are not even sure that it will be fired after the React content is available. Page top is only useful on first run.

You should implement a data layer on the page and it needs to contain an array on which you can evaluate if new event was pushed.

React also uses routes that do not reload the page so you need to figure out a way to know route changed, so you can use the data layer approach or one of this one that is listed in this answer: Re: Blazor Server - Adobe Experience League Community - 428045 . I know it is about Blazor Server the thread but my answer is based on experience that I have with React Apps.

Hope this helps.

View solution in original post

yuhuisg · 8/19/21

There are no special steps for any website framework. The implementation is almost always the same:

Define a data layer, preferably an event-driven one a la GTM's dataLayer.
Add the Launch <script> snippet in <head> in all pages. In your case, putting it in the index.js file should be sufficient.

If you're asking about best practices, though, then that's another topic, and depends entirely on how your website has been built. Launch's Core extension has some built in even triggers, e.g. history change, click, form submit, etc., so those might help you get going.

Alexis_Cazes_ · 10/28/21

For React application add the Adobe Launch script in the head of your html file, index.html I guess.

Adobe Launch will then load and you can use it in the same way as you would do with default implementation.

Some restriction are that page bottom is not really useful anymore unless it is something for first load of page and you are not even sure that it will be fired after the React content is available. Page top is only useful on first run.

You should implement a data layer on the page and it needs to contain an array on which you can evaluate if new event was pushed.

React also uses routes that do not reload the page so you need to figure out a way to know route changed, so you can use the data layer approach or one of this one that is listed in this answer: Re: Blazor Server - Adobe Experience League Community - 428045 . I know it is about Blazor Server the thread but my answer is based on experience that I have with React Apps.

Hope this helps.

Adobe Experience Platform Data Collection

Adobe Launch for ReactJS

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe