0

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 -->
Improve this question
3
  • Assign all the tag manager code to a string variable and then append the string to head using jQuery, when step 2 is shown. Commented Oct 31, 2015 at 18:40
  • Will it load properly this way? Commented Oct 31, 2015 at 18:42
  • you can use mutation to update every change in dom. Commented Oct 31, 2015 at 18:45

1 Answer 1

Reset to default
4

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}}

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.