• Analytics and Vanilla Forums: Part 3

    by  • Last modified:February 27, 2015 • Google Analytics • 0 Comments

    I am always deep into whatever my current projects are. Obviously right now Vanilla Forums takes up a significant part of my time. I guess you can guess that from my posts on Vanilla and Analytics, Part 1 and Part 2. One fun thing ( and that shows you how much of an analytics nerd I am) is to see what I can push myself to track. The following is more an exercise in “could I track this ?”, more than anything. But first a note: This is an experiment of my ideas, done on my own. It is not an official Vanilla suggestion, battle tested or will be supported. And frankly, the need to measure all things, is a sickness and not necessary. You need to be conscious of not falling into the trap of measuring, simply for measuring sake. I do feel for you if you have a boss who doesn’t care and just wants something measured anyway…. so here is why I share.

    How to measure most things within Vanilla without modifying core files
    In Vanilla hosted, you can modify your theme to your hearts content, but not the code to measure button clicks. In vanilla Self-Hosted, you would need to get messy with views. It doesn’t need to be so hard.

    In order to measure button clicks, all you need is some jQuery. Vanilla loads the latest jQuery library, so you don’t need to load that. All you need is some simple JavaScript and you can measure any button click using Google Analytics events. Here is some code you can add to a Pocket in your theme. Make sure it’s loaded in the head:

    $('#Form_ApplyforMembership.Button.Primary').one('click', function() {
     ga('send', 'event', 'button', 'click', 'Register');
    <!--Social Sign-in-->
    $('a.SocialIcon.SocialIcon, span.Icon').one('click', function() {
     ga('send', 'event', 'button', 'click', 'social-signin');
    <!--Standard Sign-in-->
    $('input#Form_SignIn.Button.Primary').one('click', function() {
     ga('send', 'event', 'button', 'click', 'standard-signin');
    <!--New Discussion-->
    $('input#Form_PostDiscussion').one('click', function() {
     ga('send', 'event', 'button', 'click', 'new-discussion');
    <!--New Comment-->
    $('input#Form_PostComment').one('click', function() {
     ga('send', 'event', 'button', 'click', 'new-comment');

    Each one of these lines will fire an event on button click which you can track in your Google Analytics. So basically if a user has Javascript enabled, you can track their clicks. The button classes might change depending on the theme. The current example code should work on Bootstrap (hosted) theme without modification.


    About The Author: Adrian has over 12 years experience in Digital Marketing and Analytics. He currently works as a Marketing Head of Community at Vanilla Forums, a modern forum software platform that allows clients to connect and engage their communities and customers. Adrian has extensive experience with Google and Piwik (Matomo) Analytics. He lives and works in Montreal.