Combining Google Analytics (gtag.js) and Google Tag Manager (gtm.js)

Question

Google Analytics new migration to "Global site tag" using Google Tag manager confuses me a lot. It is Tag Manager, but it's not!?

The regular Google Tag Manager integration looks like this:

<!-- 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-XXXXXXX');
</script>

And the Google Analytics Global site tag integration like this:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXXXX-X');
</script>

They load different resources. But both initiate the dataLayer push method. The way the object is created differs (supposing the two ways are interchangeable). Are we supposed to use both integrations side by side although the dataLayer object in one implementation conflicts the other?

On a side note. Both resources are bundled with jQuery 1.9.1. While it can't be optimal to load and instantiate jQuery twice, (or thrice if we have our own jQuery on top of this). Are there any workarounds or recommendations?

Answer 1

From the gtag.js Developer Guide:

If you are already using Tag Manager, you should continue to do so. If you don't need a tag management system, it is fine to use the gtag.js tracking codes provided by each product.

Tag Manager and gtag.js are built on the same infrastructure, and should work properly if deployed on the same page.

The Global Site Tag (gtag.js) is a new way of using analytics.js together with other Google products like AdWords or DoubleClick.
In fact, gtag.js loads up the same old analytics.js next to other libraries depending on what services you configure. In case you configure it with an AdWords account with gtag('config', 'AW-XXXXXXXX-X');, the script will automatically load up conversions.js too. Moreover, gtag.js also does some basic initialization of the services, e.g. triggers a pageview hit for Analytics or a remarketing hit for AdWords.

That being said, it is a bit like a tag manager indeed. However, it works only with Google products. So it is more of a simplification of configuration of the various Google tags by wrapping all of them into a single one.

It is important to note that if you are setting up a new Analytics account, you get the tracking code in the Global Site Tag format! You have no choice.

On the other hand, Google Tag Manager, like most tag management systems, enables you to manage tags beyond the Google suite of products. It comes with a user interface, version control, access management and all the other fancy things. Like analytics.js was, gtag.js is just another JavaScript library with which Tag Manager can communicate.