AngularJS Web アプリで Angularytics を使用しています。正常に動作していますが、3 つの環境 (開発、テスト、および運用) があり、両方から統計を収集しています。本番環境のみの分析を表示したいと思います。
多くのオプションを分析しましたが、すべてに問題があります。ここで、angularytics.js スクリプトを編集して条件を追加したいので、コードは $rootScope.ENVIRONMENT 定数が Production の場合にのみ何かを実行します。
何かのようなもの：
(function () {
angular.module('angularytics', []).provider('Angularytics', function () {
if($rootScope.ENVIRONMENT == 'Production') {
var eventHandlersNames = ['Google'];
this.setEventHandlers = function (handlers) {
if (angular.isString(handlers)) {
handlers = [handlers];
}
eventHandlersNames = [];
angular.forEach(handlers, function (handler) {
eventHandlersNames.push(capitalizeHandler(handler));
});
};
var capitalizeHandler = function (handler) {
return handler.charAt(0).toUpperCase() + handler.substring(1);
};
var pageChangeEvent = '$locationChangeSuccess';
this.setPageChangeEvent = function (newPageChangeEvent) {
pageChangeEvent = newPageChangeEvent;
};
this.$get = [
'$injector',
'$rootScope',
'$location',
function ($injector, $rootScope, $location) {
var eventHandlers = [];
angular.forEach(eventHandlersNames, function (handler) {
eventHandlers.push($injector.get('Angularytics' + handler + 'Handler'));
});
var forEachHandlerDo = function (action) {
angular.forEach(eventHandlers, function (handler) {
action(handler);
});
};
var service = {};
service.init = function () {
};
service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
forEachHandlerDo(function (handler) {
if (category && action) {
handler.trackEvent(category, action, opt_label, opt_value, opt_noninteraction);
}
});
};
service.trackPageView = function (url) {
forEachHandlerDo(function (handler) {
if (url) {
handler.trackPageView(url);
}
});
};
service.trackTiming = function (category, variable, value, opt_label) {
forEachHandlerDo(function (handler) {
if (category && variable && value) {
handler.trackTiming(category, variable, value, opt_label);
}
});
};
$rootScope.$on(pageChangeEvent, function () {
service.trackPageView($location.url());
});
return service;
}
];
}});
}());
(function () {
angular.module('angularytics').factory('AngularyticsConsoleHandler', [
'$log',
function ($log) {
var service = {};
service.trackPageView = function (url) {
$log.log('URL visited', url);
};
service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
$log.log('Event tracked', category, action, opt_label, opt_value, opt_noninteraction);
};
service.trackTiming = function (category, variable, value, opt_label) {
$log.log('Timing tracked', category, variable, value, opt_label);
};
return service;
}
]);
}());
(function () {
angular.module('angularytics').factory('AngularyticsGoogleHandler', function () {
var service = {};
service.trackPageView = function (url) {
_gaq.push([
'_set',
'page',
url
]);
_gaq.push([
'_trackPageview',
url
]);
};
service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
_gaq.push([
'_trackEvent',
category,
action,
opt_label,
opt_value,
opt_noninteraction
]);
};
service.trackTiming = function (category, variable, value, opt_label) {
_gaq.push([
'_trackTiming',
category,
variable,
value,
opt_label
]);
};
return service;
}).factory('AngularyticsGoogleUniversalHandler', function () {
var service = {};
service.trackPageView = function (url) {
ga('set', 'page', url);
ga('send', 'pageview', url);
};
service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
ga('send', 'event', category, action, opt_label, opt_value, { 'nonInteraction': opt_noninteraction });
};
service.trackTiming = function (category, variable, value, opt_label) {
ga('send', 'timing', category, variable, value, opt_label);
};
return service;
});
}());
(function () {
angular.module('angularytics').filter('trackEvent', [
'Angularytics',
function (Angularytics) {
return function (entry, category, action, opt_label, opt_value, opt_noninteraction) {
Angularytics.trackEvent(category, action, opt_label, opt_value, opt_noninteraction);
return entry;
};
}
]);
}());
私は Angular について少し知っていますが、このスクリプトに $rootScope を挿入するのに十分なスキルがないと思います。私はいつも得る$rootScope is not defined。
更新 以下のコメントに関して、投稿を更新します。条件付きでスクリプトを追加することが私の最初のアプローチでした。これは、次のようなコントローラーで実行できます。
if ($rootScope.ENVIRONMENT == 'Production') {
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "lib/plugins/angularytics-yanpy.js";
head.appendChild(js);
}
これはangularytics-yanpyです：
(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', 'UA-59702007-1', 'auto');
一方、Angularytics スクリプトをホームページに追加する必要があります。
I think this will work in production environment. However, now in development a got a javascript error. Because angularytics.js needs the ga object created in the angularytics-yanpy.js. As this script is not created because is in development environment a get the javascript error.
また、動的に追加し<script src="lib/plugins/angularytics.js"></script>ました。しかし、このスクリプトは app.js ファイルで定義されている angularytics プロバイダーを定義しているため、新しいエラーが発生しました。
そのため、エラーが連鎖しているため、プロバイダーを維持するために angularytics.js スクリプトを更新しようとしましたが、環境が異なる場合は何もしないでください。
おそらく私はそれほど明確ではありませんが、説明するのは簡単ではありません。さらに説明が必要な場合はお知らせください。