How does `gtm.start` (Google tag manager) event work in multi-page and single-page hybrid applications?

Acronyms used:

• GTM = google tag manager
• MPA = multipage application
• SPA = single page application (React)

Planned app structure:

• The MPA is initializing GTM and the data layer and sending the gmt.start event for every page load (ie when the user navigates)
• The SPA is an independent page in a subpath of the main site and it will initialize: GTM via <script src={ https://www.googletagmanager.com/gtm.js id=${ GOOGLE_TAG_MANAGER_ID } } async /> and the data layer, as well as manually sending the gtm.start event via dataLayer.push
• Both the MPA and SPA share the same GTM container id.
• As far as I understand, on every page load (whether it's a MPA page, or the SPA) the data layer needs to be re-initialized (because it will be erased by the page load)

I don't have fully clear what is the impact of calling gtm.start multiple times (once for every page in the MPA, and once for the SPA)?

In other words, how does gtm.start work exactly? In the outlined set up, every page load will recreate the data layer and send gtm.start (this happens every time the user navigates the MPA pages + once in the SPA on page load). Is this the correct way to do it or will it confuse GTM tracking?

On the other hand, I have clear I need to manage page views differently between MPA and SPA - that is not my question.

How does gtm.start work exactly?

gtm.start is a key inside gtm.js event. gtm.js gtm.js is the first event that gets pushed into the dataLayer which suggests that the GTM container snippet rendered in the page successfully.

gtm.start contains a timestamp that represents the point in time your GTM container script started loading.If you look at the container snippet, you can actually see how gtm.start is pushed. The image added at the end

[read more here]

QQ: As far as I understand, on every page load (whether it's a MPA page, or the SPA) the data layer needs to be re-initialized (because it will be erased by the page load)

The container snippet tackles it automatically and you don't have to reinitialize dataLayer manually anywhere. Just make sure the container snippet is added on all pages.

For SPA, the dataLayer is preserved and history change is added as an event whenever there is a page change.

In the outlined set up, every page load will recreate the data layer and send gtm.start (this happens every time the user navigates the MPA pages + once in the SPA on page load). Is this the correct way to do it or will it confuse GTM tracking?

Yes, this is the correct way, again, you don't have to manually do anything, just place the container snippets on all pages and you are done.