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

【问题标题】：Create a globally available function with RequireJS to handle Google Analytics Event Tracking使用 RequireJS 创建一个全局可用的函数来处理 Google Analytics 事件跟踪
【发布时间】：2017-02-20 14:18:41
【问题描述】：

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

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

这是我想要的一个例子。我想定位一个类为resend 的锚并触发一个 GA 事件。

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

当然这很简单，但我不想在任何我想做事件跟踪的地方都需要一个模块。这是必要的还是有更清晰/更清洁的方法来做到这一点？我应该指出我不想包含 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;

【问题讨论】：

标签： javascript google-analytics requirejs event-tracking

【解决方案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。

【讨论】：