设为首页 - 加入收藏 温州站长网 (https://www.0577zz.com)-电商,营销推广,科技,建站经验,云计算,5G,大数据,站长网!
热搜: 优化 为什么 什么 官方
当前位置: 首页 > 教程 > 正文

Google Analytics的一些技巧推荐

发布时间:2021-06-03 08:50 所属栏目:[教程] 来源:互联网
导读:副标题#e# 添加 analytics.js 脚本 Google 已经帮我们做好了接入之前需要做的所有事情,接下来就是我们的工作了。不过我们要做的也很简单,只需要把下面这段脚本添加到应用的index.html里,就可以了: script (function(i,s,o,g,r,a,m){i[GoogleAnalyticsOb
添加 analytics.js 脚本

Google 已经帮我们做好了接入之前需要做的所有事情,接下来就是我们的工作了。不过我们要做的也很简单,只需要把下面这段脚本添加到应用的 index.html 里,就可以了:

<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*newDate();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');

</script>

现在我们来看一下 Google Analytics 是如何在应用程序中初始化的。

创建追踪器

首先创建一个应用程序的追踪器。在 app.component.ts 中执行以下两个步骤:

声明一个名为 ga,类型为 any 的全局变量(在 Typescript 中需要制定变量类型);

将下面一行代码加入到 ngInInit() 中。

ga('create',<你的追踪 ID>,'auto');

这样就已经成功地在应用程序中初始化了一个 Google Analytics 的追踪器了。由于追踪器的初始化是在 OnInit() 函数中执行的,因此每当应用程序启动,追踪器就会启动。

在单页应用中记录页面访问情况

我们需要实现的是记录访问路由route-visits。

如何记录用户在一个应用中不同部分的访问,这是一个难点。从功能上来看,单页应用中的路由对应了传统多页面应用中各个页面之间的跳转,因此我们需要记录访问路由。要做到这一点尽管不算简单,但仍然是可以实现的。在 app.component.ts 的 ngOnInit() 函数中添加以下的代码片段:

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

...

constructor(public router:Router){}

...

this.router.events.subscribe(

event =>{

if(event instanceof NavigationEnd){

ga('set','page', event.urlAfterRedirects);

ga('send',{ hitType:'pageview', hitCallback:()=>{this.pageViewSent =true;}});

}

}

);

神奇的是,只需要这么几行代码,就实现了 Angular 应用中记录页面访问情况的功能。

这段代码实际上做了以下几件事情:

从 Angular Router 中导入了 Router、NavigationEnd;

通过构造函数中将 Router 添加到组件中;

然后订阅 router 事件,也就是由 Angular Router 发出的所有事件;

只要产生了一个 NavigationEnd 事件实例,就将路由和目标作为一个页面访问进行记录。

这样,只要使用到了页面路由,就会向 Google Analytics 发送一条页面访问记录,在 Google Analytics 的在线控制台中可以看到这些记录。

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章
热点阅读