Google analytics widget for Silex websites

[lexoyo]

This widget will let you track your visitors.

About Google analytics

Google Analytics lets you measure user interactions with your site, and then displays very detailed reports about how did your visitors find you, what they did on your website.

Note: Google Analytics is used to track everyone on the internet..

Anyway there is not a lot of alternatives for people who are not technicians of the web. See Piwik if you are able to install a PHP app online.

Google Anal tracking code in your Silex website

Create an account or use you existing google account to enter Google analytics Dashboard, then click on the Admin tab. Create an account and a property, which will give you a code like this one - feel free to look for a tutorial on the internet

(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', 'UA-xxxxxxxx-x', 'auto');
ga('send', 'pageview');

Only the UA-xxxxxxxx-x should vary.

Open your website in Silex, open the javascript editor (from the view menu) and paste both code anywhere there: the above code and the following code.

/*                       *\
   Google analytics widget
\*                       */
// notify google when page change
function onPageChangeGA(newUrl){
    var currentPage = newUrl.substr(newUrl.indexOf('#!page-') + 7);
    ga('send', 'pageview', {
      'page': '/' + currentPage,
      'title': currentPage
    });
}
$(window).bind( 'hashchange', function (e){
    onPageChangeGA(e.originalEvent.newURL);
});
// track links and form submissions
$(function(){
    $('a, [data-silex-href]').click(onClick);
    $('form').submit(onSubmit);
    function onSubmit() {
        onClick.call(this, true, 'submit');
    }
    function onClick(opt_doNotPrevent, opt_link) {
        var text = ($(this).text() || this.tagName).trim();
        var link = this.getAttribute('href') || this.getAttribute('data-silex-href') || opt_link || '';
        var target = this.getAttribute('target') || this.getAttribute('data-silex-target') || '_self';
        trackLink(text, link, target);
        if (!opt_doNotPrevent) {
            return false;
        }
    }
    function trackLink(text, url, target){
        ga('send', 'event', 'outbound', 'link', text + ' (' + url +')', {'hitCallback':
            function () {
                if (!target || target === '_self') {
                    document.location = url;
                }
            }
        });
    }
});

This code will notify Google of the pages seen by your visitors inside your Silex website. And you will also know when someone clicked on a link.

See your website's traffic report

Then publish your website online, and you will see the users data in your Google analytics dashboard. To see the links clicked by the user, look for Events in the sections Real-Time and Behavior.

Also this video introduction to Google analytics might be useful to get started with Google analytics.

[lexoyo]

New: I have updated the code, so now you will also know when someone clicked on a link.

[AndreaMonzini]

Hello i am interested to use Piwik, how i could integrate it with Silex?

[lexoyo]

hi @AndreaMonzini here is in french about piwik and Silex silex The idea is to create get the embed code of piwik and paste it in Silex into the "html head editor" Feel free to ask questions or to create a "widget" (basically a tutorial) as a new issue