1

我最近发布了一个类似的问题，但这不是重复的。为代码繁重的帖子道歉，但我想提供尽可能多的上下文。我在将分析工具“幅度”定义为 Angular.js 应用程序中的服务时遇到问题。服务应该在整个应用程序（ source ）中充当单例，所以我很困惑得到以下行为。

在我的app.js文件中，我在 .run 函数中调用 AmplitudeService.logEvent('EVENT_NAME')，该函数成功地将事件记录到 Amplitude。注意： Console.log(AmplitudeService) 在此处返回具有所有正确功能的对象。

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

将不胜感激任何和所有的见解！

PS 官方的AmplitudeJS SDK 在这里。我正在尝试通过这个wrapper来实现它。

AmplitudeService.js (来源)

注意：如果您检查作者的语法，他会在服务结束时返回一个对象。在我的研究中，我读过在定义服务函数（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);
  }
}]);

angular-amplitude.js (来源)

这允许在整个应用程序中访问“$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;
}());

应用程序.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 {}'
 }])

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

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

4

2 回答 2

0

我们在一个大型项目中遇到了类似的问题，我们创建了一个包装器，提供了一个初始化 Amplitude 的指令和一个提供 logEvent 和 sendUserId 的服务。

于 2016-06-29T16:08:59.593 回答
0

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

如果您有任何问题，请随时联系。谢谢。

于 2016-05-24T22:19:26.767 回答