Javascript 使用Angulartics和Google Analytics实现动态和唯一URL
我正在尝试在我的AngularJS SPA中使用和,这样我就能够聚合页面浏览量,即使当用户在应用程序中时,构建的URL是唯一的。当用户从一个页面移动到另一个页面(以及从一个状态移动到另一个状态)时,URL将继续基于自身构建,包括GUID。请参见下面的示例:Javascript 使用Angulartics和Google Analytics实现动态和唯一URL,javascript,angularjs,google-analytics,angulartics,Javascript,Angularjs,Google Analytics,Angulartics,我正在尝试在我的AngularJS SPA中使用和,这样我就能够聚合页面浏览量,即使当用户在应用程序中时,构建的URL是唯一的。当用户从一个页面移动到另一个页面(以及从一个状态移动到另一个状态)时,URL将继续基于自身构建,包括GUID。请参见下面的示例: 第1页:localhost:9000/selectListing 第2页:本地主机:9000/34ea85a0-84db-4443-b40b-F7E0B6B096/selectFiles 第3页:本地主机:9000/34ea85a0-84db
if (window.location.host.indexOf('cats.kittens.com') >=0){
(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-5555555-5', 'auto');
$window.ga('send', 'pageview', { page: $location.url() });
以下是我在app.js文件中实现的代码:
angular.module('myApp', [
'ui.router', 'ui.bootstrap', 'ui.bootstrap.tpls', 'ngTable', 'ngSanitize', 'angularFileUpload','angular.filter', 'angulartics', 'angulartics.google.analytics',
])
/* Angulartics configuration */
.config(['$analyticsProvider', function ($analyticsProvider) {
$analyticsProvider.firstPageview(false); /* Records pages that don't use $state or $route */
$analyticsProvider.withAutoBase(true); /* Records full path */
}])
.config(['$stateProvider', '$urlRouterProvider', '$logProvider', function ($stateProvider, $urlRouterProvider, $logProvider) {
'use strict';
// global $log.debug setting
$logProvider.debugEnabled(true);
}]);
.run(['$rootScope', '$stateParams', '$analytics', '$location', '$log', function($rootScope, $stateParams, $analytics, $location, $log) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams) {
var overrideStateParams = {};
var flattener = null;
if (toState.angulartics && toState.angulartics.flattenParams === true)
{
angular.forEach(toParams, function(v,k) {
overrideStateParams[k] = ':' + k;
});
}
else if (toState.angulartics && angular.isArray(toState.angulartics.flattenParams))
{
angular.forEach(toState.angulartics.flattenParams, function(flattenParam) {
overrideStateParams[flattenParam] = ':' + flattenParam;
});
}
else
{
// default is to not flatten
}
var url = location.host + decodeURIComponent(location.hash);
url = url.replace(/#/, '/').replace(/\/+/g, '/').replace(/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/ig, 'GUID');
$log.info(url);
$analytics.pageTrack(url);
});
}])
我曾在google analytics和ui router上尝试过此解决方案,但没有成功:
请告诉我还有什么我可以尝试的。提前谢谢 在github上研究了几天后,我找到了一个解决方案。我已将此运行块添加到我的app.js文件中:
angular.module('myApp', [
'ui.router', 'ui.bootstrap', 'ui.bootstrap.tpls', 'ngTable', 'ngSanitize', 'angularFileUpload','angular.filter', 'angulartics', 'angulartics.google.analytics',
])
/* Angulartics configuration */
.config(['$analyticsProvider', function ($analyticsProvider) {
$analyticsProvider.firstPageview(false); /* Records pages that don't use $state or $route */
$analyticsProvider.withAutoBase(true); /* Records full path */
}])
.config(['$stateProvider', '$urlRouterProvider', '$logProvider', function ($stateProvider, $urlRouterProvider, $logProvider) {
'use strict';
// global $log.debug setting
$logProvider.debugEnabled(true);
}]);
.run(['$rootScope', '$stateParams', '$analytics', '$location', '$log', function($rootScope, $stateParams, $analytics, $location, $log) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams) {
var overrideStateParams = {};
var flattener = null;
if (toState.angulartics && toState.angulartics.flattenParams === true)
{
angular.forEach(toParams, function(v,k) {
overrideStateParams[k] = ':' + k;
});
}
else if (toState.angulartics && angular.isArray(toState.angulartics.flattenParams))
{
angular.forEach(toState.angulartics.flattenParams, function(flattenParam) {
overrideStateParams[flattenParam] = ':' + flattenParam;
});
}
else
{
// default is to not flatten
}
var url = location.host + decodeURIComponent(location.hash);
url = url.replace(/#/, '/').replace(/\/+/g, '/').replace(/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/ig, 'GUID');
$log.info(url);
$analytics.pageTrack(url);
});
}])
请注意,我正在用上面代码中的正则表达式替换GUID。您可能需要更改正则表达式以满足您对唯一URL的需求。
我还向需要截断URL的每个状态添加了这段代码:
angulartics: { flattenParams: true }
您可以在路由配置文件中按状态实现它:
.state('Kittens.meow', {
url: '/meow',
templateUrl: 'meow/hiss.html',
angulartics: { flattenParams: true }
})
任何人提到这一点,讨论如何做的问题就在这里