Angularitics2不會觸發Google跟蹤代碼管理器/ Analytics中的路由更改

嗨，我已設置Google跟蹤代碼管理器，並在正文標記的開頭添加了腳本。我已經將它設置爲它在自述文件中顯示的樣子，並添加了AngulariticsModule，Angularitics2GoogleTagManager等。在自述文件中，它表示添加它會自動將路由更改發送到Google Analytics Google Analytics跟蹤代碼管理器中的Google Analytics。Angularitics2不會觸發Google跟蹤代碼管理器/ Analytics中的路由更改

但是當我轉到Google Analytics並查看實時概覽時。我可以看到它正確顯示，但是當我轉到不同的路線時，它不會更新活動頁面。所以我不確定它是否正常工作。但是，當我按F5時，它確實會更改Google Analytics內的活動頁面。

我有一種感覺Angularitics不適用於我的angular2應用程序。只是索引內的腳本。

我正在使用Angular Cli 1.0，它使用Angular v4.0。

的index.html

<body> 
<!-- Google Tag Manager --> 
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script> 
<!-- End Google Tag Manager --> 

<app-root></app-root>

App.Module

imports: [ 
    BrowserAnimationsModule, 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(routes), 
    Angulartics2Module.forRoot([ Angulartics2GoogleTagManager ]), 
],

路由器

export const routes: Routes = [ 
{ 
    path: '', 
    redirectTo: '/nl/landing', pathMatch: 'full', //main language set here 
}, 
{ 
    path: ':lang', 
    resolve: {root: RootResolver}, 

    children: [ 

     { 
      path: 'landing', 
      component: LandingComponent, 
      data: {title: 'Landing'} 
     }, 
     { 
      path: 'earlybird', 
      component: EarlybirdComponent, 
     }, 
    ] 
}

AppComponent

export class AppComponent { 
    constructor(
     private title: Title, 
     private meta: Meta, 
     public angulartics2GoogleTagManager: Angulartics2GoogleTagManager, 
)

我需要做些什麼才能使它工作？我錯過了什麼嗎？或者我必須在GTM內部設置一些東西？

來源

2017-04-14 Raymond the Developer

如果有人仍然在尋找類似的東西，

如果你想做的是跟蹤單個頁面應用程序的所有頁面的網址，將自動跟蹤庫解決了這個問題：https://github.com/googleanalytics/autotrack

我這個實現直接做在我的應用程序中沒有使用Angularitics或autotrack庫，因爲我有一個需要更多定製進行跟蹤的項目。

，所以我想這樣做 -

在路線定義文件：

{ path: 'product/:id', loadChildren: './...', data: { pageView: '/product/[:id]' } },

只有當我定義data: { pageView: ... }

和pageView被髮送的頁面視圖事件的頁面url是我想在事件中發送的網址數據。 [:param]是我自己發送params的正則表達式。

定義某處的GTM類別gtm.ts：

import { Injectable } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

declare let dataLayer: any; 

@Injectable() 
export class GTM { 
    constructor() { 
     // The dataLayer needs to be initialized 
     if (typeof dataLayer !== 'undefined' && dataLayer) { 
      dataLayer = (<any> window).dataLayer = (<any> window).dataLayer || []; 
     } 
    } 

    // Send virtualPageviews via dataLayer.push 
    // Change this dataLayer event as you see fit 
    pageTrack(path: string) { 
     // However you wish to send event 
     dataLayer.push({ 
      event: 'virtualPageview', 
      url: path 
     }); 
    } 

    /** 
    * Gets the full page view with substituted params 
    * e.g. converts '/product/[:id]' to 
    * '/product/12345' using resolved ActivatedRoute params 
    * @param {ActivatedRoute} route [description] 
    * @param {string}   pageView [description] 
    * @return {string}     pageView path with resolved params 
    */ 
    getResolvedPageView(route: ActivatedRoute, pageView: string) { 
     // Check if a param is referenced like this e.g. /product/[:id] 
     let regExp = new RegExp(/(\[:)(\w+)(\])/g); 
     if (regExp.test(pageView)) { 
      // Params object 
      let params = route.firstChild.snapshot.params; 
      pageView = pageView.replace(regExp, (match, p1, p2, p3) => { 
       // p1 = [: 
       // p2 = reference/param/whateverWord 
       // p3 = ] 
       return params[p2]; 
      }); 
     } 
     return pageView; 
    } 
}

然後勾路徑引導結束時，我這樣做在AppComponent：

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; 
import { GTM } from './gtm-file-location'; 
export class AppComponent implements OnInit { 
    constructor(
     private router: Router, 
     private activatedRoute: ActivatedRoute, 
     private gtm: GTM, 
     ... 
    ) {} 

    ngOnInit() { 
     // GTM Analytics pageView tracking 
     // Use 'pageView' param in data object attached to route 
     // Nice article on how this is done: 
     // https://toddmotto.com/dynamic-page-titles-angular-2-router-events 
     this.router.events 
      .filter((event) => event instanceof NavigationEnd) 
      .map(() => this.activatedRoute) 
      .map((route) => { 
       while (route.firstChild) { route = route.firstChild; }; 
       return route; 
      }) 
      .filter((route) => route.outlet === 'primary') 
      .mergeMap((route) => route.data) // Get route data object 
      .subscribe((event) => { 
       // Only send pageView event if data: { pageView: 'xxx' } is set 
       // Or remove if condition to send everything 
       if (event['pageView']) { 
        let trackedUrl = this.gtm.getResolvedPageView(this.activatedRoute, event['pageView']); 
        this.gtm.pageTrack(trackedUrl); 
       } 
      }); 
     } 
    } 
    ...

有可能是更好的方式。希望這對某人有幫助！

來源

2017-08-14 10:18:16 Xuwen

Angularitics2不會觸發Google跟蹤代碼管理器/ Analytics中的路由更改

回答

相關問題