Как незаметно поломать систему аналитики для сайта на базе SPA

На тему настройки системы аналитики для SPA-сайтов уже написано много хороших статей, ссылки на самые полезные из них я добавлю в конце этой статьи. Здесь я хочу рассказать об одной особенности настройки отслеживания, которая может незаметно поломать систему вашей отчетности для таких сайтов.

Для начала в двух словах хочу рассказать, что такое SPA и чем такие сайты отличаются от обычных. Single Page Application (SPA) — это веб-сайты, контент на которых подгружается динамически, обычно посредством AJAX. Пример SPA-сайта: https://flatfy.kz/. На этом сайте страница загружается только один раз, все остальные страницы прорисовуются без фактической перезагрузки в браузере, как на обычных сайтах. Чтобы определить использует ли ваш сайт SPA можно зайти на сайт и перейти на какую-то страницу. Если при загрузке второй страницы поменялся URL, но браузер не обновил страницу (кнопка обновления страницы в браузере не поменяла режим) — значит у вас SPA.

Главными особенностями таких сайтов с точки зрения аналитики являются:

• На SPA сайтах параметр HTTP Referrer хранится до полной перезагрузки страницы в браузере.
• Следовательно, события DOM Ready и Window Loaded появляются только, когда страница фактически загружается в браузере. Если настроить какие-то теги на эти события (и от них производные), то есть риск потерять значительную часть данных. 

Почему важно учитывать эти особенности во время настройки Google Analytics для такого сайта? Давайте рассмотрим реальный пример отчета по основным путям конверсии в Google Analytics. На первый взгляд в нем нет ничего необычного, но если присмотреться можно заметить странную закономерность: после платного источника трафика загадочным образом идет реферальный источник. На первый взгляд это выглядит так, что ссылки в рекламе местами забыли разметить UTM-метками. 

На самом же деле проблема здесь в другом. В этом примере разрывается сессия по причине переопределения параметра «location» (&dl) при отправке информации о просмотре страницы в SPA. Если внимательно прочитать официальную справку Google Analytics по настройке отслеживания SPA — там об этом написано.

Для того, чтобы понять почему так происходит, необходимо знать особенности определения сеанса в Google Analytics. Давайте разберем пример:

• Пользователь попадает на SPA-сайт по ссылке:
  https://test.com/?utm_source=facebook&utm_medium=cpc
• GA отправляет первый хит с такими полями и значениями:
  - dl=https://test.com/?utm_source=facebook&utm_medium=cpc
  - dr=https://www.facebook.com/
• Пользователь переходит на вторую страницу сайта и если в этом случае переопределяется location, то в GA уходят такие поля:
  - dl=https://test.com/page-2/
  - dr=https://www.facebook.com/

Как эти данные будут отображаться в GA? Первый хит спровоцировал создание сеанса с параметрами source/medium = facebook/cpc, потому что UTM-метки имеют выше приоритет, чем Referrer. А второй хит обрывает текущий сеанс (что делает его отказом) и создает новый с параметрами facebook.com/referral.  Поскольку здесь UTM-меток нет — GA считывает Referrer и понимает что в таком случае сеанс уже имеет другие параметры источников трафика. Для GA такой (второй) переход выглядит, как обычный переход из соц. сети, где не указаны UTM-метки.

Труднее всего заметить такую проблему используя только платную рекламу в Google, поскольку в этом случае цепочки не выглядят слишком странно: после google/cpc идет google/organic — здесь трудно заметить аномальную ситуацию.

Как диагностировать проблему на SPA-сайте?

Во-первых, проверьте какие dl и dr отправляются в случае, описанном выше. В этом поможет расширение Google Analytics Debugger.

Во-вторых, такая проблема синтетически увеличивает количество сеансов. Если после запуска SPA у вас увеличилось количество сеансов при таком же количестве пользователей — вероятно, у вас есть такая проблема.

В-третьих, показатель отказов по платной рекламе увеличился.

Как решается проблема?

Чтобы решить такую проблему, достаточно вместо location переопределять page. Этого достаточно :) В принципе, в справке об этом и написано. Но ведь кто читает эту справку, правда? :) Обратите внимание, Google просит не изменят ни location, ни referrer. Думаю, теперь понятно, что эти параметры играют важную роль при определении источников трафика.

Выводы:

1) если переопределять location или referrer, вместо page — можно поломать систему аналитики.
2) стоит внимательно изучать официальную справку Google Analytics :)

Полезные ссылки по теме настройки аналитики для SPA:

• Как настроить веб-аналитику одностраничных приложений (SPA)
• Javascript модуль «react-ga» для SPA сайтов на базе React.JS, который упрощает процесс настройки Google Analytics (analytics.js).
• Как настроить отслеживание SPA через Google Tag Manager — обзор нескольких способов.
• Еще одна статья по настройке Google Analytics для SPA от Lunametrics.

UPD: готовое решение «GA Starter Pack» для импорта в Google Tag Manager находится здесь.