web-dev-qa-db-ja.com

angularおよびGoogleアナリティクスの統合=> gaは関数ではありません

私はangular（4）アプリケーションを実行していますが、Googleアナリティクスの統合で問題が発生しました。私は現在、GoogleアナリティクスをシングルページWebアプリケーションに追加しています。しかし、ga関数を取得して新しいURLを送信しようとすると、関数が見つからないようです。

これは私が得たコードです：

index.hbs

_<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*new Date();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');

    ga('create', 'My-key', 'auto');
</script>
_

app.component.ts

_import { Component, OnInit } from '@angular/core';
import {NavigationEnd, Router} from "@angular/router";
import {WindowRef} from "./social/windowRef";
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    user: User;
    private currentRoute: string;

    constructor(private misc: MiscService, public router: Router) {
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                console.log(event.urlAfterRedirects);
                WindowRef.get().ga('set', 'page', event.urlAfterRedirects);
                WindowRef.get().ga('send', 'pageview');
            }
        });
    }
}
_

windowRef.ts

_export class WindowRef{
    public static get(): any{
        console.log(window);
        return window;
    }
}
_

このエラーが発生しました：ERROR TypeError: windowRef_1.WindowRef.get(...).ga is not a function

console.log(WindowRef.get());を実行すると、ウィンドウにga関数が表示されますが、使用しようとすると以前のエラーが表示されます。 ここ および ここ

このメソッドを使用してストライプ関数を取得したことはよくわかりませんが、非常にうまく機能しました。

良い一日を過ごしてください ：）

javascriptangulargoogle-analyticsanalytics
8
lanetrotro

GoogleAnalyticsをAngular 4アプリに統合しようとすると同様の問題が発生しました。

私にとってのトリックは、GoogleアナリティクスコードをAppComponentのコンストラクターから ngAfterViewInit（） ライフサイクルフックに移動することでした最初にビューが完全に初期化されていることを確認してください。

これが私が得たコードです：

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

    ga('create', 'some code', 'auto');
</script>

app.component.ts：

import {AfterViewInit, Component, Inject, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';
import {NavigationEnd, Router} from '@angular/router';

// declare google analytics
declare const ga: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  constructor(@Inject(PLATFORM_ID) private platformId: Object,
              private router: Router) {}


  ngAfterViewInit(): void {
    this.router.events.subscribe(event => {
      // I check for isPlatformBrowser here because I'm using Angular Universal, you may not need it
      if (event instanceof NavigationEnd && isPlatformBrowser(this.platformId)) {
        console.log(ga); // Just to make sure it's actually the ga function
        ga('set', 'page', event.urlAfterRedirects);
        ga('send', 'pageview');
      }
    });
  }
}

これがあなたにも役立つかどうか教えてください。ごきげんよう！ :)

11
WeissDev

遅れてしまいました。GoogleAnalyticsスクリプトを本文の前に配置しませんでした。今ではうまく機能します。 @WeissDevのおかげで、ga（奇妙な）にいるにもかかわらずwindowが定義されていないのを見て私は途中でした。とにかく彼の解決策もうまくいきます。

2
lanetrotro

@WeissDevの回答が機能しない場合は、setIntervalを使用して、使用する前に準備ができていることを確認してください。

  ngAfterViewInit() {
    this.initGoogleAnalyticsPageView()
  }

  private initGoogleAnalyticsPageView() {
    const interval = setInterval(() => {
      if ((window as any).ga && (window as any).ga.getAll) {
        this.router.events.subscribe(event => {
          const ga = (window as any).ga
          if (event instanceof NavigationEnd) {
            const tracker = ga.getAll()[0]
            tracker.set('page', event.urlAfterRedirects)
            tracker.send('pageview')
          }
        })
        clearInterval(interval)
      }
    }, 50)
  }
1
danday74