Using analytics within sencha

[simondavies]

I knwo I can place my Google Analytics code within the main html page, but is there a way in which I can get further detaield reports as into which view I am currently in etc

[simondavies]

Well looking through most of my code I have manged to add analytics to both my list and nestedlist views.

Within the index page I placed the usual analytics code:

Then at the top of each seperate view js file i placed the following

if(typeof(_gat) !== 'undefined') {
        var pageTracker = _gat._getTracker("UA-????????????");
        pageTracker._initData();
    }

I simply added the code below to the listeners itemtap method for a normal list as below:

listeners: {
            itemtap: function (list, index, element, event) {
                var record = this.store.getAt(index);
                thDetailPanel.update(record.data);
                App.viewport.setActiveItem(thDetailPanel, {type: 'slide', direction: 'left'});
                var listObj = this;
                   setTimeout(function(){listObj.deselect(index,true)},1000);
                var pageLoc = record.data.theatre.replace(/\s+/g, "");
                pageLoc = pageLoc.replace("&", "");
                pageLoc = pageLoc.replace("'", "");
                try{
                    if( pageTracker ){
                        pageTracker._trackEvent('Mobile', pageLoc);
                    }
                }catch(e){}
            }

The first couple of 'pageLoc' simply gets the page / list title adn then I screen it to remove any unwanted characters and spaces, before I then add it to the tracking event.

For the nested list I simply added it to 'getDetailCard' method just before the return.

getDetailCard: function(item, parent) {
       var itemData = item.attributes.record.data,
        parentData = parent.attributes.record.data,
    detailCard = new Ext.Panel({
                        id: 'thdetailpanel',
                        scroll: 'vertical',
                        styleHtmlContent: true,
                        tpl: App.views.groupsPageTpl,
                        layout: 'card',
                        style: 'background: #fff',
        });
        detailCard.update(itemData);
        var pageLoc = parentData.title.replace(/\s+/g, "") + '/' + itemData.title.replace(/\s+/g, "");
        pageLoc = pageLoc.replace("&", "");
        pageLoc = pageLoc.replace("'", "");
        try{
            if( pageTracker ){
                pageTracker._trackEvent('Mobile', pageLoc);
            }
        }catch(e){}
        return detailCard;
        
    },

I am just testing so will let you know if all is well and the reports work

[simondavies]

Well it all reports fine.

I only have one thign I need to look into and that is I have a simple panel page that is viewed from a link and not a nested list/list so the position of my code simple will not work and placing it into the js will load it up everytime the site loads which is not what I want.

The js page looks like below:

App.views.panelPage = Ext.extend(Ext.Panel, {
        id:'socialPageLinks',
        scroll: 'vertical',
        styleHtmlContent: true,
        layout: 'card',
        style: 'background: #ffffff',
        dockedItems: [{
            xtype: 'toolbar',
            title: '?????????',
            items: [{xtype: 'spacer'},{iconCls: 'home',  iconMask: true, id: 'homeBtn'}]       
        }],
        html:'my html content',
        layout:'fit'
});

Ext.reg('panelPage', App.views.panelPage);

I could do with something like the listener option that detects the page has been selected and the panel details are being viewed, so any ideas on this one let me know, its the final hurdle, but still looking into it

[simondavies]

Bump!

I have resolved my issue with a LIst and Nested list But my Issue is now a normal panel view (see below).

Is there a way to register that this view has been loaded into the main view, so that I can then add my analytics code. Something like 'viewLoaded: {//code here}' I have looked for a listener but they all need an action like tap etc.

My code is below:

App.views.panelPage = Ext.extend(Ext.Panel, {         id:'socialPageLinks',         scroll: 'vertical',         styleHtmlContent: true,         layout: 'card',         style: 'background: #ffffff',         dockedItems: [{             xtype: 'toolbar',             title: '?????????',             items: [{xtype: 'spacer'},{iconCls: 'home',  iconMask: true, id: 'homeBtn'}]                }],         html:'my html content',         layout:'fit' });  Ext.reg('panelPage', App.views.panelPage);

I could put the code after the Ext.reg... but this registers as soon as the js page loads on the mau page, which is no good, I only need it to register when the user has clicked and is on the view.

So somethign like:

        html:'my html content',         
        layout:'fit',
        viewLoaded:'place code here'