How to create a funnel to track single form completion via Google Tag Manager.

What we will achieve?

Create a visualized goal funnel for the completion of each step through a single form filling process.

Use cases?

  • Suppose your website has a long form and you want to check on which field users are getting dropped. For example, in the below form on which step users are getting dropped.

  • Suppose your form has multiple steps and you want to track on which step users are getting dropped.

How we can achieve this?

We will be using the virtual pageview feature of Google Analytics.

How to implement this?

There are 2 ways to achieve this, by using GTM and by using Google Analytics code.

Steps using the GTM:

  1. Place the data layer event code on all the required steps. Your developer needs to make sure your data layer event code only fires on the steps required.
  2. In the GTM create a dataLayer variable
  3. In the GTM create a pageview tag, set the page in a field to set as step data layer variable (as per the code shared by me).
  4. Create an event trigger (event name should be the one passed in a data layer. In my code it will be vpvEvent) to fire an above tag.

DataLayer code: Your developer needs to fire this code on each step or field as per the requirement.

dataLayer.push({
‘event’ : ‘vpvEvent’,

‘step’ : ‘step1’  // for each step change the step name or pass fieldname
});

After placing the above code, you will need to perform the steps shown in the below video:

 

Steps using the Google Analytics Code:

Using Universal Analytics code:

  1. Pass dynamic page value as step 1, 2, etc.

<!– Google Analytics –>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXX-Y’, ‘auto’);
ga(‘send’, { ‘hitType’: ‘pageview’, ‘page’: ‘/step1’, ‘title’: ‘Home Loan Form | Step 1’ }); or  pass fieldname

</script>
<!– End Google Analytics –>

Using Gtag Code:

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”//www.googletagmanager.com/gtag/js?id=UA-86341865-1″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘UA-863418XX – 1’, {
‘page_title’ : ‘Home Loan Form | Step 1‘, or  pass fieldname
‘page_path’: ‘/step1‘ or  pass fieldname
});
</script>

After performing the above steps you can create a destination goal and see the funnel.

Summary

The virtual page view is a very useful feature which can be utilized to track and create a funnel in various situation. The virtual page view is the same as a page view, but instead of sending the current page URL, we send dynamic values as per our need. This dynamic value will get populated in the Google Analytics page report.

The same content I have used on the Google Analytics community here to help a user.

Please follow and like us:
569

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

www.000webhost.com