Google Tag Manager, Enhanced Ecommerce Tracking and Single Page App

Question

Since there is not much to find about the combination of those three, here is my question:

When a user comes onto the app page, only the first page will be tracked as a pageview, unless you fire tags upon the history change trigger of GTM (automatic) or you send a pageview event for the particular page (manual tracking).

Frequently, SPAs are embedded into traditional round trip pages, so the GTM snippets sits in the head tag, whereas the ecom snippets are placed inside the app.

Lacking of a reload when the user enters the next page in the app, the DL snippet in the head tag is either overwritten or might be appended with new Information.

That creates two questions:

1. Fundamentally: I can just push DL info from inside the app into a GTM snippet placed in a header on a round trip page?
2. Shouldn't I clean up the DL after every new page view inside the app?

I would very much appreciate an answer to this!

Answer 1

1. Yes you should be able to use dataLayer.push within the app. The thing to note is that you don't have to have the GA tag within GTM trigger on the pageview, you could very well set a "SPA-screen-view" event and push that to the dataLayer to trigger a GA tag.

2. You don't need to clear the datalayer after every pageview. Just keep track of the variables you're pushing and capturing. It is very similar in concept as state in ReactJS

Example:

Say on one spa-pageview you sent: {'page-title':'my awesome spa page 1', 'page-url':'/vpv/myapp/page1','event':'SPA-screen-view'} and on a subsequent page you did only {'page-url':'/vpv/myapp/page1','event':'SPA-screen-view'}, but in the GA tag you're capturing both 'page-title' and 'page-url', the second page will have 'page-title':'my awesome spa page 1', since it wasn't updated.