Angularitics2がGoogleタグマネージャ/アナリティクスのルート変更を引き起こさない

こんにちは私は、Googleタグマネージャを設定し、bodyタグの先頭にスクリプトを追加しました。 Readmeに表示されているように設定し、AngulariticsModule、Angularitics2GoogleTagManagerなどを追加しました。Readmeでは、これを追加すると、Googleタグマネージャ内のAnalyticsのケースで自動的にルート変更がAnalyticsに送信されます。Angularitics2がGoogleタグマネージャ/アナリティクスのルート変更を引き起こさない

Googleアナリティクスにアクセスしてリアルタイム概要を表示すると、私はそれが正しく表示されることがわかりますが、私が別のルートに行くと、それはアクティブページを更新しません。正しく動作するかどうかはわかりません。しかし、F5キーを押すとAnalytics内のアクティブページが変更されます。

私は感覚を持っていますAngulariticsは私のangular2アプリで動作していません。インデックス内のスクリプトだけ。

私はAngular v4.0を使用するAngular Cli 1.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

誰もがまだ似た何かを探していた場合は、

あなたがしたいすべてが自動追跡ライブラリは、問題を解決し、単一ページのアプリケーション内のすべてのページのURLを追跡する場合：https://github.com/googleanalytics/autotrack

私が直接この実装を行いました私のアプリケーションでは、Angulariticsやオートトラックライブラリを使わずに、私は追跡のためのより多くのカスタマイズが必要なプロジェクトを持っていました。

だから私のような何かやってみたかった - ルート定義ファイルでは

を：

ページビューイベントは、私が定義した場合にのみ data: { pageView: ... }

とpageViewがページで送信され

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

urlはイベントで送信したい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タグマネージャ/アナリティクスのルート変更を引き起こさない

答えて

関連する問題