AngularJS Amplitude 服务不作为单例

Question

我最近 post 提出了一个类似的问题，但这不是重复的。为代码繁重道歉 post 但我想提供尽可能多的上下文。我在将分析工具 'Amplitude' 定义为我的 Angular.js 应用程序中的服务时遇到问题。服务应该在整个应用程序中充当单例 (source)，所以我很困惑会出现以下行为。

在我的 app.js 文件中，我在成功记录的 .运行函数中调用 AmplitudeService.logEvent('EVENT_NAME')振幅事件。 注意： Console.log(AmplitudeService) return这里是一个具有所有正确功能的对象。

但是，当我在任何其他控制器中调用 AmplitudeService.logEvent('EVENT_NAME') 时，例如 header.js 我从来没有看到任何我的 Amplitude 仪表板中的数据。 注意： Console.log(AmplitudeService) returns header.js 中的一个相同对象与 return来自 app.js

感谢任何和所有见解！

P.S。官方AmplitudeJS SDK is here. I am trying to implement it through this wrapper.

AmplitudeService.js (source)

注意：如果您检查作者的语法，他 return 在他的服务结束时是一个对象。在我的研究中，我读到在定义服务函数 (source) 时使用 "this" 关键字，并且您不需要像使用工厂那样 return 一个对象, 所以我相应地更新了它。

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

angular-amplitude.js (source)

这允许在整个应用程序中访问“$amplitude”

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

更新：我已经尝试将服务切换到工厂，但没有产生任何新结果。

Answer 1

找到了解决方案，希望这对遇到此问题的任何人都有帮助。我的解决方案是通过在 app.js 中的 .运行() 函数中调用 AmplitudeService.init() 来初始化 SDK，这在我的 window 中初始化了一个振幅对象。从那时起，我将 $window 作为服务包含在我的每个控制器中并调用 $window.amplitude.logEvent('event_name_here');

如有疑问，请随时联系。谢谢。

Answer 2

我们在一个大型项目中遇到了类似的问题，我们创建了一个 wrapper providing a directive 来初始化 Amplitude 和一个服务来提供 logEvent 和 sendUserId。

AngularJS Amplitude 服务不作为单例

AngularJS Amplitude Service Not Acting as Singleton

singleton

analytics

amplitude

angularjs

angularjs-service