Integrating Google Analytics with GWT (SPA) Application to capture the User Flow

[Ahamed]

down votefavorite

I am integrating my GWT application with Google analytics and even i am able to see the number of active user.But here my requirements are How to Capture the User Flow User facing difficulties while crawling into the application tracking ip address Since GWT application is single page, how to capture whole flow like how many times the user has clicked on each tab (need global event to capture) Note: i saw there are lot of threads which talks about GA How to integrate Google Analytics into GWT using the asynchronous script but didn't get my answer.

[Jens]

I guess you have to call the ga() functions yourself with the events you would like to track in your app.

Read the documentation of Google Analytics https://developers.google.com/analytics/devguides/collection/analyticsjs/

-- J.

[Ahamed]

Thanks Jen for your prompt reply...most of the points are clear but if you see the last point

• Since GWT application is single page, how to capture whole flow like how many times the user has clicked on each tab (need global event to capture)

our gwt application is single page i have lot of tabs and dashboard ,i want a global event which capture all the event with widget name.

is It possbile in GWT?

[Jens]

our gwt application is single page i have lot of tabs and dashboard ,i want a global event which capture all the event with widget name.

is It possbile in GWT?

You can globally listen for event previews using Event.addNativePreviewEvent() but that probably won't help you a lot as you will only see target elements of the underlying native browser event instead of widgets (browser doesn't know anything about widgets). Figuring out which widget belongs to any given element isn't really doable. What might be possible is to add custom attributes to, e.g. your tab, and once you have received a native preview event visit each parent of the target element until you find one having your custom attribute. Such an attribute could be data-tracking="page:my-page" or similar.

Otherwise you need a general abstraction of pages in your app. For example if you use GWT Places you could treat each PlaceChangeEvent (globally fired on the event bus) as a page view (using the place token as identification). If you only use GWTs History class and somehow generate history tokens on your own you can do the same by listening on the History using History.addValueChangeHandler(). 

If you don't have such a concepts in your app then you are probably out of luck and the only solution is to call the ga() method manually in each event handler (tab selections, anything that changes your "pages").

-- J.

[mohammed sameen]

Thanks jens..now my worry is if i add this global handler will it create performance issue?

 

Event.addNativePreviewHandler(new NativePreviewHandler() {

 public void onPreviewNativeEvent(final NativePreviewEvent event) {

   final int eventType = event.getTypeInt();

   switch (eventType) {

     case Event.ONMOUSEMOVE:

       //mouse tracking logic?

     System.out.println("mousemove clicked");

       break;

     case Event.ONCLICK:

    System.out.println("on clikc clicked"+Element.as(event.getNativeEvent().getEventTarget()).getAttribute("data-tracking"));

     

    googleAnalyticsTrackPageView(Element.as(event.getNativeEvent().getEventTarget()).getAttribute("data-tracking"));

     

       break;

     default:

       // not interested in other events

   }

 }

}); 

What is the best way to handle this?

[Jens]

Thanks jens..now my worry is if i add this global handler will it create performance issue?

Obviously all DOM events will now reach your event handlers a bit slower because JavaScript is single threaded and you execute additional code inside the event loop and before event handlers are triggered. It's likely not noticeable but that's up to you to decide. I don't know your app nor your performance requirements.

-- J.