REACT JS

GauravKDani
Bronze Contributor
Bronze Contributor GauravKDani

Hi Team, 

 

Can anybody help with REACT JS  tealium implementation. How to get started? 

 

Regards,
Gaurav Dani

9 REPLIES 9

REACT JS

Tealium Expert
Tealium Expert
Hello @GauravKDani

ASAIK, we're using Angular SPA for our application and Tealium does provides some implementation guide. I am not sure whether we have REACT js implementation. Interesting ques. Let us wait for others to answer on their practical knowledge.

Thanks!

REACT JS

Tealium Expert
Tealium Expert

Hey @GauravKDani

 

We have had a lot of success implementing Tealium into our React projects. We did a lot of trial and error, but what ended up working was leveraging utag.view and utag.link to control when and where we wanted to collect and act on data. 

 

Here is a high level process we follow

- Implement the standard tealium code into your project

- Everytime the content changes, call utag.view to track a full page view

- For button clicks and modal tracking use utag.link

 

It takes a little planning, but can still be a pretty quick implementation. 

 

Here is a great document that will help you get started. 

https://community.tealiumiq.com/t5/iQ-Tag-Management/AJAX-Tracking-in-Tealium/ta-p/14034

REACT JS

kathleen_jo
Employee Emeritus
kathleen_jo

Great stuff @JerTippets! Thank you for sharing! :-)

 

@GauravKDani Let us know how it goes. We are here to help.

Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.

REACT JS

Tealium Employee

We have a sample React environment at http://tealiumlabs.com/reactjs/bulletin-board.html.

 

The Home, Board, and Contact links at the top trigger a utag.view() method.

If you do a global source code search on utag.view you'll see within the "tracking" function how we handle new "view" events.

 

On the Board view, the management of each note (add, edit, save, and remove) will trigger a utag.link() method.

If you do a globalsource code search on utag.link you can see the edit, save, add, and remove functions to manage the notes.

 

You can add breakpoints within the 5 functions to see how the utag.view and utag.link work to track the dynamic nature of the SPA. This is the most basic example, but should give some guidance on how to setup Tealium for each event you want to track.

 

Cheers,

-Dan

Highlighted

REACT JS

PeterB
Rookie Contributor
PeterB

Hi @dan_george, do you have anyone using React Native for app development? Do you have a React Native SDK or a way of bridging to the native (iOS & Android) SDK's from React Native?

REACT JS

Tealium Employee
@PeterB React Native is on our roadmap. We are expecting to have something available within the next few months.
Check out our new Swift integration library for iOS, macOS, tvOS and watchOS: https://github.com/Tealium/tealium-swift with updated
documentation https://community.tealiumiq.com/t5/Swift/tkb-p/swift.

REACT JS

REACT JS

amyBrink
Rookie Contributor
amyBrink
Great example. But the URL has changed. http://react.tealiumdemo.com/#/

REACT JS

kodalka
Rookie Contributor
kodalka

React native and react js are two different entities, just FYI!