0
\$\begingroup\$

My code listens for a number of events, and calls the Google Analytics event tracking function when they fire.

Each event uses a similar pattern. Can I achieve the same functionality without repeating myself?

/*jslint debug:true, browser:true, devel:true nomen:true */
/*global _gaq:true, jquery:true, $:true */

function trackEvent(c, a, l) {

    'use strict'; // JSLint

    //console.log(c, a, l); // Dev only

    _gaq.push(['_trackEvent', c, a, l]);

}

$(function () {

    'use strict'; // JSLint

    var alert, carousel, collapse, modal, tab, tooltip, download, external, mailto;

    // Alerts event handler

    alert = function () {

        var alertButton = $(this),
            category = 'Alerts',
            action = alertButton.next().text(),
            label;

        trackEvent(category, action, label);

    };

    $('body').on('click.alert.data-api', '[data-dismiss="alert"]', alert);

    // Carousel event handler

    carousel = function () {

        var carouselButton = $(this),
            category = 'Carousels',
            action = carouselButton.attr('data-slide'),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click.carousel.data-api', '[data-slide]', carousel);

    // Collapse event handler

    collapse = function () {

        var category = 'Collapses',
            action = $(this).text(),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click.collapse.data-api', '[data-toggle=collapse]', collapse);

    // Modal event handler

    modal = function () {

        var category = 'Modals', action, label, activeModal;

        activeModal = $(this).attr('href');
        action = $(activeModal).find('h3').text();

        trackEvent(category, action, label);
    };

    $('body').on('click.modal.data-api', '[data-toggle="modal"]', modal);

    // Tab event handler

    tab = function () {

        var category = "Tabs",
            action = $(this).text(),
            label;

        trackEvent(category, action, label);

    };

    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', tab);

    // Tooltip event handler

    tooltip = function () {

        var category = "Tooltips",
            action = $(this).text(),
            label;

        trackEvent(category, action, label);

    };

    $('body').on('mouseenter', '[rel="tooltip"], [rel="popover"]', tooltip);

    // Download link event handler

    download = function () {

        var category = "Downloads",
            action = $(this).attr('href'),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click', 'a[href$="pdf"], a[href$="doc"], a[href$="docx"], a[href$="rtf"], a[href$="ppt"], a[href$="zip"]', download);

    // Mailto event handler

    mailto = function () {
        var category = 'Mailto',
            action = $(this).attr('href'),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click', 'a[href^="mailto"]', mailto);

    // External link event handler

    $.expr[':'].external = function (a) {
        var PATTERN_FOR_EXTERNAL_URLS = /^\w+:\/\//,
            href = $(a).attr('href');
        return href !== undefined && href.search(PATTERN_FOR_EXTERNAL_URLS) !== -1;
    };

    external = function () {

        var category = 'External links',
            action = $(this).attr('href'),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click', 'a:external', external);

});
\$\endgroup\$
0

1 Answer 1

1
\$\begingroup\$

Id suggest something like:

$('body').on('click.alert.data-api', '[data-dismiss="alert"]', function () {
  trackEvent('Alerts', $(this).next().text());
});

instead of the whole alert code, and similar things for the other items.

\$\endgroup\$
1
  • \$\begingroup\$ I can see how your code is easier to read. Thanks for the suggestion Inkbug. \$\endgroup\$ Jul 16, 2012 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.