Содержание

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

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

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

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

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

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

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

    Трекинговый пиксель — фрагмент HTML-кода, который после загрузки отправляет информацию о событии в систему аналитики.

    В 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, — Ampier. Он позволяет быстро создавать разные компоненты вроде опросов и форм и просматривать статистику по ним. Доступна бесплатная пробная версия на 14 дней.

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

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

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

    Потоки данных в Google Analytics 4

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

    Создание потока данных в Google Analytics 4

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

    Создание секретного ключа API в Google Analytics 4

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

    Интеграция Ampier и Google Analytics 4 для аналитики AMP-писем
    Интеграция Ampier и Google Analytics 4 для аналитики AMP-писем

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

    Интеграция Ampier и Google Analytics 4 для аналитики AMP-писем

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

    Интеграция Ampier и Google Analytics 4 для аналитики AMP-писем

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

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

    Создание специального параметра в Google Analytics 4

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

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

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

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

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

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

    Создание трекинг-пикселя для AMP-рассылок в Ampier

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

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

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

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

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

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

    
    <div [class]="(buttonClick == 1)?'emxvisible':'emxhidden'" class="emxhidden">
      <amp-img
        src="https://ampier.ru/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://ampier.ru/tr/?t=view&ea=html&cn=cg&cid=*[subscriber_email_md5]*" alt="" width="1" height="1" />

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

    <img src="https://ampier.ru/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://ampier.ru/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://ampier.ru/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://ampier.ru/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://ampier.ru/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://ampier.ru/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://ampier.ru/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. Это можно проверить в консоли разработчика.

    Аналитика AMP-писем

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

    Статистика AMP-письма в Google Analytics

    Вывод

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

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

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

    Удобная инфографика о главных емейл-метриках
    Активность подписчиков, конверсии, деньги…
    Имя
    Email *
    Array
    (
        [0] => WP_Term Object
            (
                [term_id] => 1425
                [name] => Статьи
                [slug] => articles
                [term_group] => 0
                [term_taxonomy_id] => 1907
                [taxonomy] => category
                [description] => 
                [parent] => 0
                [count] => 670
                [filter] => raw
                [cat_ID] => 1425
                [category_count] => 670
                [category_description] => 
                [cat_name] => Статьи
                [category_nicename] => articles
                [category_parent] => 0
            )
    
    )
    
    Поделиться статьёй
    Подписаться на рассылку