Domanda

Mi chiedo che è il modo giusto di integrare Google Analytic nell'app di AngularJS.Mi piacerebbe fornirlo attraverso DI, quindi posso deriderelo durante il test dell'unità e testare quali dati vengono inviati ad esso.

Stavo provando qualcosa del genere:

.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;
})
.

Ma ovviamente non funziona, dal momento che prima è un oggetto fittizio e quando analytics.js carichi, sostituisce window.qa (IE: window[document['GoogleAnalyticsObject']]) con la corretta implementazione.Quindi, quando il servizio viene eseguito, restituisce l'implementazione fittizia.

Immagino che l'utilizzo di un fornitore sia il modo giusto, dal momento che vorrei configurare anche alcuni parametri (come userid, ecc ...), ma non ho idea di come impostarlo in questo modo. Qual è l'approccio giusto?

È stato utile?

Soluzione

Questo è il migliore che ho ottenuto finora:

.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();
})
.

È un provider che può essere configurato:

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

Il feedback è il benvenuto.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top