Confusion over Analytics and Tag Manager JavaScript snippets

I have pasted the following code in the <head> section of all of my pages to connect to Google Analytics:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-*********-*"></script>

<!-- Google Analytics -->
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'UA-*********-*');
</script>
<!-- End Google Analytics -->

I have seen this article which talks about upgrading from Analytics.js to gtag.jas. I believe I am already using the new version so I believe I don't need to do any updates...

At the same time, I have created a Google Tag Manager account and created a Tag for my Google Analytics. The Tag Manager asks me to add the following code to my <head> and <body>

<!-- 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', 'G**-*******');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=G**-*******"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

Question

What is the difference between former and latter .js snippets? Do I need to include both of them on my page or either one would do the job?

At the moment, I am only using the former code and my Google analytics is working fine... I am just confuse what is the purpose of Tag Manager snippet and if I need to include it in my code?

Solution

The first one is the global site tag (gtag.js). It uses similar infrastructure, hence the reference to https://www.googletagmanager.com. However it works only with Google Tags, and you configure them in code, not in the Web UI. Good if you only have Analytics and Google Ads, and do not change your setup too often.

The second snippet is for the Google Tag Manager (GTM), a Google tool that offers a user interface to deploy and remove tracking tags via a web interface (usually they are bundled into a Javascript file that is then injected into the page). A little more overhead (both in page performance and in the learning curve required), but if your tracking requirements change often you can make all necessary changes without touching code or redeploying your site. GTM also offers a few different container types, e.g. for AMP pages (that do not run gtag), or server side tag management.