AngularJS Amplituden-Service nicht als Singleton

Question

Ich habe vor kurzem eine ähnliche Frage gestellt, aber das ist kein Duplikat. Entschuldigung für den Code schweren Post, aber ich wollte so viel Kontext wie möglich bieten. Ich habe ein Problem mit der Definition des Analysetools "Amplitude" als Service in meiner Angular.js-Anwendung. Dienste sollen als Singletons in einer Anwendung (source) fungieren, daher bin ich verwirrt, das folgende Verhalten zu erhalten.

In meiner app.js Datei, rufe ich AmplitudeService.logEvent ('EVENT_NAME') in einer .run-Funktion, die das Ereignis erfolgreich zu Amplitude protokolliert. Hinweis: Console.log (AmplitudeService) gibt hier ein Objekt mit allen korrekten Funktionen zurück.

Wenn ich jedoch AmplitudeService.logEvent ('EVENT_NAME') innerhalb eines anderen Controllers wie header.js aufrufen, sehe ich in meinem Amplituden-Dashboard keine Daten. Hinweis: console.log (AmplitudeService) gibt ein identisches Objekt innerhalb header.js zum einen von zurück app.js

jede und alle Einsicht schätzen würde!

P.S. Der offizielle AmplitudeJS SDK is here. Ich versuche, es durch diese wrapper zu implementieren.

AmplitudeService.js (source)

Hinweis: Wenn Sie die Syntax des Autors überprüfen, er gibt ein Objekt am Ende seines Dienstes. In meiner Forschung habe ich gelesen, das Schlüsselwort "this" zu verwenden, wenn ich Service-Funktionen definiere (source), und dass Sie kein Objekt wie bei einer Factory zurückgeben müssen, also habe ich es entsprechend aktualisiert.

angular.module('AmplitudeService', []) 
.service('AmplitudeService', 
['$amplitude', '$rootScope', 'amplitudeApiKey', '$location', 
function ($amplitude, $rootScope, amplitudeApiKey, $location) { 

    this.init = function() { 
    $amplitude.init(amplitudeApiKey, null); 
    } 

    this.identifyUser = function(userId, userProperties) { 
    $amplitude.setUserId(userId); 
    $amplitude.setUserProperties(userProperties); 
    } 

    this.logEvent = function(eventName, params) { 
    $amplitude.logEvent(eventName, params); 
    } 
}]); 

Winkel amplitude.js (source)

Dies ermöglicht den Zugriff auf "$ Amplitude" in der gesamten Anwendung

(function(){ 
var module = angular.module('angular-amplitude', ['ng']); 

module.provider('$amplitude', [function $amplitudeProvider() { 
this.$get = ['$window', function($window) { 
    (function(e,t){ 
    var r = e.amplitude || {}; 
    var n = t.createElement("script"); 
    n.type = "text/javascript"; 
    n.async = true; 
    n.src = "https://d24n15hnbwhuhn.buttfront.net/libs/amplitude-2.2.0-min.gz.js"; 
    var s = t.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(n,s); 
    r._q = []; 

    function a(e){ 
    r[e] = function(){ 
     r._q.push([e].concat(Array.prototype.slice.call(arguments,0))); 
    } 
    } 
    var i = ["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties"]; 
    for(var o = 0; o < i.length; o++){ 
    a(i[o]) 
    } 
    e.amplitude = r 
} 
)(window,document); 
    return $window.amplitude; 
}]; 
}]); 
return module; 
}()); 

App.js

angular.module('app', [ 
'ngRoute', 
'angular-amplitude', 
'AmplitudeService', 
]) 

.run(['AmplitudeService', function(AmplitudeService){ 
console.log(AmplitudeService); // Outputs 'Object {}' 
AmplitudeService.init(); 
*AmplitudeService.logEvent('LAUNCHED_SITE'); // This logs the event* 
console.log(AmplitudeService); // Outputs 'Object {}' 
}]) 

Header.js

angular.module('app.common.header', []) 
.controller('HeaderCtrl', [ '$rootScope', '$scope', '$location','$route', '$window', 'AmplitudeService', function($rootScope, $scope, $location, $route, $window, AmplitudeService){ 

$scope.goToSearch = function(term) { 
$location.path('/search/' + term); 
    console.log(AmplitudeService); // Outputs 'Object {}' 
*AmplitudeService.logEvent('SEARCHED');* // This does not log the event 
}; 
}]); 

Update: Ich habe versucht, den Dienst zu einem Factory-Schalten und dass keine neuen Ergebnisse nicht erzielt wurden.

Answer 1

Wir haben die Lösung gefunden und hoffen, dass dies für jeden, der darauf stößt, hilfreich ist. Meine Lösung bestand darin, das SDK durch Aufrufen von AmplitudeService.init() innerhalb einer Funktion .run() in app.js zu initialisieren, die ein Amplitudenobjekt in meinem Fenster initialisierte. Von da an habe ich $ window als Dienst in jeden meiner Controller aufgenommen und $ window.amplitude.logEvent ('event_name_here') aufgerufen;

Fühlen Sie sich frei zu kontaktieren, wenn Sie Fragen haben. Vielen Dank.

Answer 2

Wir hatten ähnliche Probleme bei einem großen Projekt und wir erstellten eine wrapper providing a directive an init Amplitude und einen Dienst, um das logEvent und sendUserId bereitzustellen.