在Angular 2中嵌入跟踪代码

时间:2016-11-29 23:06:27

标签: javascript angular cookies marketo

我正在寻找在我的Angular 2应用中实现跟踪代码的最佳方式。不是Google Analytics,而是像Marketo等其他第三方供应商。每次加载组件(页面)时,我都需要触发代码。我尝试使用路由器更改只取得了部分成功(以及一些意想不到的结果)。这种类型的某些版本有效但不完全。

this.router.events.subscribe(() => {
     //tracking code goes here
});

是否有其他人在Angular2或其他SPA上成功进行第三方跟踪?将标记放在模板文件中不起作用。感谢。

1 个答案:

答案 0 :(得分:0)

在您要跟踪的任何路线上使用后卫。每次激活路线时都会调用它:

import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {Observable} from "rxjs";

export class TrackingGuard implements CanActivate
{

    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean>|boolean
    {
        console.log(state.url);
        console.log(state.queryParams);
        return true;
    }

}

在您的路线定义中,您指定路线的哪个组件只需添加canActivate: [TrackingGuard]。在上面的示例中,您将可以访问url和任何查询参数。建议制作一些其他服务,向跟踪api发出请求,只是从警卫处打电话。