Let's start off with setting up a Google Tag Manager account for your application:
- Sign in to Google Tag Manager at GoogleTagManager.com
- Add a new account with a Web container, as follows:
Google Tag Manager
- Paste the generated scripts at or near the top <head> and <body> sections of your index.html as instructed:
src/index.html
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-56D4F6K');</script>
<!-- End Google Tag Manager -->
...
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-56D4F6K"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<app-root></app-root>
</body>
Note that the <noscript> tag will only execute if the user has disabled JavaScript execution in their browser. This way, we can collect metrics from such users, rather than being blind to their presence.
- Submit and publish your tag manager container
- You should see the initial setup of your tag manager completed, as shown:
Published Tag
- Verify that your Angular app runs without any errors.
Note that if you don't publish your tag manager container, you will see a 404 error in loading gtm.js in the dev console or the Network tab.