Create a globally available function with RequireJS to handle Google Analytics Event Tracking

Question

I am looking for a way to create and include a single script which will house all my Google Analytics event tracking code. There are various points in my application where I want to be able to track clicks and interaction and I would like to be able to have all these functions in a single file.

My problem is I can't find a suitable way of doing that with RequireJS, which my site uses.

This is an example of what I would have. I'd like to target an anchor with a class of resend and trigger a GA event.

<a href="http://www.crmpicco.co.uk/resend.php" class="resend">Resend</a>

Sure that is simple enough, but I don't want to have to require a module everywhere I want to do event tracking. Is this necessary or is there a clearer/cleaner way to do it? I should point out I don't want to include Google Analytics as there are many tutorials on how to do that and I am already doing that through the traditional way of having it in the footer - it's only GA event tracking code I want to include.

This is my requireJS config.js:

require = {
    baseUrl: '/assets/js',
    paths: {
        // Amcharts.
        'amcharts':         '/assets/vendor/amcharts/dist/amcharts/amcharts',
        'amcharts.funnel':  '/assets/vendor/amcharts/dist/amcharts/funnel',
        'amcharts.gauge':   '/assets/vendor/amcharts/dist/amcharts/gauge',

        bootstrap: '/assets/vendor/bootstrap/dist/js/bootstrap.min',
        jquery: '/assets/vendor/jquery/dist/jquery.min',
        jstz: '//cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min',
        pwstrength: '/assets/vendor/pwstrength-bootstrap/dist/pwstrength-bootstrap-1.2.7.min',
    },
    shim: {
        'amcharts.funnel': {
            deps: [ 'amcharts' ],
                exports: 'AmCharts',
                init: function() {
                    AmCharts.isReady = true;
                }
        },
        'amcharts.gauge': {
            deps: [ 'amcharts' ],
                exports: 'AmCharts',
                init: function() {
                    AmCharts.isReady = true;
                }
            },
        pwstrength: {
            deps: [
                'jquery'
            ]
        },
        bootstrap: {
            deps: [
                'jquery'
            ]
        }
    }
};

// Apply the urlArgs here for cache busting.
require.urlArgs = requireBase.urlArgs;

Answer 1

This is how I ended up configuring my RequireJS config.js.

require = {
    baseUrl: '/assets/js',
    paths: {

        'gaEventTracking': '/assets/src/js/crmpicco/gaEventTracking',

    },
    shim: {        
        'gaEventTracking': {
            deps: [
                'jquery'
            ]
        },
    }
};

// Apply the urlArgs here for cache busting.
require.urlArgs = requireBase.urlArgs;

There then exists a gaEventTracking.js in the /assets/src/js/crmpicco directory.