Best Use Case for Google Analytics in WAB?

[BrianO_keefe]

So I want to have Google Analytics for my WAB Maps. I realize this is a MUCH better environment for this than back in Flex (where you had to have widgets and such to do this) but I am curious what the best way to do this would be?

I have considered creating a WAB Template map that has Google Analytics code pre-populated requiring minor adjustments. I have considered trying my hand at a Widget (for several reasons). I have considered just editing the code once the WAB Map is completed.

Is there a recommended process for this? Or are we wild westing this stuff right now since WAB is still in BETA?

[Raul_Jimenez]

Great, thanks Ian & Stan!,

Stan is right, you just need to rename the folder (it's working for me too). I'm also interested on tracking when a user open or close a widget. Is it possible to subscribe to "onOpen" and "onClose" and/or "click" events of every widget from this one?.

I have found a list of widget loaded in memory in this variable: this._widgetManager.loaded, but I'm not sure how to do this, conceptually it would be something like this:

define([
  "dojo/on"
], function(on){
  this._widgetManager.loaded.foreach(function(widget){
    on(widget.domNode, "onOpen", lang.hitch(this, function (event) {
      ga('send', 'event', event.name, 'open', widget.name, ...);    
    }));
    // and so on for every event
  }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Does this make sense?

By the way, I have included this widget to the "Web AppBuilder for ArcGIS - Custom widgets directory" where you can see a demo app with the widget working:

Thanks in advance!

[Raul_Jimenez]

I guess this is not the most elegant way of doing it, but I'm trying modifing the window._widgetManager directly, something like this:

this.oldOpenWidget = window._widgetManager.openWidget;
var that = this;

window._widgetManager.openWidget = function(widget){
   ga('send', 'event', 'Widget Interaction', 'openWidget', widget.name);
   that.oldOpenWidget.apply(this, arguments);
   lang.hitch(this, that.oldOpenWidget);
};‍‍‍‍‍‍‍‍

[Raul_Jimenez]

Jianxia Song‌ / Lemao Wu‌ do you have a better idea?

Thanks!

[JunshanLiu]

The easiest way is to modify the code in stemapp and jimu.js. If you don't want to change code in jimu so that you can upgrade easily, here is a recommendation:

* Create a off-panel widget, without UI

* Config this widget in on-screen

* In the widget, you can:

    * Load the GA lib

    * Use aspect.after() to bind some functions in widgetManager, such as:

        aspect.after(this.widgetManager, 'openWidget', function(){

             GA....

        })

[Raul_Jimenez]

Thanks junshan_liu-esristaff‌!! I'll try using aspect.after() then