{"id":3166,"date":"2011-02-28T14:05:23","date_gmt":"2011-02-28T08:35:23","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=3166"},"modified":"2016-12-19T15:04:08","modified_gmt":"2016-12-19T09:34:08","slug":"using-google-analytics-for-tracking-multiple-steps-of-a-webflow","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/using-google-analytics-for-tracking-multiple-steps-of-a-webflow\/","title":{"rendered":"Using Google Analytics for tracking Multiple Steps of a Webflow"},"content":{"rendered":"<p>In one of our projects, we are using a webflow for an order wizard. We needed to track the number of users converting a draft to a confirmed order <a href=\"http:\/\/www.tothenew.com\/blog\/click-event-tracking-using-google-tag-manager-v2\/\" target=\"_blank\">using Google Analytics<\/a>. This would have been simple if the URLs were different for each step. However, that is not the way webflows work and a similar URL is generated for multiple steps. After some searching around, we found that we could call a trackPageView method in Google Analytics API and set a name for the page being tracked. This could be done using<\/p>\n<p>[javascript]<br \/>\n&lt;script type=&quot;text\/javascript&quot;&gt;<br \/>\n    try {<br \/>\n        var pageTracker = _gat._getTracker(&quot;&lt;ANALYTICS-KEY&gt;&quot;);<br \/>\n        pageTracker._trackPageview(&quot;\/enterDetails.html&quot;);<br \/>\n    } catch(err) {<br \/>\n    }<br \/>\n&lt;\/script&gt;<br \/>\n[\/javascript]<\/p>\n<p>Replacing &#8220;\/enterDetails.html&#8221; in each page with the corresponding step name did the trick. However, this is an old version of the Google Analytics API. Our application uses a newer version of the JavaScript code provided by Google.<\/p>\n<p>In this, we had to use Virtual Page Tracking, which is a method explained in the <a href=\"http:\/\/code.google.com\/apis\/analytics\/docs\/tracking\/asyncMigrationExamples.html\" target=\"_blank\">Google Analytics API Docs<\/a> under the section, Virtual Page Views. We had to write something like<\/p>\n<p>[javascript]<\/p>\n<p>&lt;script type=&quot;text\/javascript&quot;&gt;<br \/>\nvar _gaq = _gaq || [];<br \/>\n_gaq.push([&#8216;_setAccount&#8217;, &#8216;ANALYTICS-KEY&#8217;]);<br \/>\n_gaq.push([&#8216;_trackPageview&#8217;, &#8216;\/enterDetails.html&#8217;]);<br \/>\n(function() {<br \/>\n    var ga = document.createElement(&#8216;script&#8217;); ga.type = &#8216;text\/javascript&#8217;; ga.async = true;<br \/>\n    ga.src = (&#8216;https:&#8217; == document.location.protocol ? &#8216;https:\/\/ssl&#8217; : &#8216;http:\/\/www&#8217;) + &#8216;.google-analytics.com\/ga.js&#8217;;<br \/>\n    var s = document.getElementsByTagName(&#8216;script&#8217;)[0]; s.parentNode.insertBefore(ga, s);<br \/>\n})();<br \/>\n&lt;\/script&gt;<br \/>\n[\/javascript]<\/p>\n<p>For usage on grails, we used a template, which takes in the pageName and uses \/${controllerName}\/${actionName}\/${pageName} to \u00a0generate the virtual page name which is tracked. Now we are successfully tracking the conversions.<\/p>\n<p>Hope this helps.<\/p>\n<p>Vivek<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In one of our projects, we are using a webflow for an order wizard. We needed to track the number of users converting a draft to a confirmed order using Google Analytics. This would have been simple if the URLs were different for each step. However, that is not the way webflows work and a [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[1],"tags":[171,55],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/3166"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=3166"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/3166\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=3166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=3166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=3166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}