Implementing GA properly for Single Page App w/ Tealium?

Bronze Contributor
Bronze Contributor

We've got an ecommerce site that we're trying to transition to Angular SPA design, however we're still struggling to get GA properly implemented on it. I've got a few specific questions about some scenarios.


1. Pageviews -- my understanding is that we should use the standard utag.view() command. I also understand that we're supposed to declare the following before utag.js loads:

window.utag_cfg_ovrd = {noview : true}; 

I believe we have done this properly, however I'm a bit confused about how to properly set the page URL for GA's pageview. How is this supposed to be done, and in what order? We started off by calling utag.view() and then runnig ga.send("page","pathnameGoesHere") as a post-pageview override. I feel like this not the right way to do this, but am unsure.


2. Transactions -- again, my understanding is that we should call utag.view() on the page, but that we pass in the ecommerce variables in like order_id when firing utag.view(). We have successfully done this and see the transaction go through, but in GA the Page dimension reported on the transaction does not match the "location" under SPA --- instead, it seems to pull the root pathname of where the user starts under SPA -- 4 pages ago. If we reload the confirmation page, a duplicate transaction fires except with the correct location. This is baffling.

3. Transactions' tealium_event --- building off #2, to confirm -- we should be setting tealium_event = purchase when passing the utag.view command, correct?


Any help would be greatly appreciated -- the documentation on the little details and specifics are really lacking in both GA and Tealium guides, so we're more or less trial-and-error'ing this thing currently.


Implementing GA properly for Single Page App w/ Tealium?

Gold Contributor
Gold Contributor

Try this for PageViews:


First push variables into utag_data. Use a variable with your virtual page name like:

virtual_page: /us/checkout/step1

Then configure in Google Analytics tag and map virtual_page variable to the destination -> page.


1. set var utag_data with variables

2. window.utag_cfg_ovrd = {noview : true}; 

3. call utag.view()

4. Google Analytics will fire and virtual page variable will override page