Как настроить аналитику в AMP-письмах: инструкция с примерами

Сергей Артемов

frontend-разработчик EMAILMATRIX

Аналитика позволяет получить информацию о том, сколько человек открыли письмо, сколько времени провели в нём, сколько подписчиков перешли по ссылке. Эти данные дают возможность оптимизировать содержание и дизайн писем, улучшить конверсию и повысить эффективность коммуникации с клиентами.

Для AMP-писем аналитика особенно важна, чтобы отслеживать произвольные события, которых в обычных письмах нет.

Что такое AMP-письма и как собрать статистику

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

Создание AMP-письма: этапы и подводные камни

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

В Universal Analytics — старом поколении GA — можно было передавать статистику напрямую с помощью функции Measurement Protocol и трекинг-пикселя, который выглядел так:

<img src='http://www.google-analytics.com/collect?v=1&tid=UA-XXXXXX&t=event&cid=*|UNIQID|*&cn=test_campaign&cs=email&ec=kinetic&ea=open' width=1 height=1>

Это обычная картинка, которая после загрузки отправляла данные о событии.

Сейчас этот способ не работает: 1 июля 2023 года вышло новое поколение GA — Google Analytics 4. В нём изменился способ отправки событий с помощью функции Measurement Protocol. Для отправки данных теперь используется POST-запрос с measurement_id и API-ключом, поэтому сформировать собственный трекинг-пиксель не так уж просто. Но есть инструменты, которые позволяют это сделать.

Один из удобных инструментов для работы с AMP-письмами, в котором предусмотрена интеграция с GA4, — Pixcraft. Он позволяет быстро создавать разные компоненты вроде опросов и форм и просматривать статистику по ним. Доступна бесплатная пробная версия на 14 дней.

Настраиваем интеграцию

Создаём API-ключ и связываем с Pixcraft

Открываем настройки в Google Analytics 4 и переходим в «Потоки данных»: Настройки — Настройки ресурса — Сбор и редактирование данных — Потоки данных.

Создаём поток данных или открываем существующий:

Внутри потока создаём секретный ключ API для Measurement Protocol:

Переходим в Pixcraft и на вкладке настроек создаём интеграцию для потока данных. Это нужно сделать один раз, чтобы получить возможность отправлять данные в наш поток:

Вводим произвольное название интеграции. В поле Measurement id указываем идентификатор потока данных:

В поле Measurement secret key указываем секретный ключ API для Measurement Protocol, который мы создали на предыдущем шаге:

Настраиваем хранение данных в Google Analytics

В GA4 необходимо указать, какие произвольные поля событий мы хотим сохранять. В Pixcraft предусмотрели поля action, campaign и source. Давайте сделаем так, чтобы GA4 сохранял значения этих полей. Для этого переходим в Настройки — Просмотр данных — Специальные определения и нажимаем Создать специальный параметр:

В открывшемся окне:

• Название параметра — event action
• Область действия — событие
• Описание — действие по событию в письме
• Параметр события — action

Повторите действия для параметров события campaign и source, если планируете их использовать.

Настраиваем письмо

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

Открываем настройки Pixcraft, переходим в раздел Google Analytics, открываем ранее добавленную интеграцию и формируем код трекинг-пикселя для каждого действия.

В поле Event name необходимо указать новое или существующее событие из GA. Все остальные поля необязательны. В моём случае имя события — kinetic.

• Event name — kinetic
• Campaign name — utm_campaign письма, которое отправляем
• Event action — interact_любое понятное название шага
• Campaign source — email

При вводе данных будет генерироваться код трекинг-пикселя для вставки в письмо. Обратите внимание: он создаётся как для HTML-версии письма, так и для AMP.

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

Например, код ниже загрузит пиксель и зафиксирует событие, когда выполнится условие (buttonClick == 1).

Параметр tid= должен быть равен вашему идентификатору потока данных из GA4 без G-. Например, идентификатор потока G-XXXXXXXXXX, тогда в tid пишем XXXXXXXXXX.

<div [class]="(buttonClick == 1)?'emxvisible':'emxhidden'" class="emxhidden">
  <amp-img
    src="https://pixcraft.io/ga/?tid=XXXXXXXXXX&ec=kinetic&ea=interact_attention1&cn=case-new-year-bunny&cs=email&cid=*[subscriber_email_md5]*"
    width="1" height="1" alt=""></amp-img>
  <button on="tap:AMP.setState({buttonClick: 3})" class="btn btn3">
  </button>
  <div style="height: 20px;">&nbsp;</div>
</div>

CSS:

    .emxhidden {
      display: none;
    }

    .emxvisible {
      display: block;
    }

Обратите внимание: чтобы получить корректные данные, необходимо, чтобы каждый подписчик получил уникальное изображение. Для этого нужно в поле cid подставить значение, уникальное для каждого подписчика. Это может быть его идентификатор в системе, хэш идентификатора, хэш емейла или другое уникальное значение.

Например, в ExpertSender cid=*[subscriber_email_md5]*.

<img src="https://app.pixcraft.io/tr/?t=view&ea=html&cn=cg&cid=*[subscriber_email_md5]*" alt="" width="1" height="1" />

В Sendsay — cid=[% anketa.member.id %].

<img src="https://app.pixcraft.io/tr/?t=view&ea=html&cn=cg&cid=[% anketa.member.id %]" alt="" width="1" height="1" />

Разбираем на примере

У нас есть вёрстка AMP-письма с шестью разными блоками, которые поочерёдно появляются после каждого клика. Это значит, что нам нужно:

1. Создать 6 трекинг-пикселей — по одному на каждый блок.
2. Вставить их в письмо так, чтобы при появлении нового блока и трекинг-пиксель загружался, и в GA отправлялись данные в формате interact_*номер или название блока*.

Видимость блоков меняется через СSS-свойство opacity, а не display (так нужно, чтобы при загрузке изображения не появлялась белая область). Таким образом, все изображения изначально присутствуют на странице и загружаются одновременно. Поэтому мы не можем вставить трекинг-пиксель внутрь блока с картинкой, иначе они тоже загрузятся и отправят данные одновременно, а не после клика — нам такое не надо.

Для правильной отправки данных я создал отдельный блок ga-actions и добавил туда те же условия, что и у блоков с картинками. Но появляться они будут с помощью свойства display, то есть трекинг-пиксель загрузится только после клика и выполнения условия в родительском блоке. Такое нам надо.

Исключением в данном случае становится первая картинка: она сделана тоже через opacity, так как всегда видна на первом шаге.

<div [class]="(buttonClick == 0)?'emxop1':'emxop0'" class="emxop1">
  <div class="cat-btn cat-btn-1"></div>
</div>
<div [class]="(buttonClick == 1)?'emxop1':'emxop0'" class="emxop0">
  <div class="cat-btn cat-btn-2"></div>
</div>
<div [class]="(buttonClick == 2)?'emxop1':'emxop0'" class="emxop0">
  <div class="cat-btn cat-btn-3"></div>
</div>
<div [class]="(buttonClick == 3 || buttonClick == 4)?'emxop1':'emxop0'" class="emxop0">
  <div class="cat-btn cat-btn-4"></div>
</div>
<div [class]="(buttonClick == 3)?'emxop1 tut':'emxop0'" class="emxop0">
  <div class="cat-btn cat-btn-5"></div>
</div>
<div [class]="(buttonClick == 4)?'emxop1 cucumber':'emxop0'" class="emxop0">
  <div class="cat-btn cat-btn-6"></div>
</div>
<div role="button" tabindex="0" on="tap:AMP.setState({buttonClick: buttonClick + 1})" [class]="(buttonClick >= 5)?'emxhidden':'click-overlay'" class="click-overlay"></div>

<div class="ga-actions">
  <amp-img [class]="(buttonClick == 0)?'emxop1':'emxop0'" class="emxop1" src="https://app.pixcraft.io/ga/?tid=XXXXXXXXXX&ec=kinetic&ea=interact_cat1&cn=case-aviasales-course&cs=email&cid=*[subscriber_email_md5]*" width="1" height="1" alt=""></amp-img>
  <amp-img [class]="(buttonClick == 1)?'emxvisible':'emxhidden'" class="emxhidden" src="https://app.pixcraft.io/ga/?tid=XXXXXXXXXX&ec=kinetic&ea=interact_cat2&cn=case-aviasales-course&cs=email&cid=*[subscriber_email_md5]*" width="1" height="1" alt=""></amp-img>
  <amp-img [class]="(buttonClick == 2)?'emxvisible':'emxhidden'" class="emxhidden" src="https://app.pixcraft.io/ga/?tid=XXXXXXXXXX&ec=kinetic&ea=interact_cat3&cn=case-aviasales-course&cs=email&cid=*[subscriber_email_md5]*" width="1" height="1" alt=""></amp-img>
  <amp-img [class]="(buttonClick == 3 || buttonClick == 4)?'emxvisible':'emxhidden'" class="emxhidden" src="https://app.pixcraft.io/ga/?tid=XXXXXXXXXX&ec=kinetic&ea=interact_cat4&cn=case-aviasales-course&cs=email&cid=*[subscriber_email_md5]*" width="1" height="1" alt=""></amp-img>
  <amp-img [class]="(buttonClick == 4)?'emxvisible':'emxhidden'" class="emxhidden" src="https://app.pixcraft.io/ga/?tid=XXXXXXXXXX&ec=kinetic&ea=interact_cat5&cn=case-aviasales-course&cs=email&cid=*[subscriber_email_md5]*" width="1" height="1" alt=""></amp-img>
  <amp-img [class]="(buttonClick == 5)?'emxvisible':'emxhidden'" class="emxhidden" src="https://app.pixcraft.io/ga/?tid=XXXXXXXXXX&ec=kinetic&ea=interact_cat6&cn=case-aviasales-course&cs=email&cid=*[subscriber_email_md5]*" width="1" height="1" alt=""></amp-img>
</div>

CSS:

   .emxhidden {
      display: none;
    }

    .emxvisible {
      display: block;
    }

    .emxop0 {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }

    .emxop1 {
      opacity: 1;
      position: relative;
      z-index: 10;
    }

После клика данные будут отправляться в GA. Это можно проверить в консоли разработчика.

В Google Analytics эти события тоже появились. До пятой картинки я докликал один раз.

Вывод

На сегодняшний день появились инструменты, которые сильно упрощают работу с AMP-письмами и позволяют гибко настроить отправку пользовательских событий в GA4.

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

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

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