Frage

Ich frage mich, wie ich Google Analytic richtig in meine AngularJS-App integrieren kann.Ich möchte es über DI bereitstellen, damit ich es während des Unit-Tests nachahmen und testen kann, welche Daten an es gesendet werden.

Ich habe so etwas versucht:

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

Aber natürlich funktioniert es nicht, da es sich zunächst um ein Dummy-Objekt handelt und wann analytics.js lädt, ersetzt window.qa (dh:window[document['GoogleAnalyticsObject']]) mit der richtigen Implementierung.Wenn der Dienst ausgeführt wird, wird die Dummy-Implementierung zurückgegeben.

Ich denke, dass die Verwendung eines Anbieters der richtige Weg ist, da ich auch einige Parameter (wie Benutzer-ID usw.) konfigurieren möchte, aber keine Ahnung habe, wie ich das auf diese Weise einrichten soll.

Welches ist der richtige Ansatz?

War es hilfreich?

Lösung

Das ist das Beste, was ich bisher bekommen habe:

.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 handelt sich um einen Anbieter, der konfiguriert werden kann:

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

Feedback ist willkommen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top