Click Event tracking setup

Question

I am trying to count the clicks of certain elements on a web page using Google Analytics, which Im new to. I set it up yesterday and here is the code I have:

Placed before the closing </head> tag (per instructions here), I have this:

        <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-33903909-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
        </script>
        </head>

I also have a set of elements:

                    <div class="block aside" id ="slideAside">
                    <aside>
                        <form class="form">
                            <fieldset id="fs_section_abstract" class="fs section abstract">
                                <label id="fs_abstract_heading" class="fs btn heading abstract">Abstract</label>
                            </fieldset>

                            <fieldset id="fs_section_businessapproach" class="fs section businessapproach">
                                <label id="fs_businessapproach_heading" class="fs btn heading businessapproach">Business Approach</label>
                            </fieldset>

                            <fieldset id="fs_section_workexperience" class="fs section workexperience">
                                <label id="fs_workexperience_heading" class="fs btn heading workexperience">Work Experience</label><br>
                            </fieldset>

                            <fieldset id="fs_section_academic" class="fs section academic">
                                <label id="fs_academic_heading" class="fs btn heading academic">Academic</label>
                            </fieldset>

                            <fieldset id="fs_section_skillstable" class="fs section skillstable">
                                <label id="fs_skillstable_heading" class="fs btn heading skillstable">Skills Table</label><br>
                            </fieldset>

                            <fieldset id="fs_section_community" class="fs section community">
                                <label id="fs_community_heading" class="fs btn heading community">Community</label><br>
                            </fieldset>
                        </form>
                    </aside>
                </div>

and to track them, in the script below, I have:

    $('.btn').click(function () {
    //FS IDentifier
    if ($(this).hasClass("fs")) {
        //heading
        if ($(this).hasClass("heading")) {
            //track number of times clicked
            _gaq.push(['_trackEvent', 'Heading', 'The ID is' + $(this).attr('id') + '.']);
            _gaq.push(['_trackEvent', 'Heading', 'HEading']);

I have had GA Analytics set up for almost a day now, and tried the above two _gaq.push()es as well as several other methods, but nothing is registering on the 'Events' section of the 'Content' section in the analytics page.

Am I misunderstanding something? Is my code bad?

I know this is asynchronous tracking, but are the results updated daily or some other interval? If it is daily, do you have to pay for synchronized updating?

Answer 1

Download Chrome if you don't already have it and install the Google Analytics Debugger extension.

Make sure your jquery click function is properly coded. Your code snippet is not valid.

Check out this fiddle in Chrome and turn on the debugger. I ran it with the debugger on and the events were tracked.

Event tracking has appeared for me within 3 - 6 hours. Google always says to wait 24 hours for accurate tracking. But, to check the tracking immediately, download Chrome and the GA debugger.