在Angular 2中嵌入跟蹤代碼

Question

我正在尋找在我的Angular 2應用中實施跟蹤代碼的最佳方式。不是谷歌分析，但像Marketo和其他第三方供應商。每次加載組件（頁面）時，我都需要激發代碼。我嘗試過使用路由器更改，只取得了部分成功（和一些意外的結果）。這種工作的一些版本，但不完全。

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

有沒有其他人在Angular2或其他SPA上第三方跟蹤方面取得過成功？將標籤放在模板文件中不起作用。謝謝。

Answer 1

只要在你想跟蹤的任何路線上使用警衛。它都會被調用的路徑被激活時間：

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，只是打電話，如果從警衛。