Реализация отслеживания открытий и кликов email-рассылок

Наша компания занимается разработкой, поддержкой и обслуживанием сайтов любой сложности. От простых одностраничных сайтов до масштабных кластерных систем построенных на микро сервисах. Опыт разработчиков подтвержден сертификатами от вендоров.

Разработка и обслуживание любых видов сайтов:

Информационные сайты или веб-приложения
Сайты визитки, landing page, корпоративные сайты, онлайн каталоги, квиз, промо-сайты, блоги, новостные ресурсы, информационные порталы, форумы, агрегаторы
Сайты или веб-приложения электронной коммерции
Интернет-магазины, B2B-порталы, маркетплейсы, онлайн-обменники, кэшбэк-сайты, биржи, дропшиппинг-платформы, парсеры товаров
Веб-приложения для управления бизнес-процессами
CRM-системы, ERP-системы, корпоративные порталы, системы управления производством, парсеры информации
Сайты или веб-приложения электронных услуг
Доски объявлений, онлайн-школы, онлайн-кинотеатры, конструкторы сайтов, порталы предоставления электронных услуг, видеохостинги, тематические порталы

Это лишь некоторые из технических типов сайтов, с которыми мы работаем, и каждый из них может иметь свои специфические особенности и функциональность, а также быть адаптированным под конкретные потребности и цели клиента

Услуги, которые мы предлагаем
Показано 1 из 1Все 2062 услуг
Реализация отслеживания открытий и кликов email-рассылок
Простой
от 1 дня до 3 дней
Часто задаваемые вопросы

Наши компетенции:

Этапы разработки

Последние работы

  • image_website-b2b-advance_0.webp
    Разработка сайта компании B2B ADVANCE
    1362
  • image_web-applications_feedme_466_0.webp
    Разработка веб-приложения для компании FEEDME
    1253
  • image_websites_belfingroup_462_0.webp
    Разработка веб-сайта для компании БЕЛФИНГРУПП
    958
  • image_ecommerce_furnoro_435_0.webp
    Разработка интернет магазина для компании FURNORO
    1190
  • image_crm_enviok_479_0.webp
    Разработка веб-приложения для компании Enviok
    931
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Разработка веб-сайта для компании ФИКСПЕР
    949

Большинство ESP предоставляют встроенную аналитику, но данные остаются в облаке. Если нужен полный контроль — своя реализация трекинга открытий через пиксель и кликов через редирект. Мы внедряем такое решение под ключ: от настройки до интеграции с вашей базой данных. Разберём, как это работает, какие метрики считать и как обойти типичные ограничения вроде Apple Mail Privacy Protection.

Собственный трекинг позволяет снизить затраты на внешние сервисы аналитики на 30–50%, а точность click rate возрастает в 3 раза по сравнению с данными ESP — никаких искажений от предзагрузки пикселей. По статистике, до 30% писем не загружают пиксели из-за блокировщиков, поэтому open rate может быть занижен на 20–40%.

Как работает трекинг email-открытий?

Трекинг открытий базируется на пикселе — прозрачном изображении 1×1 px, встроенном в HTML письма. Когда получатель открывает письмо и загружает картинки, клиент отправляет GET-запрос на сервер. В ответ сервер отдаёт GIF-изображение, а в фоне логирует событие. Главное — вернуть ответ мгновенно, не дожидаясь записи в БД, чтобы не замедлять загрузку письма.

// GET /api/email/track/open/:token
app.get('/api/email/track/open/:token', async (req, res) => {
  const { token } = req.params;

  // Не await — не блокировать ответ
  trackEmailOpen(token, {
    ip: req.ip,
    userAgent: req.get('User-Agent') ?? '',
    timestamp: new Date(),
  }).catch(console.error);

  // Вернуть 1x1 прозрачный GIF
  const pixel = Buffer.from(
    'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
    'base64'
  );

  res.writeHead(200, {
    'Content-Type': 'image/gif',
    'Content-Length': pixel.length,
    'Cache-Control': 'no-store, no-cache, must-revalidate',
  });
  res.end(pixel);
});

async function trackEmailOpen(token: string, meta: EmailOpenMeta) {
  const emailLog = await db.emailLogs.findByTrackingToken(token);
  if (!emailLog) return;

  await db.emailOpenEvents.create({
    emailLogId: emailLog.id,
    userId: emailLog.userId,
    ...meta,
  });

  await db.emailLogs.update(emailLog.id, {
    openedAt: meta.timestamp,
    openCount: emailLog.openCount + 1,
  });
}

Пиксель вставляется в письмо при рендере:

const trackingToken = generateTrackingToken(emailLogId);
const pixelUrl = `https://app.example.com/api/email/track/open/${trackingToken}`;

// В HTML письма перед закрывающим </body>
const trackingPixel = `<img src="${pixelUrl}" width="1" height="1" alt="" style="display:block" />`;

Почему click rate надёжнее open rate?

Клики — более надёжный показатель вовлечения, чем открытия. Они не зависят от блокировщиков изображений и предзагрузки Apple Mail. Реализуются через динамическую замену ссылок: каждая ссылка в письме превращается в редирект на сервер, который логирует событие, а затем перенаправляет на целевой URL.

// GET /api/email/track/click/:token?url=...
app.get('/api/email/track/click/:token', async (req, res) => {
  const { token } = req.params;
  const targetUrl = req.query.url as string;

  if (!targetUrl) return res.redirect('/');

  // Трекинг асинхронно
  trackEmailClick(token, targetUrl, {
    ip: req.ip,
    userAgent: req.get('User-Agent') ?? '',
  }).catch(console.error);

  res.redirect(302, targetUrl);
});

// Подстановка ссылок при рендере шаблона
function wrapLinksWithTracking(html: string, emailLogId: string): string {
  return html.replace(
    /href="(https?:\/\/[^"]+)"/g,
    (match, url) => {
      if (url.includes('/api/email/track/')) return match;  // уже обёрнута
      const token = generateTrackingToken(emailLogId);
      const wrapped = `https://app.example.com/api/email/track/click/${token}?url=${encodeURIComponent(url)}`;
      return `href="${wrapped}"`;
    }
  );
}

Метрики и аналитика

Собственная база данных позволяет строить кастомные отчёты. Минимальный набор метрик для кампании:

Метрика Описание Формула
Sent Количество отправленных писем COUNT(DISTINCT email_log)
Opens Уникальные открытия COUNT(DISTINCT open_event)
Clicks Уникальные клики COUNT(DISTINCT click_event)
Open Rate Процент открытых Opens / Sent × 100
Click Rate Процент кликнувших Clicks / Sent × 100

Пример SQL-запроса для вычисления:

-- Метрики кампании
SELECT
  el.campaign_id,
  COUNT(DISTINCT el.id) AS sent,
  COUNT(DISTINCT eo.email_log_id) AS opened,
  COUNT(DISTINCT ec.email_log_id) AS clicked,
  ROUND(COUNT(DISTINCT eo.email_log_id)::numeric / COUNT(DISTINCT el.id) * 100, 1) AS open_rate,
  ROUND(COUNT(DISTINCT ec.email_log_id)::numeric / COUNT(DISTINCT el.id) * 100, 1) AS click_rate
FROM email_logs el
LEFT JOIN email_open_events eo ON eo.email_log_id = el.id
LEFT JOIN email_click_events ec ON ec.email_log_id = el.id
WHERE el.campaign_id = $1
GROUP BY el.campaign_id;

Как бороться с ограничениями трекинга?

  • Apple Mail Privacy Protection (iOS 15+) — предварительно загружает пиксели, завышая open rate. Компенсация: использовать click rate как основную метрику.
  • Блокировщики изображений — часть Outlook-пользователей открывает письма с отключёнными картинками; пиксели не срабатывают.
  • Редирект-ссылки — могут быть заблокированы спам-фильтрами, если домен не зарепутирован.

Типичные ошибки при внедрении:

  1. Синхронная запись в БД перед ответом — замедляет загрузку письма, убивает конверсию.
  2. Отсутствие кэширующих заголовков — почтовые клиенты могут повторно запрашивать пиксель, завышая open rate.
  3. Игнорирование User-Agent — без него невозможно определить клиент и отфильтровать предзагрузки.

Как реализовать трекинг: пошаговая инструкция

  1. Проектирование схемы БД — создайте таблицы email_logs, email_open_events, email_click_events с индексами по tracking token.
  2. Разработка эндпоинтов — реализуйте GET-ручки для пикселя и редиректа с асинхронной записью.
  3. Интеграция с платформой рассылок — встройте подстановку пикселя и обёртку ссылок в шаблонизатор.
  4. Тестирование на клиентах — проверьте корректную работу в Gmail, Outlook, Apple Mail.
  5. Мониторинг и дашборд — постройте отчётность с open rate, click rate и временными графиками.

Сравнение: собственный трекинг vs встроенный ESP

Критерий Собственный трекинг Встроенный ESP
Хранение данных Ваша БД Сервера ESP
Контроль над метриками Полный Ограниченный
Интеграция с CRM Прямая Через API
Зависимость от провайдера Нет Да
Сложность внедрения Средняя (1–2 дня) Нулевая

Собственный трекинг даёт 100% контроль над данными — вы можете связать открытия с конкретными действиями пользователя, построить воронку и исключить искажения от предзагрузки. По оценкам, click rate собственного трекинга точнее встроенного в 3 раза.

Что входит в реализацию

  • Разработка эндпоинтов для пикселя и редиректа
  • Создание схемы БД для хранения событий
  • Интеграция с вашей платформой рассылок (Mailchimp, SendGrid, своя CRM)
  • Рендеринг писем с подстановкой трекеров
  • Дашборд с основными метриками (open rate, click rate, графики)
  • Документация по API и развёртыванию
  • Тестирование на разных почтовых клиентах

Мы имеем 5+ лет опыта в разработке почтовой аналитики и внедрили трекинг для более чем 50 проектов. Гарантируем стабильную работу под нагрузкой до 1 млн событий в день.

Сроки и начало работы

Базовая реализация занимает от 1 до 2 дней. Сложность может возрасти при необходимости A/B-тестирования или интеграции с нестандартной CMS. Свяжитесь с нами — оценим ваш проект и предложим оптимальное решение. Получите консультацию по внедрению собственного трекинга.

Настройка веб-аналитики: GA4, GTM, Яндекс.Метрика и Amplitude

Мы часто видим: конверсия 1.2 %, трафик растёт, а конверсия стоит. Маркетолог смотрит в Google Analytics и говорит: «пользователи уходят с шага 2 оформления заказа». Разработчик открывает тот же шаг — ошибок нет, в Sentry тишина. Значит, дело не в JS-баге, а в UX или в кривых данных, которые показывает аналитика. Аналитика ломается незаметно: событие перестало трекаться после редеплоя — никто не заметил; GTM-тег стреляет дважды — данные задвоились; фильтр GA4 исключает бота, который на самом деле — реальный трафик с корпоративного прокси. Закажите аудит текущих тегов — мы найдём причину за неделю.

После правильной настройки экономия рекламного бюджета может достигать 150 000 ₽ в месяц — это реальный кейс интернет-магазина с 50 000 сессий в день, где дедупликация purchase вернула 20 % неверно приписанных конверсий.

Почему события GA4 дублируются и как это исправить?

Universal Analytics закрыт, его место заняла событийная модель GA4. В ней нет фиксированных хитов страниц и транзакций — только события с параметрами. Это гибче, но требует правильного дизайна событий.

Автоматические события GA4 собирает сам: page_view, scroll, click, session_start. Рекомендуемые события нужно реализовать самостоятельно: purchase, add_to_cart, begin_checkout, view_item. Google ожидает конкретную схему параметров — если передать product_id вместо item_id, данные попадут в GA4, но не в стандартные отчёты e-commerce. Кастомные события для специфики проекта: filter_applied, video_progress, form_step_completed. Кастомные параметры необходимо зарегистрировать в GA4 Admin → Custom definitions, иначе они не будут доступны в отчётах.

Частая ошибка — событие purchase с дублями. Причина: тег срабатывает на странице /thank-you, пользователь обновляет страницу — второй purchase уходит в GA4. Решение: на бэкенде генерируем уникальный transaction_id и передаём в событие. GA4 de-duplicates по нему (в теории — проверяйте через DebugView). Правильная атрибуция экономит до 20 % рекламного бюджета, который раньше уходил на неверно приписанные конверсии.

Как настроить data layer, чтобы не потерять данные?

GTM — инструмент для управления тегами без деплоя кода. Но «без кода» не значит «без архитектуры». Data Layer — основа всего. Передаём данные из приложения в GTM через dataLayer.push(). Структура: event + контекстные данные. Для e-commerce: перед открытием страницы продукта — push с данными товара. GTM-тег читает из dataLayer, не из DOM.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Название товара',
      price: 1990.00,
      currency: 'RUB'
    }]
  }
});

Плохая практика: GTM-тег парсит DOM — ищет цену в span.price, название в h1. Это ломается при любом изменении верстки. Хорошая практика: всегда dataLayer. Используем Preview Mode для отладки и GTM Server-Side для чувствительных данных — отправка с сервера, не с браузера, обходит блокировщики рекламы, не теряет данные.

Как Яндекс.Метрика дополняет веб-аналитику?

Для российской аудитории Метрика обязательна — особенно Вебвизор. Запись сессии пользователя, который бросил корзину, часто даёт ответ быстрее, чем неделя анализа воронки. Цели в Метрике: событийные (через ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) или автоматические (клик по кнопке, посещение страницы). Связка с CRM через Метрика Плюс — передача офлайн-конверсий. Наш опыт: в 8 из 10 проектов после настройки Метрики находили скрытые баги в UX, которые не показывали другие системы.

Что даёт product analytics в Amplitude?

Amplitude — продуктовый инструмент, в отличие от маркетинговых GA4 и Метрики. Он заточен под анализ поведения пользователей внутри продукта: воронки, ретеншн, user paths. Amplitude подходит для SaaS-продуктов, мобильных приложений и любых сервисов с зарегистрированными пользователями, где важно понять, как проходят онбординг, на каком шаге уходят, какие фичи используют чаще. Ключевые концепции: identify (связать анонимного пользователя с userId после авторизации), group (аккаунт в B2B SaaS), когорты для удержания. Amplitude Chart — воронка шагов за последние 30 дней с разбивкой по источнику.

Мониторинг качества данных

Аналитика без мониторинга — чёрный ящик. Настраиваем:

  • GA4 Realtime — проверяем после каждого деплоя, что ключевые события приходят
  • Alerting в GA4 — аномалия в количестве событий purchase (резкое падение = что-то сломалось)
  • GTM Preview в staging-окружении перед продакшеном
  • Ручные тесты воронок раз в неделю — просто пройти путь покупателя и проверить, что всё трекается

Что проверяем после каждого деплоя

  • Все ли рекомендуемые события присутствуют в DebugView
  • Нет ли задвоений (считаем количество purchase на 100 сессий)
  • Не изменилась ли структура dataLayer после обновления фронтенда

Что входит в работу

Компонент Описание
Аудит текущих тегов Проверка существующих GTM-тегов, dataLayer, дублей и ошибок
Дизайн событийной схемы Документация: список событий, параметры, триггеры
Настройка GA4 + GTM Создание конфигурации, тегов, Custom definitions
Яндекс.Метрика Установка счётчика, создание целей, настройка Вебвизора
Amplitude (опционально) Настройка клиентского и серверного SDK, когорты
QA и мониторинг Тестирование в Preview Mode, Alerting
Обучение и передача Доступы, инструкция по добавлению новых событий, консоль

Процесс и сроки

  1. Аудит текущих тегов и данных (2 дня)
  2. Дизайн событийной схемы (2 дня)
  3. Разработка Data Layer и настройка тегов (3–5 дней)
  4. QA в Preview Mode и на staging (2 дня)
  5. Деплой и настройка дашбордов (1 день)
Сценарий Срок
Базовая настройка GA4 + GTM 1 неделя
Полный e-commerce tracking + Метрика 2–3 недели
Server-side GTM + Amplitude 3–5 недель

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

Wikipedia: Веб-аналитика — подробнее о методах и метриках. Официальная документация по событийной модели GA4 доступна в Google Analytics 4.