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. angular2的ElementRef在组件中获取不到

    angular2的ElementRef在组件中获取不到 angular2不推荐操作dom,但是实际应用中不可避免的需要使用到dom操作,怎么操作,官方文档提供了一系列api(ElementRef,Vi ...

  3. SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制?

    SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制? 可以这样做: 登陆之前,所有页面跳到 登陆页面:包括随便输入的路由地址. 登陆后,跳到相应页面:随便输入的.不存在的路由地址,才跳到 ...

  4. SEO 在 SPA 站点中的实践

    背景 观察基于 create-react-doc 搭建的文档站点, 发现网页代码光秃秃的一片(见下图).这显然是单页应用 (SPA) 站点的通病 -- 不利于文档被搜索引擎搜索 (SEO). 难道 S ...

  5. (转)ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法

    早上同事用PL/SQL连接虚拟机中的Oracle数据库,发现又报了"ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务"错误,帮其解决后,发现很多人遇到过这样的问 ...

  6. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  7. 在html中添加script脚本的方法和注意事项

    在html中添加script脚本有两种方法,直接将javascript代码添加到html中与添加外部js文件,这两种方法都比较常用,大家可以根据自己需要自由选择 在html中添加<script& ...

  8. MVC中使用Entity Framework 基于方法的查询学习笔记 (二)

    解释,不解释: 紧接上文,我们在Visual Studio2012中看到系统为我们自动创建的视图(View)文件Index.cshtml中,开头有如下这句话: @model IEnumerable&l ...

  9. ORA-01652:无法通过128(在表空间temp中)扩展temp段 解决方法

    ORA-01652:无法通过128(在表空间temp中)扩展temp段 解决方法 (2016-10-21 16:49:53)   今天在做一个查询的时候,报了一个"ORA-01652无法通过 ...

随机推荐

  1. jquery的post()

    jQuery ajax - post() 方法 jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY ...

  2. Android项目使用Dagger2进行依赖注入

    原文链接:http://code.tutsplus.com/tutorials/dependency-injection-with-dagger-2-on-android–cms-23345 依赖注入 ...

  3. 指尖上的电商---(11)Windows平台部署SolrCloud

    SolrCloud是一种分布式解决方式,是基于zookeeper和solr的,能够简单理解为一种集群,能够提供分布式查询.分布式写索引. SolrCloud的结构大致是这种,一个SolrCloud包含 ...

  4. ext2文件系统了解

    一个磁盘可以划分成多个分区,每个分区必须先用格式化工具(例如mkfs命令)格式化成某种格式的文件系统,然后才能存储文件,格式化的过程会在磁盘上写一些管理存储布局的信息.下以ext2文件系统为例说明文件 ...

  5. linux上安装python3同时保留python2

    linux上安装python3同时保留python2?这个就要用到上篇说到的path变量了. 具体介绍及操作 这里我下载python3.6版本来进行介绍 django默认数据库为sqlite3,所以安 ...

  6. 搭建RocketMQ踩的坑-内存不足

    环境是vmvare+ubuntu 1.http://rocketmq.apache.org/docs/quick-start/ 按照官网来启动mqnamesrv和mqbroker报错 错误如下 The ...

  7. @Cache(usage = CacheConcurrencyStrategy.READ_WRITE)什么意思??

    从hibernate2.1开始ehcache已经作为hibernate的默认缓存方案(二级缓存方案 sessionfactory级别), 在项目中有针对性的使用缓存将对性能的提升右很大的帮助. 要使用 ...

  8. 对Servlet容器的补充和一个问题的请教

    [0]README 0.1)本文是对 一个servlet容器  的补充: 0.2)发这个博文的最终目的是为了请教各位前辈,帮我解决一个问题,问题描述在文末, 谢谢: [1]Servlet容器 1.1) ...

  9. python 自动化之路 day 19 Django基础[二]

    Django - 路由系统 url.py - 视图函数 views.py - 数据库操作 models.py - 模板引擎渲染 - HttpReponse(字符串) - render(request, ...

  10. sqoop-1.4.4安装配置

    环境:redhat6.5 hadoop2.4.1 感谢: http://wenku.baidu.com/view/a9083da8dd3383c4bb4cd274.html注释hbase检查 感谢: ...