как передать utm метки при отправке формы
Собираем UTM метки в заявку и отправляем на почту при помощи PHP
Всем привет. Сейчас вы узнаете, как работать с UTM метками при помощи PHP, а именно мы будем собирать их в заявку. То есть при отправке формы на сайте все необходимые метки будут от оправлены на почту или куда-то еще вместе с основными данными. Как правило это номер телефона, Email адрес и имя клиента. Зачем вообще собирать UTM метки с сайта? В большинстве случаем это нужно маркетологам для того, чтобы отслеживать эффективность различных источников трафика. Так выглядит пример на реально работающем сайте:
Получить UTM метки на PHP
Первое, что необходимо сделать — добавить в имеющуюся форму на сайте скрытое поле, input с типом hidden. Каждая UTM метка — это одно скрытое поле, поэтому нужно добавить именно cтолько, сколько будет меток в URL. Покажу на примере метки utm_sourse. И в value скрытого инпута необходимо поместить небольшой кусок PHP кода, в котором сделаем проверку на наличие GET-параметров в ссылке.
И если метка utm_sourse существует, то ее значение будет внесено в input с name=»utm_sourse». Осталось принять эти UTM метки в файле, который будет отправлять Email. Для этого напишем следующее:
И в самом теле сообщения, где будут данные о заявке сделаем проверку. Если переменная не пустая, то она будет включена в заявку. Обычно я делаю небольшую HTML таблицу для данных, поэтому мой код выглядит следующим образом:
Проверку нужно делать под каждую UTM метку. Более наглядно смотрите в видео, которое я подготовил специально для этого урока. Сложностей возникнуть не должно, но если что — пишите свои комментарии, постараюсь помочь разобраться.
Реферальные хвосты. Как отправить данные из utm меток на почту
Друзья, добрый день. Недавно был озадачен реферальными хвостами 🙂 Нужно было отправить данные, которые передаются в utm метке (вместе с данными, полученными из заполненной формы обратной связи) на почту. Это дает возможность понять, по какому именно ключевому слову пришел клиент и оставил заявку. Кто-то скажет: «Основы программирования», а для меня не так все просто оказалось, но результат есть, и сегодня хочу рассказать вам, как я это реализовал.
Как привязать реферальные хвосты к заявке
Теперь хочу обрадовать всех, кто испугался прочитав о программировании. Уверяю, ничего сложного действительно нет, нужно добавить всего несколько строк к вашим формам и обработчику.
Все очень просто, и скоро вы в этом убедитесь. Фактически, мы создаем несколько дополнительных скрытых полей, которые будут автоматически заполняться нужными нам данными. А потом, как обычно сохраним данные их этих полей в переменную и отправим в письме эти пресловутые реферальные хвосты.
Для того, чтобы все работало, нужно изменить index.html на index.php. Это никак не повлияет на работоспособность landing page, кроме как даст возможность исполнять php сценарии на странице. В общем, страшного ничего не произойдет. Смело меняйте. Никаких отличий вы не заметите.
Итак, план наметили, html на php изменили, давайте реализовывать. Создадим несколько форм для данных UTM меток, а в атрибут value запишем небольшой php запрос, который и подставит туда нужные нам данные.
Третье скрытое поле нужно для того, чтобы обозначить каким-то образом форму. Сами вписываем нужный текст. Например, заявка с первого экрана или обратный звонок. Это для вас. Чтобы было легче отслеживать и анализировать с какого именно места на лендинге была отправлена заявка и вносить нужные правки в заголовки и дизайн форм для увеличения конверсии.
Добавив немного стилей, я получил такой внешний вид:
Кстати, форма адаптивная. Исходник, как обычно, в конце статьи. 🙂 пользуйтесь.
Теперь, как и раньше, нужно просто сохранить в переменные, данные полученные из полей и отправить их на почту. Давайте сделаем это:
Как видите, скрипт очень похож на те, которые быль в контактных формах, описанных ранее. Так что, если вы делали свои контактные формы по моим статьям, то вам проще будет внедрить данный функционал.
В первой части, когда сохраняем в переменные данные, полученные из формы. Далее делаем проверку. Если поле с типом услуги пустое, то редиректим на главную, если нет, отправляем письмо. В принципе, проверку можно делать по любому из полей. Как видите все очень просто, но мне так и не удалось найти полноценного решения этого вопроса в интернете. Все как будто не хотят рассказывать и им лень записать полноценную инструкцию. Хотя вопрос актуален.
Если вам нужны и другие данные UTM меток, то просто сделайте по аналогии. Все будет отлично работать. Еще одним преимуществом именно такой реализации является то, что не используется javascript. А значит кода меньше, а сайт быстрее 🙂 Кстати, рекомендую в обязательном порядке ознакомится с возможным негативном влиянии UTM на SEO продвижение. Лучше перестраховаться!
Буду благодарен за ретвит и комментарии.
42 комментария
Статья отличная, как всегда все коротко, ясно и только по делу!
Название «реферальные хвосты» распиарено Бизнес Молодостью, именно поэтому в яндексе все ищут этот вариант запроса. Так что оптимизировал статью правильно.
Привет. Спасибо. Понятно теперь. Какая-то подмена понятий, наверное, это только путает. Хотя не знаю. Похоже, что это уже укоренилось, и все привыкли 🙂
Добрый день, воспользовался вашей формой, однако не захватывает данные с хвоста. Поможете разобраться?
Здравствуйте. Давайте, попробуем. Можем в вк пообщаться, так быстрее будет http://vk.com/dima_d_v
Вот неплохо было бы еще добавить статью форма обратной связи без перезагрузки на ajax
Так вот же она https://smartlanding.biz/otpravka-formy-bez-perezagruzki-stranicy.html 🙂 Но там есть небольшой минус, отсутствует проверка на заполнение, ее легко добавить, вот никак руки не дойду. На следующей неделе нужно будет заняться.
реализовал форму, но при подстановке ключевой фразы выводится вот что: Ключевое слово\фраза: %D0%.
Получил в зашифрованном виде. Откуда переход был?
А подскажите как передать эти данные во всплывающее окно обратной связи?
Точно так же. Не понял вопрос да и отличия. Форма она и есть форма 🙂
А если лендинг многостраничный. Каким образом можно реализовать передачу данных в письме? Ведь при переходе между страницами utm метки пропадают. Пытался найти про это информацию. Пишут что можно через куки или через сессию пользователя сохранить данные, используя GET. Но конкретного примера не нашел, поэтому с настройкой проблемы. Сможете помочь?
Раньше был лендинг. Теперь переделали в многостраничный сайт с отдельными страницами для каждого товара
Ясно. Ну возьму на заметку. Как-нибудь постараюсь разобраться и написать статью об этом.
Спасибо за статью! Не знаете как это оформить в modx?
Почему-то не срабатывает. Приходят пустые поля. Кто-нибудь проверял, именно в этом виде работает или нет? Просто понять хочу это я неправильно прикрутил, или код не работает так, как задумано?
Прошу пардону. Оказывается я сам дурак. Написано же русским по белому: «Для того, чтобы все работало, нужно изменить index.html на index.php».
Ага, а один из способов это делать, это использовать utm метки. Именно об этом и статья. Это отлично подходит для контекстной рекламы, баннеров, рекламы в вк, тизерах и т.п. (везде, где размещаешь ссылки). Хочешь большего и отслеживать случайные переходы, читай о
, но вряд ли у тебя что-то получиться. Раз задаешь такие вопросы.
Наверное, по аналогии с wp нужно разрешить исполнении php в статьях и виджетах и т.п.
Как настроить передачу UTM-меток с формы подписки в адресную книгу
При создании мультиканальной формы подписки в конструкторе SendPulse вы можете не только настроить передачу информации о событии подписки в свою систему аналитики для отслеживания, но также сохранять в книгу источники и UTM-метки, как переменные для контакта. Используя эти данные, вы cможете создавать сегменты для более персонализированных и актуальных рассылок подписчикам.
После подписки через форму в адресную книгу передаются данные о первом визите пользователя и визите, в течение которого была подписка. При этом для большинства меток необязательно настраивать рекламу или события в системе аналитики.
Содержание
Как активировать сбор UTM-меток
Когда данные передаются
Есть два вида переменных.
К первому типу относятся данные об источнике первоначального визита пользователя на страницу. Такие переменные имеют слово First в названии:
visitFirstUtmSource
visitFirstMedium
visitFirstContent
visitFirstUtmTerm
visitFirstCampaign
visitFirstType
Во второй тип входят данные, собранные во время сабмита формы, то есть при нажатии на кнопку подтверждения после заполнения формы. Такие переменные включают слово Subscribe в названии:
visitSubscribeSource
visitSubscribeMedium
visitSubscribeContent
visitSubscribeTerm
visitSubscribeCampaign
visitSubscribeType
Оба вида меток передаются в адресную книгу вместе с контактом, когда пользователь подписался — то есть после того, как он подтвердил свою подписку через письмо-подтверждение.
Какие данные передаются
Передаются UTM-метки, которые помогают определить, откуда пользователь перешел на сайт в первый раз или во время подписки.
Порядок определения источников соответствует стандартам Google Analytics. Ниже в этом разделе указаны стандарты применения меток, но если метки заданы вручную пользователем, они могут принимать любые значения.
Передаются следующие UTM-метки:
utm_source — определяет источник трафика, откуда пользователь перешел на вашу форму подписки. Например, site.com (любой сайт), yandex, google, facebook.com (и прочие социальные сети), direct (пользователь ввел URL в браузере или зашел на сайт из закладок).
utm_medium — передает тип трафика, может передавать значения: cpc (реклама с оплатой за клик), cpm (реклама с оплатой за показы), referral, organic (перешел на сайт из поисковых систем), social (клик с поста, настройка рекламы в социальных сетях и др).
utm_content — часть страницы, с которой пользователь пришел или подписался. Используется для различения похожего содержимого. Примеры значений, которые передает: cлеш / если с главной страницы сайта или конечная часть адреса, если на другой странице сайта — /emailserviсe/forms; также может включать название элементов страницы.
utm_term — ключевое слово или фраза запроса, по которому пользователь попал на сайт из поисковой системы. Данный параметр не будет задан автоматически при переходе из органической выдачи и задается вручную в настройках рекламных сервисов таких как Google Ads, Yandex Direct. Актуален для платного трафика с поисковых систем.
utm_campaign — название рекламной кампании. Передается, если пользователь перешел на сайт из рекламы по ссылке с UTM-метками.
type — передает тип трафика на основании указанных выше параметров. Может передавать значения: referral (пришел по ссылке), typein (ввел URL в адресную строку), organic (перешел на сайт из поисковых систем), utm (пришел по ссылке с UTM-меткой, обычно для рекламных кампаний).
Всего передаётся 12 переменных: 6 значений, которые относятся к первому посещению страницы, и 6 значений, которые передаются при выполнении целевого действия — подписки через форму.
Обратите внимание: eсли значение параметра отсутствует, то значение переменной будет пустое; eсли это был первый контакт с пустым значением, данная переменная не создастся в адресной книге.
В адресной книге вы также можете настраивать показ переменных: какие отображать, а какие скрывать.
Примеры меток, которые передаются по разным типам источника
Если пользователь подписался при первом посещении сайта, метки Subscribe и First у контакта совпадут. Если пользователь заходил на сайт ранее, но не подписывался, метки будут отличаться — смотрите другие примеры ниже или описание значений выше.
Пользователь перешел на сайт со страницы результатов поиска.
Пользователь перешел по ссылке с сайта.
Пользователь написал в адресной строке URL целевого сайта, где находится форма подписки.
Пользователь пришел через рекламную кампанию с UTM-метками.
Оценка: 5 / 5 (11)
Скрипт отправки формы — Передача utm через Referer
Приветствую! С вами Денис Герасимов сайт rek9.ru и мы поговорим про Скрипт отправки формы к вам на email и об одном маленьком нюансе — передаче utm метки в письмо с помощью Referer.
Что необходимо для передачи utm меток при отправке формы?
Настройка отправки формы на email с utm метками
У меня есть лендинг, который мы создали в предыдущей статье. Я его уже закачал на сервер, у меня есть доступ к хостингу и есть скрипт отправки письма, который состоит из трех файлов (скачать вы его можете чуть выше). Обработчик главной формы это mailer.php файл. Находятся эти файлы в той же папке, что и сайт.
Сейчас покажу как связывать форму с обработчиком. Для этого перейдем на мой рабочий стол. Откроем папку, где содержится код страницы нашего созданного лендинга, откроем файл Index в NotePad++. В строке с тегом [/syntax]
Теперь перейдем в обработчик, и его изменим. Откройте файл maler.php. В строчку subject «Заявка с сайта …» вместо многоточия вставьте адрес вашего сайта. Так же мы можем изменить поле ТЕМА, меняется оно с помощью INFO, которое передается в обработчик. Это сделать можно так: допусти у вас на сайте есть еще одна форма, и в нее вы добавляете скрытое поле с значением name=»info» и тогда тема письма «заявка с сайта..» затрется тем, что вы передадите, например «заявка на звонок» или «заявка на покупку». Тогда уже из письма вы поймете, что хочет получить человек, который заполнил форму.
// отправляем наше письмо
Далее в коде файла maler.php идет обработчик name, то есть нашего имени. Если есть такое поле, то убрать все лишние пробелы и записать это в переменную name, которую мы уже подставляем в строчку «имя отправителя», то есть имя, которое заполнили в форме.
Далее идет обработчик формы email, то есть какой адрес электронной почты заполнил посетитель.
Далее мы видим строчку, где передаются реферер нашей страницы. Если мы не используем utm метки, то мы просто увидим в этой строчке, что заявка пришла с нашего домена. Если же мы используем рекламную кампанию, в которой настроены utm метки, то посетители в адресной строке будут видны, и когда посетитель заполнит форму, то эти данные запишутся сюда. Это мы увидим уже когда будем отправлять письмо.
Далее в коде идет настройка письма. В строке с надписью Adress прописываете свой email. Далее настраивается строчка From от кого пришло письмо, здесь прописываете свой домен, в строке FromName пишите свое имя, представление вас, например, «Денис Герасимов».
Далее идет строчка if, с кодом, если письмо отправлено, то идет переадресация на какую-то страницу сайта, в строке Location… вместо многоточия поставьте страницу для перехода. В результате вы можете настроить Яндекс.Метрику таким образом, что при посещении страницы для перехода, будет засчитано отправка формы с вашего сайта.
После внесенных изменений, сохраните файл и посмотрите изменения на вашем лендинге. Попробуем заполнить форму на сайте, нажмем на кнопку ПОЛУЧИТЬ ДОСТУП и увидим, что происходит переадресация на другую страницу. А к нам на электронную почту, которую мы указали в коде maler.php, пришло письмо «Заявка с сайта». В письме прописано от кого пришло письмо, и с какого адреса. Имейте ввиду, что иногда заявки попадают в спам, поэтому нужно настроить фильтр, чтобы они попадали во Входящие.
Теперь протестируем как работают utm метки. Для этого воспользуемся конструктором utm меток www.tools.yaroshenko.by. (или моим конструктором, сам его сделал) Выберите раздел Генератор UTM меток, Ведите адрес целевой страницы (ваш домен), Источник трафика выберите для примера Яндекс.Директ. Измените НАЗВАНИЕ КАМПАНИИ, УНИКАЛЬНЫЙ ИДЕНТИФИКАТОР, КЮЧЕВОЕ СЛОВО, например, «Игры для девочек». Нажмите кнопку СГЕНЕРИРОВАТЬ ССЫЛКУ UTM МЕТКАМИ.
После этого скопируем ссылку и вставим ее в адресную строку нашего лендинга, предполагая, что на рекламной кампании из Яндекса к нам пришли на лендинг. Затем увидим, что в адресной строке изменился код, который обозначает, что посетитель перешел на наш лендинг с рекламы на Яндексе по ключевому слову «игры для девочек». Теперь попробуем снова заполнить форму. После нажатия кнопки, проверяем свою почту. В письме увидим, что заявка пришла со страницы с длинным кодом и UTM метками. В итоге вы можете увидеть какое объявление конвертит в заявку, какое ключевое слово лучше работает. Обратите внимание, что utm term у нас закодирован. Чтобы их увидеть нужно навести курсором мыши на ссылку и в левом нижнем углу браузера, можно увидеть, что utm term = «игры для девочек». Если вы не хотите, чтобы в письме utm term было зашифровано, то лучше в генераторе utm меток использовать в графе КЛЮЧЕВОЕ СЛОВО вместо
Вот такой принцип работы скрипта, который вы можете скачать по ссылке в статье.
Настройка передачи UTM-меток
UTM-метка — фрагменты кода, состоящие из параметра и его значения, добавленные в URL для отслеживания эффективности маркетинговых активностей в интернете (в том числе и рассылок) через системы аналитики, например Google Analytics (GA).
Для получения UTM-меток из eSputnik не нужно дополнительно настраивать интеграцию с системами аналитики. Метка формируется автоматически и отдается сразу же, как только пользователь совершил какое-либо действие. Есть возможность отключать их автогенерацию и добавлять свои UTM.
Для указания параметров UTM-метки необходимо зайти в настройки организации → вкладка “Лаборатория”.
и сделать активной передачу UTM-меток, чтобы в систему аналитики начали передаваться параметры об источниках трафика.
К обязательным параметрам относятся:
Если вам нужно отследить какой-то из этих параметров, укажите его в полях “Название кампании” или “Ключевое слово кампании”.
Настройка передачи UTM-меток на уровне сообщения
Email-сообщения
По умолчанию система автоматически генерирует теги, которые считывает Google Analytics.
Существует два метода подстановки своих тегов:
1. Подстановка ссылок в теле письма с предварительно сгенерированной UTM-меткой.
Зайдите в дополнительные параметры письма, для этого кликните на три точки в верхнем меню редактора писем. Выберете пункт “Задать настройки ссылок”:
Сделайте неактивным пункт “Передача utm-меток”.
При создании письма в редакторе пропишите ссылки с вашими тегами:
Такой способ подойдет, если вам, например, нужно отследить конверсии разных кнопок или элементов письма.
Приоритет всегда отдается метке, прописанной вручную, даже при активном ползунке “Передача utm-меток”.
2. Прописывание тегов для конкретного письма. Зайдите в дополнительные параметры письма → пункт “Задать настройки ссылок” и откорректируйте их.
Если вы настроите трекинг UTM-меток на уровне письма, но при этом не отключите метки на уровне организации, то при передаче меток в систему аналитики приоритет будет у метки, сформированной на уровне письма.
При копировании письма копируется и его UTM. В таком случае статистика по двум-трем и т.д. письмам попадет в один отчет и отследить эффективность конкретного сообщения будет невозможно. Если вы прописываете метки вручную, то проверяйте их в каждом письме. Аналогично если письмо с проставленными вручную метками сохранить в шаблон, то все созданные из шаблона письма будут иметь его метки. При отключении отслеживания перехода по ссылкам данные в Analytics не будут передаваться.
Viber-сообщения, SMS, web push и mob push
По умолчанию ползунок включения автоматической UTM-метки в сообщении Viber и web push активен. Используются те же переменные, что заданы в “Лаборатории”.
Если вы хотите передавать свои значения, то отключите проставление меток системой и в редакторе сообщения пропишите ссылоку с предварительно сгенерированной UTM-меткой. Это можно сделать вручную или спомощью компоновщика.
Метки для СМС также передаются автоматически, если опция передачи меток включена на уровне организации и в канале кампании прописана переменная $mediaType. При необходимости вы можете сгенерировать свою UTM-метку, но ее нужно предварительно сократить через специальные сервисы.
Метки для мобильных пушей не передаются автоматически, их нужно прописывать для каждого сообщения.