[SOLVED] [v2] Where is the best place to attach analytics hooks?

Questions
1

I’m using Google Analytics and I’m wondering where the best place is to add analytics hooks to track navigation events. I’m thinking of adding a listener to router.on('routeChange', function(){ ...send event... }), but I don’t want to get a bunch or erroneous events or impact performance. Also, I’d like to attach the event at the app router level, but I remember from a previous forum entry that the app level router isn’t fully functional. Any thoughts on best approach?

1 Like
2

I would suggest to use global pageInit event for that:

new Framework7({
  pageInit(page) {
    // check page object and push GA event here
  },
});
1 Like
3

Thanks…I needed a bit more detail so I added the following to my Analytics.js. Seems to be working well. Let me know if you see any issues with this approach.

$(window).load(function(){

if (app) { //F7

   app.on('pageAfterIn', function(page){
        if (page.direction == 'forward') {
             ga('send', {
                'hitType': 'event',
                'eventCategory': 'Navigation',
                'eventAction': 'Open Page',
                'eventLabel': page.name,
                'page': window.location.pathname
            });
        }      
    });

    app.on('tabShow', function(tab){
        ga('send', {
            'hitType': 'event',
            'eventCategory': 'Navigation',
            'eventAction': $(tab).hasClass('view') ? 'Open View Tab' : 'Open Tab',
            'eventLabel': $(tab).attr('id'),
            'page': window.location.pathname
        });         
    });

    app.on('modalOpen', function(modal){          
         ga('send', {
            'hitType': 'event',
            'eventCategory': 'Navigation',
            'eventAction': 'Open Modal',
            'eventLabel': $(modal.$el[0]).attr('id') ? $(modal.$el[0]).attr('id') : modal.type,
            'page': window.location.pathname
        });        
    });
}

//Send the pageview
ga('send', 'pageview');

});
2 Likes
4

Hi Byron,
I’m trying to setting Google Analytics on my App but with no luck (F7v2, PhoneGap Build cli-8.0.0).
Are you using the plugin “cordova-plugin-google-analytics” and some specific configuration for the whitelist settings on config.xml?

Thanks.

1 Like
5

Hey Mike, I’m not using PhoneGap…I’m using a custom native iOS app that loads my F7 app in a UIWebView with a few hooks for device access when I need it (location, photos, notifications etc.). So, my F7 app just loads traditional Javascript Google Analytics and sends pageviews/events via Javascript as well.

Full implementation here:

$( document ).ready(function() {

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'MY_GOOGLE_ANALYTICS_ID', 'MY_DOMAIN');
ga('require', 'displayfeatures');

/* DOM ELEMENT LISTENERS */

/* TEMPLATE
$('#id .class').on('click', function() {
    ga('send', {
        'hitType': 'event',
        'eventCategory': '',
        'eventAction': '',
        'eventLabel': $(this).attr('data-linktarget'),
        'page': window.location.pathname
    });
});
*/


/*LISTENERS FOR ASYNC LOADED DOM ELEMENTS*/

/* TEMPLATE
$('body').on('customEvent', function(){

	//listeners

});
*/


});

$(window).load(function(){

if (app) { //app = F7 app

    app.on('pageAfterIn', function(page){
        if (page.direction == 'forward') {
             ga('send', {
                'hitType': 'event',
                'eventCategory': 'Mobile App',
                'eventAction': 'Open Page',
                'eventLabel': page.name,
                'page': window.location.pathname
            });
        }      
    });

    app.on('tabShow', function(tab){
        ga('send', {
            'hitType': 'event',
            'eventCategory': 'Mobile App',
            'eventAction': $(tab).hasClass('view') ? 'Open View Tab' : 'Open Tab',
            'eventLabel': $(tab).attr('id'),
            'page': window.location.pathname
        });         
    });

    app.on('modalOpen', function(modal){          
         ga('send', {
            'hitType': 'event',
            'eventCategory': 'Mobile App',
            'eventAction': 'Open Modal',
            'eventLabel': $(modal.$el[0]).attr('id') ? $(modal.$el[0]).attr('id') : modal.type,
            'page': window.location.pathname
        });        
    });
}

//Send the pageview
ga('send', 'pageview');

});
1 Like
6

Thanks Byron but unfortunately your code not works on PhoneGap and with this plugin:
<plugin name="cordova-plugin-google-analytics" source="npm" spec="~1.8.3" />

This the script that I’ve used (insert before of the </ head>):

<script>
new Framework7({
  pageInit(page) {
    // check page object and push GA event here
   window.ga.startTrackerWithId('UA-XXXXXX-XX', 30); 
   window.ga.trackView('index.html', 'Home');
  },
});
</script>

I hope that Vladimir (nolimits4web) can give me some useful information.