web-dev-qa-db-ja.com

Google Analytics：シングルページアプリケーションでページを追跡する方法は？

現在、私の website では、速度を上げるためにリンクでHTML5の pushState() とpopStateを使用しました。ただし、これによってrealURLが実際に変更されることはなく、 Google Analytics 'に影響を与えて混乱させるようです。 sコード。 （URLの変更は表示されません）これに対する可能な解決策はありますか？ありがとう、

javascripthtmlweb-applicationsgoogle-analyticssingle-page-application
31
Derek 朕會功夫

新しいanalytics.js AP​​Iを使用している場合、 Googleのドキュメント イベントをトリガーするには次のコードが必要です。

ga('send', 'pageview', '/some-page');

古いga.js AP​​Iを使用している場合、 David Walshが提案 AJAX Webサイトで_gaq.Pushメソッドを使用する：

_gaq.Push(['_trackPageview', '/some-page']);
43
Derek 朕會功夫

私はそれが古い質問であることを知っていますが、この質問はグーグルアナリティクスでのpushState（）の追跡に関するグーグルでの最初の結果であり、すべての答えが間違っているので、私はそれに答えることにしました。

他の回答では、彼らは直接ga（ 'send' .....）を使用すると述べましたが、これは間違った方法です。

最初にパラメータを「設定」し、次に「送信」を使用して追跡する必要があります。

URLのみを更新する場合は、次のコードを使用してください

// set new url 
ga('set', 'page', '/new-page');

// send it for tracking
ga('send', 'pageview');

URLとタイトルを更新する場合は、タイトルパラメータを追加します

// set new url and title
ga('set', {
  page: '/new-page',
  title: 'New Page'
});

// send it for tracking
ga('send', 'pageview');

ソース シングルページアプリケーショントラッキング-Webトラッキング（analytics.js）

22
Nicolo

最近の回答（2017）

これで、autotrack.jsを拡張するスクリプトであるGoogleの analytics.jsを使用できます。

これには、シングルページアプリケーション用のRLの変更を自動的に追跡するプラグインが含まれています。

スクリプトと次の行をHTMLに含める必要があります。

ga('require', 'urlChangeTracker');
9
GG.

2018年2月の更新-グローバルサイトタグ（gtag.js）

Google Analyticsには新しいトラッキングコードスニペットがあるため、他の回答はgtagでは機能しない可能性があります。

これはデフォルトのトラッキングコードです。 URLが変更されるたびに実行しようとしても、実行されるのは1回だけです。

gtag('config', 'GA_TRACKING_ID');

しかし、page_pathパラメータGA手動で実行）。

gtag('config', 'GA_TRACKING_ID', {'page_path': '/new-page.html'});

そして、私たちはこのようなものを作ることができます。

var Origin = window.location.protocol + '//' + window.location.Host;
var pathname = window.location.href.substr(Origin.length);
gtag('config', 'GA_TRACKING_ID', {'page_path': pathname});

gtag.jsを使用したシングルページアプリケーションの追跡（Googleドキュメント）

6
ozgrozer

これを書いている時点で、ここ2013年9月に
Googleアナリティクスには新しいJavaScript APIがあります。

Googleの新しい "analytics.js"非同期スニペットを含めたら、sendpageviewコマンドを使用してページを追跡します。

ga('send','pageview');

PushStateの狂気の後、これを使用してsend pageview command非同期ナビゲーションを追跡します。 Analytics.jsを使用したページトラッキングに関するGoogleのドキュメント 、send pageviewコマンドは、pushStateによって指定された新しい場所を魔法のように読み取って追跡します。send pageview commandが呼び出された瞬間に、次を使用します。デフォルトでは、次の値を指定できます（ただし、指定することはできます）。

var locationToTrack = window.location.protocol+'//'
  +window.location.hostname 
  +window.location.pathname 
  +window.location.search;

var titleToTrack = document.title;

var pathToTrack = location.pathname+location.search;

注：Googleの標準分析スニペットには、最初のページビュー送信コマンドが含まれています。

更新：

上記の方法でウェブサイトにGoogleAnalyticsトラッキングを実装しましたが、pushStateページビューを正常にトラッキングしていないようです。

Send pageviewコマンドで場所、タイトル、ページ名を明示的に指定して、GAが正しく追跡されるかどうかを確認します。

忘れない限り、結果を投稿します。

1
ChaseMoskal