2016-05-24 11 views
1

私は最近同様の質問を投稿しましたが、これは重複していません。 コードの重い投稿にはお詫び申し上げますが、できるだけ多くの文脈を提供したいと思っていました。 Angular.jsアプリケーションで、分析ツール「振幅」をサービスとして定義する際に問題があります。サービスはアプリケーション全体でシングルトンとして動作するはずです(source)ので、次のような動作をするのは混乱しています。AngularJS振幅サービスがシングルトンとして機能しない

私ののapp.jsファイルでは、イベントをAmplitudeに正常に記録する.run関数でAmplitudeService.logEvent( 'EVENT_NAME')を呼び出します。 注: Console.log(AmplitudeService)は、すべての正しい関数を持つオブジェクトを返します。 header.js AmplitudeService.logEvent( 'EVENT_NAME')を他のコントローラ内で呼び出すと、Amplitudeダッシュボードにデータが表示されません。 注:はconsole.log(AmplitudeService)が1にheader.js内の同一のオブジェクトを返すには、app.js

から返された一切の洞察力をお願い申し上げます!

P.S.公式AmplitudeJS SDK is here。私はこのwrapperを通して実装しようとしています。

AmplitudeService.jssource

注:著者の構文をチェックすると、彼は彼のサービスの終了時にオブジェクトを返します。私の研究では、サービス関数(source)を定義するときに "this"キーワードを使用するように読みましたが、ファクトリの場合と同じようにオブジェクトを返す必要はないので、それに応じて更新しました。

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

角度-amplitude.jssource

これは

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

アップデート:私は、工場出荷時にサービスを切り替え試してみましたが、それはどんな新しい結果を生成しませんでした。

答えて

0

解決策が見つかりました。これは、この問題を克服するすべての人に役立つことを願っています。私の解決策は、SDK内のAmplitudeService.init()をapp.js内の.run()関数内で呼び出すことでSDKを初期化し、ウィンドウ内の振幅オブジェクトを初期化することでした。そこから、各コントローラに$ windowをサービスとして組み込み、$ window.amplitude.logEvent( 'event_name_here')を呼び出しました。

質問がある場合はお気軽にお問い合わせください。ありがとう。

0

大規模なプロジェクトでも同様の問題があり、initEventとlogEventとsendUserIdを提供するサービスとして、wrapper providing a directiveを作成しました。

関連する問題