角度とGoogle解析論

29239 ワード
angular テキストリンク

tldr;
何度も我々はユーザーが行うかを追跡するアプリケーションにGoogle Analyticsを挿入する必要があるとき、またはアプリケーションで行く.しかし、例えば、静的なサイトよりも角度の異なる仕事のような単一ページアプリ.この記事では、Google Analyticsを読み込み、ページビューのトラッキングを設定するサービスを作成する方法を示します.

Getting Started
この投稿を開始する前に、Google Analyticsに行ってプロジェクトを設定する必要があります.私は、このブログの記事では、それをカバーするつもりはないが、何をすべきかを示すためにそこに多くのチュートリアルがあります.プロジェクトを設定したら、コードスニペットをあなたのウェブサイトに注入する必要があります.次のようになります.
<script src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXX-X"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'XX-XXXXXXXX-X');
</script>
' XXXXXXXXXX - X 'はAnalyticsの設定時に与えられた解析サイトのIDです.したら、すべての情報を持って、次のステップに行く準備が整いました.

Google Analytics Service
我々が静的サイトを構築しているならば、あなたがページからページまで動かされるたびに、サイトを再読み込みした1つhead 各ページのセクション.しかし、シングルページアプリケーションはそのように動作しません.インデックス.角度のアプリケーションのHTMLファイルを一度だけロードされ、その後、動的にページのすべてのコンテンツは、ユーザーが別のリンクをクリックするとスワップアウトされます.それで、我々は少し異なっているページ・ビューをしなければなりません.
すべてのGoogle Analyticsの機能を管理するサービスを作成します.
ng g s google-analytics
このサービスでは、Google Analyticsが与えたスクリプトをロードする必要があります.セットアップとシングルを行うプライベート関数を作りますinit メインから呼び出される関数AppComponent . しかし、それを示す前に、我々は第2を取る必要がありますscript 上からgtag('config', 'XX-XXXXXXXX-X') そして、それを別のものに入れなさい.js ファイル.そのファイルは次のようになります.
// google-analytics-script.js
window.dataLayer = window.dataLayer || [];
function gtag() {
    dataLayer.push(arguments);
}
gtag('js', new Date());
に加えるassets あなたのアプリケーションの配列angular.json ファイル
<!-- angular.json -->
{
  ...
  "build": {
    "options": {
      "assets": ["path/to/google-analytics-script.js"]
    }
  }
}
さて、今、我々はGoogle Analyticsスクリプトのその第2の部分を持っています.js 我々がロードすることができるファイル、我々のサービスを見ましょう:
// google-analytics.service.ts
declare let gtag: Function;

export class GoogleAnalyticsService {
  private googleAnalyticsId: string;
  private renderer2: Renderer2;
  private scriptsLoaded: boolean = false;

  constructor(
    private rendererFactory2: RendererFactory2,
    @Inject(DOCUMENT) private _document: Document,
    private _config: RuntimeConfigLoaderService,
    private _router: Router,
  ) {
    this.renderer2 = this.rendererFactory2.createRenderer(null, null);
    this.googleAnalyticsId = this._config.getConfigObjectKey('googleAnalyticsId');
  }

  init() {
    if (!this.scriptsLoaded) {
      this.insertMainScript();
    }
  }

  private insertMainScript() {
    if (this.googleAnalyticsId) {
      const script: HTMLScriptElement = this.renderer2.createElement('script');
      script.type = 'text/javascript';
      script.onload = this.insertSecondHalfOfScript.bind(this);
      script.src = `https://www.googletagmanager.com/gtag/js?id=${this.googleAnalyticsId}`;
      script.text = '';
      this.renderer2.appendChild(this._document.body, script);
    }
  }

  private insertSecondHalfOfScript() {
    const script: HTMLScriptElement = this.renderer2.createElement('script');
    script.type = 'text/javascript';
    script.src = '/path/to/google-analytics-script.js';
    script.text = '';
    this.renderer2.appendChild(this._document.body, script);
    script.onload = () => {
      this.scriptsLoaded = true;
    };
  }
}
これを壊しましょう.まず、宣言する必要がありますgtag 私たちが後でそれを呼ぶことができるように、クラスの外で.次に、注入する.RendererFactory2 , DOCUMENT , Router , and RuntimeConfigLoaderService このサービスに.あなたが使用する必要はありません RuntimeConfigLoaderService あなたがしたくない場合は、この方法で簡単にGoogle AnalyticsのIDを変更することができますサービスに触れることなく.コンストラクタまたはサービスでは、Renderer2 スクリプトの読み込みに使用します.また、設定からGoogle AnalyticsのIDを格納します.
// google-analytics.service.ts
constructor(
  private rendererFactory2: RendererFactory2,
  @Inject(DOCUMENT) private _document: Document,
  private _config: RuntimeConfigLoaderService,
  private _router: Router,
) {
  this.renderer2 = this.rendererFactory2.createRenderer(null, null);
  this.googleAnalyticsId = this._config.getConfigObjectKey('googleAnalyticsId');
}
次に、実際にスクリプトをロードする2つのプライベート関数を作成し、公開しますinit から呼び出すことができる関数AppComponent :
// google-analytics.service.ts
init() {
  if (!this.scriptsLoaded) {
    this.insertMainScript();
  }
}

private insertMainScript() {
  if (this.googleAnalyticsId) {
    const script: HTMLScriptElement = this.renderer2.createElement('script');
    script.type = 'text/javascript';
    script.onload = this.insertSecondHalfOfScript.bind(this);
    script.src = `https://www.googletagmanager.com/gtag/js?id=${this.googleAnalyticsId}`;
    script.text = '';

   this.renderer2.appendChild(this._document.body, script);
  }
}

private insertSecondHalfOfScript() {
  const script: HTMLScriptElement = this.renderer2.createElement('script');
  script.type = 'text/javascript';
  script.src = '/path/to/google-analytics-script.js';
  script.text = '';
  this.renderer2.appendChild(this._document.body, script);
  script.onload = () => {
    this.scriptsLoaded = true;
  };
}
にinit 機能は、我々はinsertMainScript スクリプトがロードされていない場合に機能します.The insertMainScript 関数は、googleAnalyticsId . 私たちはscript エレメント付きRenderer2 , を設定し、type and src 属性.また、関数を呼び出すように言います.insertSecondHalfOfScript , この最初のスクリプトがロードされたあと.その後、新しく作成されたscript を返します.
番目の関数では、上記で作成したファイルを読み込みます.google-analytics-script.js . ロードされると、矢印関数を実行し、scriptsLoaded 変数をtrueに設定します.
これらの3つの関数を作成すると、アプリケーションが必要なGoogle Analyticsスクリプトをロードする準備ができました.あなたのメインでAppComponent , インジェクションこの新しいGoogleAnalyticsService を呼び出し、init メソッドngOnInit :
export class AppComponent implements OnInit {
  constructor(..., private _analytics: GoogleAnalyticsService) {}

  ngOnInit() {
    this._analytics.init();
  }
}

Tracking Page Views
それで、我々のサービスは働いていて、我々のためにGoogle Analyticsをロードします.しかし、我々はまだそれをページビューを追跡する必要があります.これを行うには、角度ルータを使用して、Google Analytics関数を呼び出してナビゲーションイベントを追跡する必要があります.このようにして、関数を追加しますGoogleAnalyticsService :
// google-analytics.service.ts
trackSinglePageView(event: NavigationEnd) {
  if (this.googleAnalyticsId && this.scriptsLoaded) {
    gtag('config', this.googleAnalyticsId, { page_path: event.urlAfterRedirects });
  }
}

trackPageViews() {
  return this._router.events.pipe(
    filter(() => this.scriptsLoaded === true),
    filter((evt: RouterEvent) => evt instanceof NavigationEnd),
    tap((event: NavigationEnd) => {
      this.trackSinglePageView(event);
    }),
  );
}
The trackPageViews 関数は、ページビューがGoogle Analyticsにログオンされていることを確認するために購読する必要があるものです.それが本当の速さをしていることをカバーしましょう.まず、我々はevents 角度ルータからの観測可能なストリームインサイドpipe , 私たちはfilter 演算子最初の1つは、私たちのスクリプトをロードする前に、何かを追跡することを確認します.二番目filter 演算子は、現在のイベントがNavigationEnd イベント.ルータがルーティングされるならば、我々はGoogle Analyticsに何かを報告したいだけです.最後に、我々はtap 演算子は、Google Analyticsにイベントを送信する関数を呼び出します.あなたはGoogle Analyticsに報告することができますtap 演算子、しかし、これに逆さまにすることができます呼び出すことですtrackSinglePageView 必要に応じてどこからでも.
我々の背中AppComponent , 我々は、ちょうどそれから返される観測可能なものを購読する必要がありますtrackPageViews ファンクションngOnInit :
export class AppComponent implements OnInit {
  constructor(..., private _analytics: GoogleAnalyticsService) {}

  ngOnInit() {
    this._analytics.init();
    this._analytics.trackPageViews().subscribe();
  }
}
と、我々のアプリは、Google Analyticsに各ページを表示を開始します.

Tracking Other Events
あなたはGoogle Analyticsを使用して他のイベントを追跡する必要がある場合はGoogleAnalyticsService :
trackEvent(
  { eventName, eventCategory, eventAction, eventLabel, eventValue } = {
    eventName: null,
    eventCategory: null,
    eventAction: null,
    eventLabel: null,
    eventValue: null,
  },
) {
  gtag('event', eventName, {
    eventCategory,
    eventLabel,
    eventAction,
    eventValue,
  });
}
この関数は使用しますが、イベント名、カテゴリ、アクション、ラベル、および値を関数に渡します.その後、Google Analyticsにそのイベントを渡します.あなたのアプリケーションのどこからでも、この関数を呼び出すことができますいつでも、ユーザーが何かを追跡する.

Conclusion
全体的に、私は思ったよりGoogle Analyticsを私のサイトに加えるのがより簡単でした.他の何かをする前にスクリプトがロードされたことを確認して、それをすべてのサービスに追加するにはもう少し時間がかかりましたが、この方法ではindex.html アプリのために直接.また、IDが環境変数であるので、私は現在、我々のQA環境と生産のための1つのIDのために1つのIDを持ちます.私が編集しているならばindex.html 直接ファイルは、物事はもっと複雑になります.これは特に私がこれを実装しているものであることを行うのに便利な方法です.今ちょうどコードのカップル線とGoogle AnalyticsのIDを追加すると、私のアプリはGoogle Analyticsの追跡を持つことができます.
全体のサービスを見ることができますgist .
Codeforces Round #693 (Div. 3)
Type Script(4)テキストタイプ