使用 RequireJS 创建一个全局可用的函数来处理 Google Analytics 事件跟踪

Question

我正在寻找一种方法来创建和包含一个脚本，该脚本将包含我所有的 Google Analytics 事件跟踪代码。我的应用程序中有多个点，我希望能够跟踪点击和交互，并且我希望能够将所有这些功能放在一个文件中。

我的问题是我找不到合适的方法来使用我的网站使用的 RequireJS。

这是我想要的例子。我想定位 class 为 resend 的主播并触发 GA 事件。

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

当然这很简单，但我不想在任何我想进行事件跟踪的地方都需要一个模块。这是必要的还是有 clearer/cleaner 方法来做到这一点？我应该指出，我不想包含 Google Analytics，因为有很多关于如何做到这一点的教程，而且我已经通过将其放在页脚中的传统方式来做到这一点 - 它只是 GA 事件跟踪代码我想包括。

这是我的 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

这就是我最终配置 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;

然后在/assets/src/js/crmpicco目录中存在一个gaEventTracking.js。

使用 RequireJS 创建一个全局可用的函数来处理 Google Analytics 事件跟踪

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

javascript

google-analytics

requirejs

event-tracking