CODEWITHSUNDEEP
javascriptjquerygoogle-tag-manager
Vuk Stanković
Vuk Stanković

Reputation: 7964

Load Google Tag Manager via javascript

I have a site with submit form that consists of 4 steps. User moves from step to step via JavaScript sort of like this: 

<div id="step1">

</div>
<div id="step2">

</div>
<div id="step3">

</div>
<div id="step4">

</div>

Steps 2,3,4 are hidden initially. When user goes to step 2, step 1 is hidden, and step 2 is shown.

Problem is, I need to load Google Tag Manager code on step 2. But if I just paste Tag Manager code on page at <head> tag, it will get loaded on any step which is not good for me.

So is there a way to load Tag manager only on step 2, or just not load it at step 1.

Code looks like this 

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id="
                  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
        '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','');</script>
<!-- End Google Tag Manager -->

Upvotes: 0

Views: 3981

Answers (1)

dmpg_tom
dmpg_tom

Reputation: 855

In order to achieve your desired functionality, you need to adjust your thinking around how to utilise Google Tag Manager:

  1. You should load Google Tag Manager on every page, regardless of whether you want any tags to load immediately, later on or never.
  2. You should always place the GTM loading script immediately after the opening <body> tag
  3. You should setup the correct firing rules on tags to ensure that they load or do not load on any given page.
  4. You should push custom events to the dataLayer to trigger tags at the moment you need the tag to fire.

So, in your case, here's the steps you need to take:

  1. you should place the GTM script directly on the page so that the GTM container loads. Place it just after the opening <body> tag.
  2. If you have any tags fired on 'all pages' you should adjust this trigger so that it excludes this particular page, therefore no tags will fire when this page loads.
  3. When the user is on 'step 2' you should programmtically push a custom event to the dataLayer (which allows you to create a trigger off of it). e.g. dataLayer.push({'event':'step_2'});
  4. Create a trigger of type 'custom event' with the value for the event 'step_2'
  5. Apply this new trigger to the tags that you want to fire when the user is on step 2.
  6. Utilise the GTM preview mode console and you'll see the custom event in the event list

If you want to extend the way you use custom events and the dataLayer, you can always push data items in at the same time as the event, you can then use this data in any tags that fire on the custom event (and subsequently). Thus you may want to fire a tag including the user's company name (if you're collecting such data for example).

dataLayer.push('{
  'event':'step_2',
  'company_name':'ACME Inc'
});

To leverage the company name you'd need to set up a variable of type 'data layer' and value 'company_name' but then you can use it in a tag like this: {{company_name}}

Upvotes: 4

Related Questions