{"id":3166,"date":"2011-02-28T14:05:23","date_gmt":"2011-02-28T08:35:23","guid":{"rendered":"https:\/\/2thenew.today\/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:\/\/2thenew.today\/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":"

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<\/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

[javascript]
\n<script type="text\/javascript">
\n try {
\n var pageTracker = _gat._getTracker("<ANALYTICS-KEY>");
\n pageTracker._trackPageview("\/enterDetails.html");
\n } catch(err) {
\n }
\n<\/script>
\n[\/javascript]<\/p>\n

Replacing “\/enterDetails.html” 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

In this, we had to use Virtual Page Tracking, which is a method explained in the Google Analytics API Docs<\/a> under the section, Virtual Page Views. We had to write something like<\/p>\n

[javascript]<\/p>\n

<script type="text\/javascript">
\nvar _gaq = _gaq || [];
\n_gaq.push([‘_setAccount’, ‘ANALYTICS-KEY’]);
\n_gaq.push([‘_trackPageview’, ‘\/enterDetails.html’]);
\n(function() {
\n var ga = document.createElement(‘script’); ga.type = ‘text\/javascript’; ga.async = true;
\n ga.src = (‘https:’ == document.location.protocol ? ‘https:\/\/ssl’ : ‘http:\/\/www’) + ‘.google-analytics.com\/ga.js’;
\n var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
\n})();
\n<\/script>
\n[\/javascript]<\/p>\n

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

Hope this helps.<\/p>\n

Vivek<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":7,"footnotes":""},"categories":[1],"tags":[171,55],"class_list":["post-3166","post","type-post","status-publish","format-standard","hentry","category-technology","tag-google-analytics","tag-javascript"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t