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.
We have a sample React environment at http://react.tealiumdemo.com/.
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.
In case you hadn't found it since.