Migrating from GA to GTM - which tracking codes are needed?

Question

I'm not sure which tracking codes are needed to get both Google Analytics (GA) and Google Tag Manager (GTM) to work. I'm currently using the following script with GA ->

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

Now that I'm setting up GTM, it is asking me to add the following tracking codes as well ->

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


<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Do I need all these snippets? It would be important to be able to both set up event tracking and not lose any previous GA data.

Answer 1

Technically you are migrating from gtag.js to GTM (GTM is a tag manager, and while it can be used to deploy GA by itself it tracks nothing).

If you want to integrate Google Analytics via GTM then the second snippet in your post is the replacement for the first, not an addition. You need the second snippet, then you configure GTM to deploy Google Analytics to your page. For most use cases you do not even need the noscript tag (unless you specifically configure tags that run in noscript mode).

For you debounce-event you can use a timeout to push an event to the datalayer and then use it to trigger a Google Analytics Event. You can do this either somewhere in your page code, or in a custom HTML tag that is triggered on a Pageview (or DOM ready) event.

setTimeout(dataLayer.push({'event':'deBounce'}),20000);

Then you create a trigger of the "Custom Event" type an in the field "event name" you enter "debounce" (without the quotes). You then use that trigger to fire a Google Analytics tag that is set to event tracking in GTM (you notice already that this is not really simpler than gtag.js, but it allows you to control also non-Google tags so it's probably worth the effort).

The "Event" key is special in the dataLayer object - Google overwrites the native push-method in the datalayer array to listen for object keys called "event". Whenever it hits an "event" key it updates all internal variable from the dataLayer (this adds all newly pushed values) and then allows to fire tag.