Google Tag Manager - how does it work? (Architecture)
I don't know if this is correct to ask, but this is programming (in a way). How does Google Tag Manager work?
How I see it:
- the page is loading
- GTM code is loaded and does this _makes check _ creates a dataLayer object _invokes gtm.js library (loads everything in the browser) _ supplies base objects to the dataLayer _ "import" tags, triggers and variables _ attaches them to document nodes
- any tags configured to fire "pageLoad" (data input to data file)
- DOM ready (any tags set up for "DOM ready")
- loads windows (any tags configured for fire "windowLoaded")
- "triggers" ("rules") are waiting to be attached to the corresponding DOM nodes
User interacts with document (page):
- events
- rules ("triggers") are evaluated
- tag trigger rules
- tags display information about events in the dataLayer
How is this data from DataLayer then sent to Google Analytics, AdWords, or other customized services? Which piece of code does this?
Is it possible that the tag that was responsible for pushing the event in the dataLayer also sends it to the GA service? OR is there some other generic GA tag that picks up whatever was written to DL and then sends it to GA?
How do variables fit into this story? The way I see it can either be written to a variable (the tag can store something in a pre-configured variable), or something can be pre-defined in a variable and used by the tag.
Thanks for any clarity on this matter.
source to share
This way you have everything basically the correct value, except for the "4: tags output information about events in the dataLayer".
Tags are what sends data to the data / analytics platform of your choice.
Most of the time you will use the "Universal Analytics" tag, which requires a UA code. The tag will automatically submit whatever data you want to use on your GA account. You can send the following
- Pageview
- Event
- Transaction
- Social
- Timing
- Decorate link
- Decorate the form
Each of these elements requires customization so that you can send different types of information. For example, when sending an event, you need to include the event category, event action, and event label.
How variables work, as you mentioned:
"something can be predefined in a variable and used by a tag
So, for example, the predefined GTM variable does not need to remove the filename from the download button. So I can create a variable myself and then refer to that variable when using triggers or tags. The actual variables are moved to the data layer, which can be found there when in preview mode.
Wrap it up. If you would like to track PDF downloads as an event, see this article. Look for my answer on the page and it should provide you with a more complete and applicable answer to your question.
Hopefully this gives you some clarification.
source to share
Tags are what sends data to the analytics platform (GA or other). And the javascript snippet of the tag that says on the analytics platform is inside gtm.js
When we set up a container through the GTM interface, a corresponding tag (javascript code) is added to gtm.js for your container. Every site owner who uses GTM gets a different gtm.js based on their configuration (this is the purpose of the id parameter for gtm.js). Infact, https://www.googletagmanager.com/gtm.js will result in 404.
You can try https://www.googletagmanager.com/gtm.js?id=YOUR_CONTAINER_ID as you are adding different tags and you can see different gtm.js files.
This is how tag management products achieve code snippet insertion on sites without any changes to the actual site pages (other than pasting the source code associated with the container tag, of course).
source to share