Pregunta

Me pregunto cuál es la forma correcta de integrar Google Analytic en mi aplicación AngularJS.Me gustaría proporcionarlo a través de DI, para que pueda burlarse de ella durante las pruebas de la unidad y probar qué datos se envían a él.

Estaba intentando algo como esto:

.service('$ga', function () {
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        },
        i[r].l = 1 * new Date();
        a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m);
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'GA_KEY', 'auto');
    ga('send', 'pageview');
    return ga;
})

Pero, por supuesto, no funciona, ya que primero es un objeto ficticio y cuando se carga analytics.js, reemplaza a window.qa (es decir,: window[document['GoogleAnalyticsObject']]) con la implementación adecuada.Entonces, cuando se ejecuta el servicio, devuelve la implementación ficticia.

Supongo que usar un proveedor será el camino correcto, ya que me gustaría configurar también algunos parámetros (como UserID, etc.), pero no tengo idea de cómo configurarlo de esa manera.

¿Cuál es el enfoque correcto?

¿Fue útil?

Solución

Esto es lo mejor que llegué hasta ahora:

.provider('$ga', function () {

    window['GoogleAnalyticsObject'] = 'ga';
    window['ga'] = window['ga'] || function () { (window['ga'].q = window['ga'].q || []).push(arguments)}
    window['ga'].l = 1 * new Date();
    var script = document.createElement('script');
    var prevScript = document.getElementsByTagName('script')[0];
    script.async = 1;
    script.src = '//www.google-analytics.com/analytics.js';
    prevScript.parentNode.insertBefore(script, prevScript);

    var provider = function () {
        var me = {};

        me.$get = function () {
            ga('send', 'pageview');
            return function () {                
                return window.ga.apply(window, arguments);
            }
        };

        me.ga = function () {
                return window.ga.apply(window, arguments);
        };

        return me;
    };

    return provider();
})

Es un proveedor que se puede configurar:

.config(['$gaProvider',function ($gaProvider) {
    $gaProvider.ga('create','UA-XXXXXX-Y','auto');
}])

feedback es bienvenido.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top