JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Google Analyticsでシングルページアプリケーション（SPA）のページビューを正しく追跡する方法

シングルページアプリケーション（SPA）とは

シングルページアプリケーション（SPA）は、WebアプリケーションやWebサイトの構築手法の一つです。サイト内を移動するために必要なリソースを、最初のページ読み込み時にまとめて取得するのが特徴です。

その後、ユーザーがサイト内のリンクをクリックしたりページ上で操作したりすると、必要なコンテンツだけが動的に読み込まれます。従来のマルチページサイトのようにブラウザ全体を再読み込みしないため、Google Analyticsの標準的な設定ではページ遷移が正しく記録されないという課題があります。

読み込みのたびに、トラッカーに保存されているデータも併せて更新される仕組みになっています。

トラッカーを更新する

SPAではURLが変わってもページ全体が再読み込みされないため、ページ遷移のたびにトラッカーのページ情報を手動で更新する必要があります。次のコードで新しいページパスを設定しましょう。

ga('set', 'page', '/new-page.html');

ページビューを記録する

トラッカーの更新直後に、ページビューを送信して計測を完了させます。

ga('send', 'pageview');

この2つの処理を、History APIなどを利用して検出したルート変更のタイミングで実行するように実装すれば、SPAでも各ページ遷移を正確に追跡できるようになります。

  1. Google ChromeでWebページを簡単に翻訳する方法【PC・スマホ完全ガイド】

    Google Chromeには、外国語のウェブサイトを自動的に翻訳する非常に便利な機能が標準で組み込まれています。言語の壁を気にせず、世界中の情報を自由に閲覧できるのが大きな魅力です。本記事では、デスクトップPCおよびモバイル端末のChromeを使ってWebページを翻訳する方法を、初心者にもわかりやすく解説します。 PC版Chromeでページを簡単に翻訳する方法 翻訳機能はChromeブラウザに最初から内蔵されているため、拡張機能のインストールやフラグの有効化などは一切不要です。 1. パソコンでChromeブラウザを開き、外国語のWebページにアクセスします。 2. アドレスバーの

  2. Googleドキュメントで変更履歴を追跡する方法|提案モード・バージョン履歴の使い方

    Googleドキュメントは、Googleが提供するクラウド型生産性ツールスイートの一部です。文書の共同編集や共有を簡単に行えるのが大きな魅力です。この記事では、Googleドキュメントで変更履歴を追跡し、最新バージョンで何が変更されたのかを確認する方法をご紹介します。 Wordの「変更履歴」との違い Microsoft Wordでは、文書の共同作業は基本的に順番に行われます。一人が「変更履歴」機能を有効にして文書を編集し、完了したら次の人にレビューを依頼します。その人が変更内容を確認しながら編集を加えていくため、同じ文書の複数バージョンが作られていくことになります。 一方、Googleドキュメ