Angular2のようなシングルページアプリケーションでGoogleアナリティクスを使う方法

如何在像Angular2这样的SPA应用中使用Google Analytics？

试着调查了一下。

由于SPA的特性，在每页中粘贴Analytics代码会出岔子的。那么怎么做呢？

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>LotsJOY</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <script>

    (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','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-72706518-3', 'auto');

    // ga('send', 'pageview');

  </script>

</head>

<body>

  <app-root>Loading...</app-root>

</body>

</html>

首先，在index.html的<head>中加上Analytics代码。

接着，在app.component.ts中追加这样的代码：

import { Component } from '@angular/core';

import {Router, NavigationEnd} from "@angular/router";

declare var ga: any;

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

 constructor(public router: Router){

   router.events.distinctUntilChanged((previous: any, current: any) => {

     if(current instanceof NavigationEnd) {

       return previous.url === current.url;

     }

     return true;

   }).subscribe((x: any) => {

   //  console.log('router.change', x);

     ga('send', 'pageview', x.url);

   });

 }

}
declare var ga: any; 叫作环境声明。将其他的组件(Web浏览器和既存的JavaScript库)提供的变量和函数等等传达给TypeScript的编译器。
这个是添加既存的JavaScript库的静态类型，使得在TypeScript中可以使用它的意思。
也就是，声明在TypeScript中可以使用Google Analytics代码中的ga变量。

router.events.distinctUntilChanged这部分是检测路由上的变化，确认路由确实变化后，向Google发送新的路径。
												


											
在像Angular2这样的SPA应用中使用Google Analytics的方法的更多相关文章
	

    
								
  1. 如何在Blog中加入Google Analytics
		
    原文链接:https://www.cnblogs.com/procoder/archive/2010/03/04/Google-Analytics-Blog.html 背景 在之前加入了一个网站统计工 ...
    
		
    2. 
						
  2. angular2的ElementRef在组件中获取不到
		
    angular2的ElementRef在组件中获取不到 angular2不推荐操作dom,但是实际应用中不可避免的需要使用到dom操作,怎么操作,官方文档提供了一系列api(ElementRef,Vi ...
    
		
    3. 
						
  3. SPA项目中，404页面 和 登陆页面 对应的路由，应该怎样控制？
		
    SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制? 可以这样做: 登陆之前,所有页面跳到 登陆页面:包括随便输入的路由地址. 登陆后,跳到相应页面:随便输入的.不存在的路由地址,才跳到 ...
    
		
    4. 
						
  4. SEO 在 SPA 站点中的实践
		
    背景 观察基于 create-react-doc 搭建的文档站点, 发现网页代码光秃秃的一片(见下图).这显然是单页应用 (SPA) 站点的通病 -- 不利于文档被搜索引擎搜索 (SEO). 难道 S ...
    
		
    5. 
						
  5. (转)ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
		
    早上同事用PL/SQL连接虚拟机中的Oracle数据库,发现又报了"ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务"错误,帮其解决后,发现很多人遇到过这样的问 ...
    
		
    6. 
						
  6. 解析Jquery取得iframe中元素的几种方法
		
    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...
    
		
    7. 
						
  7. 在html中添加script脚本的方法和注意事项
		
    在html中添加script脚本有两种方法,直接将javascript代码添加到html中与添加外部js文件,这两种方法都比较常用,大家可以根据自己需要自由选择 在html中添加<script& ...
    
		
    8. 
						
  8. MVC中使用Entity Framework 基于方法的查询学习笔记 （二）
		
    解释,不解释: 紧接上文,我们在Visual Studio2012中看到系统为我们自动创建的视图(View)文件Index.cshtml中,开头有如下这句话: @model IEnumerable&l ...
    
		
    9. 
						
  9. ORA-01652：无法通过128(在表空间temp中)扩展temp段 解决方法
		
    ORA-01652:无法通过128(在表空间temp中)扩展temp段 解决方法 (2016-10-21 16:49:53)   今天在做一个查询的时候,报了一个"ORA-01652无法通过 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. android学习十三（android的通知使用）
			
    通知(Notification)是android系统中比較有特色的一个功能,当某个应用程序希望向用户发出一些提示信息.而该应用程序又不在前台执行时,就能够借助通知来实现.发出一条通知后,手机最上方的状 ...
    
			
    2. 
						
  2. 基于注解的Mybatis mapper 接口注意事项
			
    基于注解的Mybatis mapper 接口功能没有mapper xml配置文件丰富,并且动态sql语句的灵活性不能和xml配置相比. 这里仅仅说一下基于注解的动态sql注意事项: Mybatis提供 ...
    
			
    3. 
						
  3. angularjs 可以加入html标签方法------ng-bind-html的用法总结（2）
			
    angular-ngSanitize模块-$sanitize服务详解 本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指 ...
    
			
    4. 
						
  4. .net站内搜索
			
    蜘蛛,spider 爬网站.爬网站的过程:1.发现网站.百度把csdn当成关键网站,顺着已知的网站链接找到新的网站或者新的页面.SEO(搜索引擎优化)的第一个手段:建外链(外部链接).新网站吸引蜘蛛. ...
    
			
    5. 
						
  5. 键值对集合 dict(字典)
			
    xx= { ss, ss } 创建字典 len(ss) 返回字典到长度,len函数可以返回任何集合的长度,list.tuple.dict都是集合的一种 什么是dict 我们已经知道,list 和 tu ...
    
			
    6. 
						
  6. 配置HADOOP_HOME
			
    配置HADOOP_HOME export HADOOP_HOME=/usr/hadoop-1.2.0export PATH=$PATH:$HADOOP_HOME/bin:$HADOOP_HOME/sb ...
    
			
    7. 
						
  7. Windows 下tomcat安装及将多个tomcat注册为Windows服务
			
    一.应用场景 虽然Windows在当下已经不再是我们作为服务器操作系统平台的首选,但是还是有一些开发商或者项目整体需求的限制必须运行在Windows系统平台之下.为了避免多个应用部署在同一个tomca ...
    
			
    8. 
						
  8. CMake 简介与使用
			
    cross platform make的缩写. 是一个比make更高级的编译配置工具,它可以根据不同平台.不同的编译器,生成相应的Makefile或者vcproj项目文件.通过编写CMakeLists ...
    
			
    9. 
						
  9. cobbler 更换dns和dhcp服务器为dnsmasq
			
    1) 需要配置/etc/cobbler/module.conf, 把manage_dns和manage_dhcp改为manage_dnsmasq 2) 重启cobbler和dnsmasq服务,dnsm ...
    
			
    10. 
						
  10. Unity3D学习笔记——NGUI之UISlider
			
    UISlider:用于创建简单的滑动块和进度条,并且可以添加一个拇指按钮. 效果图如下: 一:使用步骤 1.从上面的效果看出,这个工具由四部分组成:背景图,进度图,进度lable显示,拇指按钮. 2. ...
    
			
    11.