Google Analytics: как отслеживать страницы в одностраничном приложении? - PullRequest
Новая
       19

Google Analytics: как отслеживать страницы в одностраничном приложении?

31 голосов
/ 09 марта 2012

В настоящее время на моем веб-сайте я использовал ссылки HTML5 pushState() и popState в целях увеличения скорости.Однако это на самом деле не меняет реальный URL, и похоже, что это повлияет и испортит код Google Analytics .(не показывает изменение URL) Есть ли возможное решение для этого?Спасибо,

Ответы [ 6 ]

43 голосов
/ 09 марта 2012

Если вы используете более новый analytics.js API, Документация Google требует следующий код для запуска события: 

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

Если вы используете более старый ga.js API Дэвид Уолш предлагает веб-сайтам AJAX использовать метод _gaq.push: 

_gaq.push(['_trackPageview', '/some-page']);
22 голосов
/ 19 сентября 2015

Я знаю, что это старый вопрос, но так как этот вопрос является первым результатом в Google по поводу отслеживания pushState () в Google Analytics и все ответы неверны, я решил ответить на него.

В других ответах, которые они упомянули, использовать напрямуюga («отправить» .....), но это неправильный способ сделать это.

Сначала вам нужно «установить» параметры, а затем использовать «отправить» для отслеживания.

Если вы хотите обновить только 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');

Источник Отслеживание приложений на одной странице - Отслеживание в Интернете (analytics.js)

9 голосов
/ 23 февраля 2017

Недавний ответ (2017)

Теперь вы можете использовать Google's autotrack.js, скрипт, улучшающий analytics.js.

Включает плагин, который автоматически отслеживает изменения URL для одностраничных приложений.

Вам просто нужно включить скрипт и следующую строку в ваш html: 

ga('require', 'urlChangeTracker');
5 голосов
/ 25 июня 2018

Обновление за февраль 2018 года - глобальный тег сайта (gtag.js)

В Google Analytics есть новый фрагмент кода отслеживания, поэтому другие ответы могут не работать для gtag.

Это код отслеживания по умолчанию. Он запускается только один раз, хотя мы пытаемся запустить его при каждом изменении URL. 

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)

1 голос
/ 18 сентября 2013

На момент написания статьи здесь, в сентябре 2013 года,
В Google Analytics появился новый API-интерфейс JavaScript.

После добавления нового асинхронного фрагмента Google " analytics.js " используйте команду send pageview для отслеживания страниц:

ga('send','pageview');

После сумасшествия pushState используйте эту команду send pageview для отслеживания асинхронной навигации. Согласно Документации Google по отслеживанию страниц с помощью Analytics.js , команда отправки просмотра страниц волшебным образом будет читать и отслеживать новое местоположение, заданное pushState, как и будет, в момент вызова команды send pageview по умолчанию используются следующие значения (хотя вы можете их указать): 

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 включает начальную команду отправки просмотра страницы.

Обновление:

Я реализовал отслеживание Google Analytics на своем веб-сайте описанным выше способом, однако, похоже, он не отслеживает успешно ни одно из просмотров страниц pushState.

Я попытаюсь явно указать местоположение, заголовок и имя страницы в команде send pageview и посмотреть, правильно ли отслеживает GA.

Я отправлю вам результаты, если не забуду.

0 голосов
/ 30 апреля 2014

У меня также были проблемы с ga ('send', 'pageview'); после использования history.pushState.

Обходной путь был просто сделать URL явным. га ( 'отправить', '' просмотр страницы '/ My-URL')

...