Setup Google Analytics with Google Tag Manager and Angular
HTML-код
- Опубликовано: 6 сен 2024
- Learn about setting up and configuring Analytics using the recommended Google Tag Manager (GTM) library in an Angular Application.
Writeup and tutorial here:
fluin.io/blog/...
thanks for this video. however, you did not complete it. after you finished setting up on your code why didnt confirm if the page view were actually sent to google analytics?
What if you are a multi tenant system, and we want to see tracking per tenant of our system. Is there a way to inject our tenantId into the equation so we can see tracking by Tenant?
Very nice tutorial, quick, easy and very thorough. Great job!
Thanks, Stephen this is still relevant.
Hi. Thanks for the Video. I tried it with an GTM Account (Tracking-ID GTM-XXXXXXX). The Pageview works fine, but i can't get any Events like click or custom Events. Do you have any advices? I tried it with angulartics2
When we are trying to implement GTM (Google Tag Manager) code in our Angular Universal application, we are facing following challenges:
The tag changes include some JQuery parameters/fields which are not working in Angular and giving us errors and those errors are running in infinite loop. The error is related to $ not defined. As per the requirements we are not allowed to use JQuery library.
In the tag changes throwing us error related not supporting items in .
please help me out
Is there any benefit to setting GTM to listen to router change events VS using GTM's History change trigger? Currently, this is how we have implemented GTM with our Angular app and I particularly like it since we didn't have to add any extra code or router subscriptions to track our analytics.
Yeah, I would like to know this too. Is there any benefit for this?
I'm not a GTM expert, but I believe Analytics uses GTM's GTAG JS SDK now in the recommended way to track events, but you don't have to have GTM setup to use it this way. if you are already using GTM and have it setup, the server side creation of a History Change trigger will work just fine, but give you less fine grained control over events.
@@DigitalFluency Awesome! Thanks!
Super useful stuff Steven, thanks for posting this. Exactly what I need to implement at work. Clear explanation! :)
That's AWESOME!!!!! Quick and too the point!! Nice work!!
How comes this does not work in production, when I build it with ./gradlew? If I run the "npm start" it does work but thats kinda useless since I need this in production.
Happy new Year and welcome back! Looking forward to 2019 and your upcoming videos :)
Thanks Stephen...This channel should have 500k subscribers already 😍
Why do you remove it from index.html and have it just trigger on navigationEnd?.. what is the benefit of having it triggered "manually".. if you leave it in index.html you should not need to bother with it right?
You made it so easy. Thanks a lot!
Great video I can't wait to hook it up on my site
thank you so much brother , really amazing and effective explanation
What will happen if I speed browse things ? That is quickly move from about to home, in my case it batched the two requests, but only the last one was seen in the realtime tab. Any idea what could have gone wrong
wow nice, every navigation sends to googleanalytics now. And thanks for a good explanation.
Hi, men. What happens if you have a hash in the url?
Why not store all the project keys in the environment variables?
Very nice but, how can I add personalized events? example a click somewhere or somethig else? thanks in advance
Thanks s lot! That worked great. Your solution really made my day!
Hi sir,
please try to make make videos on bootstrap basics like register forms , carousels , ecommerce website.....please sir u the best explainer comparing to any other one i have seen in the youtube.....please start bootstrap also as quickly as possible sir......i hope it'll help many students like me..
good day I have problems when I use traffic sources (advertising) since it does not associate the events with the traffic source, if it does not add them to the general gtm, any recommendation
Brilliant. How about an example where there are form controls in a page and I want to track what form controls users visited?
This was awesome! Thanks Stephen.
Awesome!! Thank you very much for this one!
Hi this is very informative. but i want to track event with google analytics plz share a video if it have?
short and nice, appreciated :)
omg u save my life ty so much
but if i want make each page have private analysis can i do that ?
Nice tutorial. how do you send custom events? Like if you want to track a specific function on a component?
gtag('event', 'login');
great and super usefull
Thank you
Not too shabby SF! 👍
That's nice, but how would you add the GTM script for multiple environments (prod/staging) with different container ids?
I'd use the environments file and store the ID there.
@@DigitalFluency yes, but the script link contains the ID param. And I think it's not possible to use env variables inside index.html
I think I misread the question. You can inject the script yourself at runtime. This may break universal builds FYI.
const script = document.createElement('script');
script.async = true;
script.src = 'www.googletagmanager.com/gtag/js?id=' + environment.code;
document.head.prepend(script);
@@DigitalFluency I tried this but it is not working. It is very strange that angular is developed by google and there no direct way of handling google tag manager in angular. This is very common scenario to inject multiple container Ids for different environments. Not able to dynamically inject container id for each environment.
ERROR en src / app / app.component.ts (25,7): error TS2304: No se puede encontrar el nombre 'gtag'.plis any solutions
ruclips.net/video/3Bx8BU3wxaA/видео.html
thx so much, this help me
Awesome!!...thak you!!
Your typing destroyed my confidence :)
HAHAH LOL... me too 🤣
Thank you so much :)
Sans aucune hésitation on applaudit !
СПАСИБО
You very helped me
do one with facebook pixel and its events please
Thanks