Реализация веб-аналитики на веб-сайте

Опубликовано: Декабрь 05, 2024

Этот текст представляет собой объяснение на одном из примеров схемы построения веб-аналитики для сайта. На самом деле, существует множество различных инструментов и решений, которые могут быть использованы в зависимости от задач конкретного проекта. Веб-аналитика может включать в себя использование, как различных платформ, так и быть реализована с помощью только одного инструмента, например, Яндекс.Метрика. Важно учитывать особенности каждого проекта и выбирать те инструменты, которые наилучшим образом подходят для достижения поставленных целей. Данная же статья рассматривает один из возможных вариантов и подходов, как пример для иллюстрации.

Ниже представлена схема построения веб-аналитики (выбор инструментов, реализация) на примере данного авторского блога websitelytics.top

Google Tag Manager

Google Tag Manager (GTM) --- это бесплатный инструмент от Google, который позволяет управлять кодом отслеживания на сайте. С его помощью можно добавлять, редактировать и удалять коды отслеживания без вмешательства в исходный код сайта. GTM позволяет управлять различными метками, такими как Google Analytics, Яндекс.Метрика и другими.

Пример настройки тегов внутри Google Tag Manager для Google Analytics и Яндекс.Метрики на сайте websitelytics.top:

Google Analytics

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

Пример отчёта по источникам трафика в Google Analytics для сайта websitelytics.top:

Яндекс.Метрика

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

Яндекс Метрика постоянно развивается и добавляет новые возможности для анализа данных. Пример создания воронки для сайта websitelytics.top:

Наиболее популярные страницы и источники трафика

Пример построения отчета о наиболее популярных страницах сайта websitelytics.top с помощью Google Analytics и применением фильтров с ипользованием regex:

Трекинг отправки данных контактных форм

Пользователь заполняет и отправляет заявку с сайта или хочет связаться с нами, и для аналитики является важным отслеживание подобных действий. Данные с формы контакта в коде сайте отправляются с помощью команды submit. Однако отслеживание подобного события затруднено тем, что javascript может перехватывать данное действие с помощью команды event.preventDefault() для обработки данных формы. В таком случае специальный триггер Form Submission для отслеживания команды submit в GTM может не срабатывать.

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

Однако если это затруднительно, то можно решить задачу на клиенте только средствами javascript, к примеру, опубликовав событие submit после обработки данных формы:

function publish(event, data) {
    if (eventRegistry[event]) {
        eventRegistry[event].forEach(callback => {
            callback.call(null, data);
        });
    }
}

Функция publish является частью системы обработки событий, ее цель инициировать все обратные вызовы (callback), связанные с определенным событием, передавая любые данные, которые могут иметь отношение к этим обратным вызовам. Такое решение позволяет гибко отделить производителей событий от потребителей событий.

В таком решении можно использовать стандартный триггер отслеживания форм в GTM:

Отправка ecommerce данных

И Google Analytics и Яндекс Метрика поддерживают близкий по реализации способ отправки данных о просмотрах товара, добавлении товара в корзину, покупках и других событиях электронной коммерции. Для отправки подобных событий можно использовать слой данных (dataLayer). Пример отправки события покупки из инструкции Яндекс Метрики:

dataLayer.push({
    "ecommerce": {
        "currencyCode": "RUB",
        "purchase": {
            "actionField": {
                "id" : "TRX987"
            },
            "products": [
                {
                    "id": "25341",
                    "name": "Толстовка Яндекс мужская",
                    "price": 1345.26,
                    "brand": "Яндекс / Яndex",
                    "category": "Одежда/Мужская одежда/Толстовки и свитшоты",
                    "variant": "Оранжевый цвет",
                    "quantity": 1,
                    "list": "Одежда",
                    "position": 1
                },
                {
                    "id": "25314",
                    "name": "Толстовка Яндекс женская",
                    "price": 1543.62,
                    "brand": "Яндекс / Яndex",
                    "category": "Одежда/Женская одежда/Толстовки и свитшоты",
                    "variant": "Белый цвет",
                    "quantity": 3,
                    "list": "Толстовки",
                    "position": 2
                }
            ]
        }
    }
});

Использование BI инструментов для анализа данных

Для более глубокого анализа данных можно использовать BI инструменты, такие как Google Data Studio, Tableau, Power BI и другие. С их помощью можно создавать интерактивные отчеты и дашборды, объединять данные из разных источников и проводить сложный анализ данных.

Пример таблицы-мониторинга продаж и сопутствующей воронки для стороннего ecommerce вебсайта:

Пример интерасктивного отчета в  Lookerstudio для вебсайта websitelytics.top:

Анализ конкурентов и определение KPI

Для анализа конкурентов и определения KPI можно использовать различные инструменты, такие как SimilarWeb, Ahrefs и другие. С их помощью можно узнать, какие ключевые показатели успеха у конкурентов, какие стратегии они используют и какие KPI можно использовать для сравнения своего сайта с конкурентами.

Пример анализа конкурентов и определения KPI для сайта websitelytics.top

Конкурентами информационного авторского блога являются сайты, которые публикуют статьи по тематике веб-аналитики, SEO, маркетинга и других смежных областей. В особенности те, которые предлагают материалы для обучения. Таким сайтом, к примеру, является сайт education.yandex.ru.

Пример образовательной статьи схожей с тематикой моего блога: Программы обучения Яндекса.

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

Сильные стороны конкурента в контексте пользовательского опыта и UX:

  • Простой и понятный интерфейс сайта

  • Быстрая загрузка страниц

  • Качественный контент и обучающие материалы

  • Удобная навигация по сайту

  • Интерактивные элементы и виджеты

Вывод по анализу конкурентов для улучшения пользовательского опыта на авторском блоге websitelytics.top:

  • Добавить интерактивные элементы и виджеты

  • Увеличить количество обучающих материалов

  • Провести оптимизацию скорости загрузки страниц

  • KPI: Увеличить количество подписчиков и комментариев

Продвинутая настройка веб-аналитики

Стандартная веб аналитика имеет ряд объективных ограничений, которые могут быть преодолены с помощью продвинутой настройки и анализа данных. Примеры продвинутой настройки веб-аналитики:

  1. Файнтьюнинг для SPA - для одностраничных приложений (React, Angular и т.п.) требуется особый подход к подключению веб-аналитики, и анализу событий и поведения пользователей.

  2. Работа с сырыми данными - отчеты в Google Analytics и Яндекс.Метрике в том числе полученные с использованием API имеет отграниченный набор параметров и метрик. Чтобы преодолеть это ограничение, можно использовать низкоуровневые данные и обрабатывать их с помощью языков программирования (Python, SQL и др.). Сырые данные Google Analytics можно получить через BigQuery, а Яндекс.Метрика - с помощью выгрузки их в ClickHouse.

  3. Интеграция с CRM и другими системами - объединение данных из разных источников для комплексного анализа.

  4. Аналитика со стороны сервера - любая вендорная аналитика на стороне клиента (браузера) дает неполные данные, поскольку отправка части данных блокируется адблокерами и политиками приватности. Серверные логи - это данные, хранящиеся внутри компании и не зависящие от сторонних сервисов. Однако для построения Сквозной Аналитики со стороны сервера необходимо реализовать трекинг источников трафика на клиенте (браузере) с помощью "обработчика сессий". Ноже приведен пример схемы такого решения:

Python в помощь

Как было сказано выше использование низкоуровневых данных позволяет иногда провести более глубокую аналитику событий и построить отчеты недоступные в интерфейсе аналитической системы. К примеру, в случае Яндекс Метрики мы можем выгрузить низкоуровневые данные с помощью Logs API и Python. Данные выгружаются в виде двух таблиц: визиты и события. Поместив данные в pandas мы можем фильтровать, группировать, объединять данные этих таблиц в целях своих аналитических задач.

Примеры простых команд для работами с данными Logs API в pandas:

# load data into pandas dataframe from hits.csv и visits.csv
test_hits = pd.read_csv('hits.csv')
test_visits = pd.read_csv('visits.csv')

# make date column into datetime object
test_hits['ym:pv:date'] = pd.to_datetime(test_hits['ym:pv:date'], format='%m/%d/%y').dt.date
# plot all hits
test_hits['ym:pv:date'].value_counts().sort_index().plot(kind='bar', figsize=(10, 5))

# drop duplicates
dates = test_hits[['ym:s:visitID', 'ym:pv:date']].drop_duplicates(subset=['ym:s:visitID', 'ym:pv:date'])
# merge visits and dates dataframes
visits_dates = pd.merge(test_visits, dates, on='ym:s:visitID')

# plot number of goals per day
visits_dates[visits_dates['ym:s:goalsID']!='[]']['ym:pv:date'].value_counts().sort_index().plot(kind='bar', figsize=(10, 5))

# analyze the funnel via URLs
start_date = datetime.strptime('2024-11-21', '%Y-%m-%d').date()
end_date = datetime.strptime('2024-11-25', '%Y-%m-%d').date()

test_hits[(test_hits['ym:pv:date'] >= start_date) & (test_hits['ym:pv:date'] <= end_date)]['ym:pv:URL'].value_counts()

Заключение

Настройка веб-аналитики на сайте позволяет отслеживать посещаемость, поведение пользователей и другие важные показатели. С помощью Google Analytics, Яндекс.Метрики и других инструментов можно получить подробную статистику о сайте, анализировать данные и оптимизировать пользовательский опыт. Анализ конкурентов и определение KPI помогают улучшить сайт и достичь поставленных целей.

К списку статей