Google tag manager - how does it work? (Architecture)

Question

I don't know if this is the right place to ask but it is programming (in a way). How does the Google tag manager work?

The way I see it:

1. page loads
2. GTM code loads and does it's thing _makes checks _creates dataLayer object _invokes gtm.js library (loads it whole in the browser) _pushes basic objects into dataLayer _"imports" tags, triggers and variables _attaches them to document nodes
3. any tags configured to fire on 'pageLoad' fire (push data into dataLayer)
4. DOM ready (any tags configured for 'DOM ready' fire)
5. window loads (any tags configured for 'windowLoaded' fire )
6. 'triggers' ('rules') wait attached to proper DOM nodes

User interacts with the document (page):

1. events occur
2. rules ('triggers') are evaluated
3. rules trigger tags
4. tags push events' info into dataLayer

How does this data from the dataLayer then get sent to Google Analytics, AdWords or other configured services? Which piece of code does this?

Is is possible that the tag that was responsible for pushing the event into the dataLayer also sends it to GA service? OR is there some other generic GA tag that picks up everything that was written into the DL and then sends it to the GA?

How do variables fit into this story? The way I see it it can be both written to a variable (a tag can store something into a pre-set up variable) or something can be pre-defined in a variable and used by the tag.

Thanks for any clariffication on this.

Answer 1

Tags are what send the data to analytics platform (GA or other). And the tag javascript snippet that talks to analytics platform resides within gtm.js

When we configure container through GTM UI, adequate tag (javascript code) gets added to gtm.js for your container. Every site owner who uses GTM gets a different gtm.js based on their configuration (that is the purpose of id parameter to gtm.js). Infact, https://www.googletagmanager.com/gtm.js will lead to 404.

You can try https://www.googletagmanager.com/gtm.js?id=YOUR_CONTAINER_ID as you add different tags and you can see different gtm.js files.

That's how tag management products achieve inserting code snippet within sites without needing any alterations to the actual site pages (beyond inserting the initial container tag related code, ofcourse).