Приветствую! С вами Денис Герасимов сайт rek9.ru и мы поговорим про Скрипт отправки формы к вам на email и об одном маленьком нюансе — передаче utm метки в письмо с помощью Referer.
Что необходимо для передачи utm меток при отправке формы?
- Лендинг с формой. Если у вас его до сих пор нет, то в предыдущей статье вы можете узнать о том, как с помощью bootstrap можно создать адаптивный лендинг. (Лендинг также можно скопировать)
- Скрипт отправки формы на email. Возможно он есть у вас в комплекте с лендингом. Если его нет, то вы можете его скачать под этой статьей.
- Натсроить скрипт, соединить форму лендинга с этим скриптом и настроить скрипт таким образом, чтобы письма приходили к вам на email.
- Для того, чтобы видеть utm метки необходимо прописать строчку на php[syntax type=»html»]<b>Заявка пришла со страницы: </b> ‘ . $_SERVER[«HTTP_REFERER»] .'<br>.[/syntax]В итоге если заявка пришла со страницы с utm метками, то вы увидите эти метки у себя в письме.
Настройка отправки формы на email с utm метками
У меня есть лендинг, который мы создали в предыдущей статье. Я его уже закачал на сервер, у меня есть доступ к хостингу и есть скрипт отправки письма, который состоит из трех файлов (скачать вы его можете чуть выше). Обработчик главной формы это mailer.php файл. Находятся эти файлы в той же папке, что и сайт.
Сейчас покажу как связывать форму с обработчиком. Для этого перейдем на мой рабочий стол. Откроем папку, где содержится код страницы нашего созданного лендинга, откроем файл Index в NotePad++. В строке с тегом <form> необходимо ввести строчку action = «mail/mailer.php» указав тем самым путь до нашего обработчика на сервере. Необходимо так же прописать method = «post». Далее в поле, где мы передаем email необходимо прописать name = «email», а в поле, где мы передаем имя прописать name = «name», а тип кнопки изменить на <button type = «submit», чтобы при нажатии этой кнопки передавались данные к обработчику. То есть изменить нужно всего 4 строчки. Смотрите измененный код ниже. Копировать для внесения изменений на свой сайт, лучше тоже от туда.
[syntax type=»html»]<form role=»form» action=»mail/mailer.php» method=»post»>
<div class=»form-group»>
<label for=»exampleInputPassword1″>Введите имя</label><input type=»text» name=»name» class=»form-control» id=»exampleInputName»>
</div>
<div class=»form-group»>
<label for=»exampleInputEmail1″>Введите email</label><input type=»email» name=»email» class=»form-control» id=»exampleInputEmail1″>
</div>
<button type=»submit» class=»btn btn-danger btn-lg btn-block»>Получить доступ!</button>
</form>[/syntax]
Теперь перейдем в обработчик, и его изменим. Откройте файл maler.php. В строчку subject «Заявка с сайта …» вместо многоточия вставьте адрес вашего сайта. Так же мы можем изменить поле ТЕМА, меняется оно с помощью INFO, которое передается в обработчик. Это сделать можно так: допусти у вас на сайте есть еще одна форма, и в нее вы добавляете скрытое поле с значением name=»info» и тогда тема письма «заявка с сайта..» затрется тем, что вы передадите, например «заявка на звонок» или «заявка на покупку». Тогда уже из письма вы поймете, что хочет получить человек, который заполнил форму.
[syntax type=»php»]<?php
/*
* Денис Герасимов https://rek9.ru/
* Данный скрипт обрабатывает форм и отправляет ее на email
* В письме вы увидите utm метки, если использовали их в рекламной кампании
* Измените в данном скрипте:
* 1. Тему письма (13 строчку)
* 2. Введите ваш email, на который отправлять обработанную форму (36 строчка)
* 3. Email, с которого отправлять письмо (39 строчка)
* 4. Имя, с которого отправляется письмо (40 строчка)
* 5. URL, на который будет переадресация, при успешной отправке формы (45 строчка)
*/
$subject = ‘Заявка с сайта …’; // тема письма , вместо многоточия вставьте ваш домен
$mess = »;
$mess .= ‘<hr>’;
if(isset($_POST[‘info’])) {
$subject = $_POST[‘info’]; // тема письма , можно передать другое значение в поле hidden name=»info»
}
if(isset($_POST[‘name’])) {
$name = substr(htmlspecialchars(trim($_POST[‘name’])), 0, 100);
$mess .= ‘<b>Имя отправителя: </b>’ . $name . ‘<br>’;
}
if(isset($_POST[’email’])) {
if($_POST[’email’]!=»){
$email = substr(htmlspecialchars(trim($_POST[’email’])), 0, 100);
$mess .= ‘<b>Email: </b>’ . $email . ‘<br>’;
}
}
$mess .= ‘<b>Заявка пришла со страницы:</b> ‘ . $_SERVER[«HTTP_REFERER»] .'<br>’; // строчка, в которой передается UTM метки если есть
$mess .= ‘<hr>’;
// подключаем файл класса для отправки почты
require ‘class.phpmailer.php’;
$mail = new PHPMailer();
$mail->AddAddress(‘test@test.ru’,»); // кому — адрес, Имя (например, ’email@ rek9.ru’,’Денис Герасимов’)
$mail->IsHTML(true); // выставляем формат письма HTML
$mail->CharSet = «UTF-8»; // кодировка
$mail->From = «root@localhost»; // email, с которого отправиться письмо
$mail->FromName = «Денис Герасимов»; // откого письмо
$mail->Body = $mess;
// отправляем наше письмо
if ($mail->Send()) header(‘Location: ../’); // в поле Location можно настроить переадресацию
else { die (‘Mailer Error: ‘ . $mail->ErrorInfo); }
?>[/syntax]
Далее в коде файла 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 меток использовать в графе КЛЮЧЕВОЕ СЛОВО вместо {keyword} такой макрос как {phrase_id}. Тогда вместо ключевого слова подставиться уникальный идентификатор фраз, который вы сможете расшифровать в Директ Коммандере.
Вот такой принцип работы скрипта, который вы можете скачать по ссылке в статье.
↓ Презентация cloud.mail.ru
↓ Скрипт cloud.mail.ru