websitelytics

Развертывание веб аналитики на React (SPA) сайтах

Замечание: Материал был опубликован летом 2018, возможно некоторые примеры кода устарели.

Данный раздел демонстрирует, как должна работать универсальная система отслеживания данных на сайтах SPA на примере фреймворка React.

Универсальность реализуется с помощью использования уровня данных - dataLayer, в качестве слоя в который сайт отправляет все аналитические события, в том числе событие "просмотра страницы" - pageview. Как только новая (виртуальная) страница загружается, в dataLayer отправляется событие с параметрами, необходимыми для отслеживания просмотров страниц. С помощью Google Tag Manager данное событие можно отправить в любую аналитическую или рекламную систему, тег которой добавлен в GTM.

Интро

Окей, здесь мы пропустим длинные описания более менее всем понятных вещей:

• почему аналитика и метрика из коробки не работают на сайтах SPA
• почему модуль аналитики должен быть полнофункциональным, но при этом иметь легко понимаемый минимальный по объему код, не быть перегруженным и никак не влиять на производительность сайта
• почему модуль аналитики должен быть универсальным, т. е. агностическим к любой аналитической системе и должен уметь отправлять данные как в аналитику, так и в метрику, при необходимости в системы ретаргетинга, онлайн рекламы или возможно даже в DWH
• и т. п.

С охотой поясню эти вещи при необходимости в беседе.

Что доступно из сторонних решений

Я просмотрел достаточно большое число готовых решений, доступных на github – некоторые в своей основе содержат рациональный подход, но имеют ограничения, в частности большинство решений настроено исключительно на GA. Другие, хотя и более универсальные, но на мой взгляд перегружены кодом — они создают свой API или просто имеют непрозрачный алгоритм, который трудно полностью протестировать и понять. Поэтому я решил взять за основу наиболее эффективные на мой взгляд подходы и постарался объединить их в данном простом решении.

Некоторые ссылки на источники, которые я использовал:

• https://github.com/react-ga/react-ga/issues/122
• https://github.com/TriPSs/react-tag-manager
• https://reactjs.org/docs/context.html

1. Отправка события просмотра страницы

В одностраничном приложении (SPA) просмотр новой страницы — это ререндеринг элементов DOM с обновлением URL адреса страницы. Т.е. открытие новой (виртуальной) страницы сопровождается рендерингом компонента с контентом, привязанного к роутингу.

Рендеринг компонента в React – это цикл шагов, от подготовки содержимого до вывода (mount). Нам нужно отправлять событие просмотра страницы один раз за данный цикл создания и вывода компонента. При этом на шаге отправки события pageview нам должны быть доступны основные параметры выводимой страницы — путь, название (title) и в случае зарегистрированного пользователя его userId.

Поэтому самым распространенным подходом является отправка события pageview на шаге componentDidMount(). Базовый код для данной части может быть таким:

componentDidMount() {
  const page = this.props.location.pathname;
  this.trackPage(page);
}

trackPage = page => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
      event: "pageview",
      pagePath: page,
      pageTitle: document.title
  })
};

2. Как реализовать это для всех дочерних компонентов разом

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

Поэтому наш аналитический модуль будет реализован, как HOC компонент, обернув который вокруг дочернего компонента мы передадим ему все аналитические функции. Назовем его к примеру WithAnalytics. Базовый код аналитического модуля, как HOC компонента может быть таким:

// analytics.js

import React from "react";

export default Component =>
class WithAnalytics extends React.Component {

  componentDidMount() {
    const page = this.props.location.pathname;
    this.trackPage(page);
  }
  
  trackPage = page => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "pageview",
      pagePath: page,
      pageTitle: document.title
    })
  };

  render() {
    return (
        <Component {...this.props} />
    )
  }
};

Тогда в основном модуле навигации (routing) мы можем подключить наш аналитический модуль к дочерним компонентам следующим образом:

import WithAnalytics from "./analytics";

      °  °  °  °  °  °

<Route path="/login" component={WithAnalytics(Login)} />
<Route exact path="/" component={WithAnalytics(Home)} />
<Route path="/category" component={WithAnalytics(Category)} />
<PrivateRoute path="/admin" component={WithAnalytics(Admin)} />
<Route path="/products" component={WithAnalytics(Products)} />

Это самая базовая реализация модуля универсальной аналитики на сайте. Следующимми шагом будет подключение отслеживания других аналитических событий помимо события pageview.

Данный подход естественно может быть скорректирован в плане конечного кода, если используются дополнительные надстройки или расширения для React сайтов, например, генераторы статических страниц. Суть по прежнему та же — привязать отправку события просмотра страницы в dataLayer при обновлении страницы, когда меняется ее адрес и заголовок.

Генераторы статических сайтов могут иметь встроенные функции (файлы конфигурирования) и возможность подключения плагинов (нас интересует плагин GTM), которые облегчают данную задачу.

К примеру, сайт, работающий на генераторе Gatsby, может реализовать отправку события просмотра страницы pageview в dataLayer с помощью следующего кода в файле конфигурирования gatsby-browser.js:

exports.onRouteUpdate = () => {
 return setTimeout(() => {
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
     event: "pageview"
   });},
   300);
}

3. Несколько простых советов по отладке

• При использовании GTM в первую очередь следует проверять отправку событий в dataLayer, (т. е. наличие всей необходимой информации для работы триггеров GTM) непосредственно в консоли на сайте.
• Заголовки страниц должны успевать формироваться к моменту отправки события, т. е. отправляемый заголовок должен соответствовать текущей странице.
• Не должно быть задублированной отправки одного просмотра страницы
• Аналитические события, отправляемые перед редиректом страницы должны успевать отправляться, привязываясь к правильной странице.

Резюмируя, можно сказать, что для успешной технической имплементации систем аналитики на React сайтах нужно понимать принципы работы одностраничных приложений (SPA), уметь читать и понимать техническую документацию аналитических систем, т. е. понимать работу соответвующих javascript-сниппетов и знать основы отладки javascript кода.

При развертывании расширенной электронной коммерции отладка и проверка кодов может занять больше времени, чем сама первичная имплементация.