UTM-метки помогают получить подробную информацию о каждом источнике трафика. Например, определить, какие участки рекламной кампании приносят наименьшее количество прибыли. Это поможет оперативно реагировать на изменения на сайте и перераспределять рекламный бюджет.
Для реализация форма будем использовать Contact form7 — это самый просто способ создания формы вот примет шаблона формы
<div id="modal_form">
<span id="modal_close">X</span>
<div class="utmmodal">
<h3><b>Получите подарок!</b></h3>
<p>Введите ваш Email и получите бесплатную консультацию + промокод на скидку 10%</p>
[email* email-824 "Email"]
[submit "забрать"]
<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: none;" role="alert"></div>
</div>
</div>
<div id="overlay"></div>
Далее работаем с функцией темы. Наличие метки это обычный get параметр
add_action('wp_footer','UtmPop_hook'); // подключаем в футере
function UtmPop_hook()
{
// проверяем есть ли метка informator или forma
if (($_GET['utm_campaign']=="informator" ) || ($_GET['utm_campaign']=="forma" )) {
echo do_shortcode( '[contact-form-7 id="1472" title="Utm окно"]');// Вставляем шорткод формы Contact form
// вставляем скрипт чтобы не подключать
?>
<script>
/*modal pop up*/
jQuery(document).ready(function() {
jQuery('#overlay').fadeIn(400,
function(){
jQuery('#modal_form')
.css('display', 'block')
.animate({opacity: 1, top: '50%'}, 200);
});
function CloseUtmPopUp(){
jQuery('#modal_form')
.animate({opacity: 0, top: '45%'}, 200,
function(){
jQuery(this).css('display', 'none');
jQuery('#overlay').fadeOut(400);
}
);
}
jQuery('#modal_close, #overlay').click( function(){
CloseUtmPopUp();
});
});
document.addEventListener( 'wpcf7mailsent', function( event ) {
if(event.detail.contactFormId=="1472"){
jQuery('#modal_form')
.animate({opacity: 0, top: '45%'}, 200,
function(){
jQuery(this).css('display', 'none');
jQuery('#overlay').fadeOut(400);
}
);
}
}, false );
/*modal pop up end*/
</script>
<?php
}
}
Добавляем стили для нашего окна
#modal_form {
width: 300px;
height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
border-radius: 5px;
border: 3px #000 solid;
background: #fff;
position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
left: 50%; /* пoлoвинa экрaнa слевa */
margin-top: -150px;
margin-left: -150px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */
display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
padding: 20px 10px;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
#modal_form #modal_close {
width: 21px;
height: 21px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;
}
/* Пoдлoжкa */
#overlay {
z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
position:fixed; /* всегдa перекрывaет весь сaйт */
background-color:#000; /* чернaя */
opacity:0.8; /* нo немнoгo прoзрaчнa */
-moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
filter:alpha(opacity=80);
width:100%;
height:100%; /* рaзмерoм вo весь экрaн */
top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
left:0;
cursor:pointer;
display:none; /* в oбычнoм сoстoянии её нет) */
}
.utmmodal {
text-align: center;
}
.utmmodal input {
margin: 5px auto;
border: 1px solid #ccc;
border-radius: 5px;
}
.utmmodal .wpcf7-submit {
background: #710505!important;
width: 100%;
}
В конце при переходе на сайт по этой метки пользователь увидит окно с формой
коммент.