Приветствую вас, дорогие друзья!
Сегодня я хотела бы вам рассказать об одной очень полезной и удобной функции Яндекс.Метрики, как использование целей для отслеживания работы форм обратной связи Contact Form 7 для WordPress.
Подключив формы Contact Form 7 в целях Яндекс.Метрики вы можете с легкостью отслеживать с каких форм обратной связи чаще всего отправляются заявки, а с каких вообще не отправляются. Проанализировав полученные данные, вы сможете внести правки в дизайн или структура сайта для увеличения количества заявок.
Навигация по статье:
В этой статье я покажу вам как правильно подключить цели Яндекс.Метрики для Contact Form 7, так как с момента последнего обновления плагина, процедура подключения целей существенно поменялась.
Создание цели для Contact Form 7
Итак, для начала нам нужно создать цель в Яндекс.Метрике. Для этого у вас на сайте уже должен быть подключен скрипт счетчика посещаемости. Если вы еще этого не сделали, то инструкцию можно прочитать в этой статье:
Как узнать посещаемость сайта. Установка Яндекс.Метрики
Далее делаем следующее:
- 1.Заходим на сайт Яндекс.Метрики и авторизуемся.
- 2.На открывшейся странице со списком сайтов с подключенными счетчиками, кликаем указателем мышки по названию нужного нам сайта:
- 3.Далее, в меню выбираем пункт «Настройка»
- 4.Переходим на вкладку «Цели» и нажимаем на кнопку «Добавить цель»:
- 5.В открывшемся окошке задаем название цели и переходим на вкладку «JavaScript-событие», где нам нужно указать идентификатор данной цели. После того, как мы заполнили все поля, нажимаем на кнопку «Добавить цель»
- 6.После того как цель была добавлена нужно обязательно нажать на кнопку «Сохранить»:
Подключение цели Яндекс.Метрики в WordPress
После того, как мы создали цель в Яндекс.Метрике мы можем приступить к ее подключению в WordPress. Вот здесь, как раз и начинается самое интересное.
Дело в том, что раньше, для подключения цели в Contact Form 7 было достаточно дописать одну строку в окне редактирования формы, на вкладке «Дополнительные настройки».
Теперь же, с момента обновления плагина до версии 4.9 такой вариант подключения цели не работает. При попытке использовать старый вариант подключения вы получите вот такой результат:
Выход из положения можно найти, порывшись в справочной документации, которую можно найти, перейдя по ссылке возле надписи «Используются устаревшие настройки».
Теперь, для подключения целей для Contact Form 7 нужно сделать следующее:
- 1.Открываем файл functions.php, который находится в корневой папке активной темы.
- 2.Пролистываем в самый конец файла и добавляем следующий фрагмент кода:
1234567891011121314add_action( 'wp_footer', 'mycustom_wp_footer' );function mycustom_wp_footer() {?><script type="text/javascript">document.addEventListener( 'wpcf7mailsent', function( event ) {if ( '22' == event.detail.contactFormId ) {yaCounter46469931.reachGoal('consult');}}, false );</script><?php} - 3.Здесь, в этом фрагменте кода, нужно внести свои изменения, в соответствии с вашими данными:
- 1.)Там где в одинарных кавычках указано число ’22’ – это идентификатор подключаемой формы. Здесь вы должны вставить ID вашей формы, который можно посмотреть в админпанели сайта, на странице «Contact Form 7» => «Контактные формы»
- 2.)В строке «yaCounter46469931.reachGoal(‘consult’);» заменяем числовое значение (идентификатор счетчика Яндекс.Метрики) на свое. Идентификатор счетчика вы можете посмотреть в настройках Яндекс.Метрики на вкладке «Основное» или в коде счетчика:
- 3.)В строке «yaCounter46469931.reachGoal(‘consult’);» заменяем идентификатор цели (‘consult’) на свой.
- 1.)Там где в одинарных кавычках указано число ’22’ – это идентификатор подключаемой формы. Здесь вы должны вставить ID вашей формы, который можно посмотреть в админпанели сайта, на странице «Contact Form 7» => «Контактные формы»
- 4.Далее, нам остается только сохранить файл и дождаться обновления информации на странице сайта Яндекс.Метрики «Конверсии»
Надеюсь у меня получилось максимально подробно описать подключение целей Яндекс.Метрики для форм Contact Form 7. Если у вас возникнут какие-то сложности или вопросы, вы можете задать их в комментариях.
Если эта статья была для вас полезной, не забудьте подписаться на мою рассылку и поделиться статьей в социальных сетях.
А на сегодня у меня все. До встречи в следующих статьях.
С уважением Юлия Гусарь
Юлия, добрый день
А можно как-то настроить отслеживание конверсии в заявки с определенных utm-меток?
Т.е. приходит например с рекламы посетитель, смотрит сайт, потом на одной из страниц тыцает на форму, отправляет. Вопрос: можно ли в Метрике или в Гугл Аналитике отследить что эта заявки пришла с рекламы?
Все сделал, но в доп. настройках плагина все равно высвечивается ошибка.
А перед кодом
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
Случайно не надо добавить «<?php» ?
Если перед этим файл функшнс кончается на
‘after_page_number’ => » // строка после цифры
));
}
?>
например.
?
Можно вставить код перед знаком ?>
Или, если Вам так удобнее, поставить вначале кода < ?php а в конце ?>
Добрый день, я повторюсь с вопросом: если у меня 10 целей то как тогда быть ?
Здравствуйте! В этом случае вставляете код, указанный в статье, а далее дублируете код, отмеченный на скриншоте, столько раз сколько нужно, при этом заменяя идентификаторы формы, цели и счётчика на свои.
Скриншот: http://prntscr.com/j7jgqp
Благодарю за детальную инструкцию! )
Спасибо за Ваш комментарий!
спасибо добрый человек! все работает!
И Вам спасибо! Удачи Вам!
После того как все действия будут сделаны, ошибки в форме » Обнаружена 1 ошибка в конфигурации» исчезнуть должна?
Да, должна. Вы ведь убрали тот код что был на вкладке «Дополнительные настройки»?
Нет, не убрали. Надо убрать? :)
Юлия, спасибо, все работает!
Здравствуйте, подскажите пожалуйста, я вообще правильно вставил код в раздел дополнительные настройки? ) У меня не работает, прошу помощи.
Скрин https://pp.userapi.com/c845418/v845418905/a3bfe/HFqhUFaAhDA.jpg
Этот код нужно вставлять в файл functions.php Вашей темы, а не в «Дополнительные настройки»!
Я разобрался, что в корне файлов файл functions.php — но любые изменения делают сайт не доступным т.к. пишет ошибка в коде… я все перепробовал
Посмотрите нет ли у Вас в конце этого файла лишних пустых строк или знака ?>
Код нужно вставлять перед закрытием ?>
Подскажите, у меня несколько целей, в вожу ниже указанный код, сайт перестает работать. Если ввожу код на одну цел все работает. Подскажите где ошибка. Благодарю
}
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
<script type=»text/javascript»>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ’12’ == event.detail.contactFormId ) {
yaCounter22985389.reachGoal(‘callback’);
}
}, false );
</script>
<?php
}
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
<script type=»text/javascript»>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ’62’ == event.detail.contactFormId ) {
yaCounter22985389.reachGoal(‘Feedback’);
}
}, false );
</script>
<?php
}
Спасибо, огромное!
Почему-то все, кто освещает эту тему, только повторяют справочную информацию! 2 дня искал решение проблемы! Все работает!
Помогите, пожалуйста, решить следующую!
Заметил, что у меня много посещений 0:00 сек времени.
В службе поддержки ответили так:
Дело в том, что в коде счётчика, установленном на сайте, у параметра accurateTrackBounce стоит значение false. При таком значении параметры точный показатель отказов отключен. Для исправления ситуации рекомендуем установить значение true, подробнее https://yandex.ru/support/metrika/code/counter-initialize.html.
Как это сделать?
Спасибо!
Здравствуйте, Алексей!
Откройте код Вашего счётчика, который Вы вставляли на сайт, найдите там параметр «accurateTrackBounce» и вместо значения false вставьте true.
Здравствуйте. А не подскажете как настроить цели яндекс, если формы сделаны в WPForms?
Здравствуйте, Юлия, по вашей инструкции все сделала, вставила код в functions.php , но счетчик не срабатывает, к сожалению :(
http://joxi.ru/LmG9YVNfedKyGA
Юлия, спасибо
теперь всё работает
Отлично! Спасибо за комментарий!
помогите плз если не сложно.
если я вставляю код, который вы выше написали, сайт перестает грузится. в чем ошибка?
<?php
/**
* Функции шаблона (function.php)
* @package WordPress
* @subpackage birja
*/
add_theme_support(‘title-tag’);
register_nav_menus(array(
‘top’ => ‘Верхнее’,
‘bottom’ => ‘Внизу’,
‘vnutri’ => ‘Внутри сайта’
));
add_theme_support(‘post-thumbnails’);
set_post_thumbnail_size(250, 150);
add_image_size(‘big-thumb’, 400, 400, true);
register_sidebar(array(
‘name’ => ‘Сайдбар’,
‘id’ => «sidebar»,
‘description’ => ‘Обычная колонка в сайдбаре’,
‘before_widget’ => ‘<div id=»%1$s» class=»widget %2$s»>’,
‘after_widget’ => «</div>\n»,
‘before_title’ => ‘<span class=»widgettitle»>’,
‘after_title’ => «</span>\n»,
));
function true_register_wp_sidebars() {
/* В боковой колонке — первый сайдбар */
register_sidebar(
array(
‘id’ => ‘true_side’, // уникальный id
‘name’ => ‘Топ панель’, // название сайдбара
‘description’ => ‘Перетащите сюда виджеты, чтобы добавить их в сайдбар.’, // описание
‘before_widget’ => ‘<div id=»%1$s» class=»side widget %2$s»>’, // по умолчанию виджеты выводятся <li>-списком
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3 class=»widget-title»>’, // по умолчанию заголовки виджетов в <h2>
‘after_title’ => ‘</h3>’
)
);
register_sidebar(
array(
‘id’ => ‘true_side_mobile’, // уникальный id
‘name’ => ‘Топ панель мобилка’, // название сайдбара
‘description’ => ‘Перетащите сюда виджеты, чтобы добавить их в сайдбар.’, // описание
‘before_widget’ => ‘<div id=»%1$s» class=»side widget %2$s»>’, // по умолчанию виджеты выводятся <li>-списком
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3 class=»widget-title»>’, // по умолчанию заголовки виджетов в <h2>
‘after_title’ => ‘</h3>’
)
);
}
add_action( ‘widgets_init’, ‘true_register_wp_sidebars’ );
if (!class_exists(‘clean_comments_constructor’)) {
class clean_comments_constructor extends Walker_Comment {
public function start_lvl( &$output, $depth = 0, $args = array()) {
$output .= ‘<ul class=»children»>’ . «\n»;
}
public function end_lvl( &$output, $depth = 0, $args = array()) {
$output .= «</ul><!— .children —>\n»;
}
protected function comment( $comment, $depth, $args ) {
$classes = implode(‘ ‘, get_comment_class()).($comment->comment_author_email == get_the_author_meta(’email’) ? ‘ author-comment’ : »);
echo ‘<li id=»comment-‘.get_comment_ID().'» class=»‘.$classes.’ media»>’.»\n»;
echo ‘<div class=»media-left»>’.get_avatar($comment, 64, », get_comment_author(), array(‘class’ => ‘media-object’)).»</div>\n»;
echo ‘<div class=»media-body»>’;
echo ‘<span class=»meta media-heading»>Автор: ‘.get_comment_author().»\n»;
//echo ‘ ‘.get_comment_author_email();
echo ‘ ‘.get_comment_author_url();
echo ‘ Добавлено ‘.get_comment_date(‘F j, Y в H:i’).»\n»;
if ( ‘0’ == $comment->comment_approved ) echo ‘<br><em class=»comment-awaiting-moderation»>Ваш комментарий будет опубликован после проверки модератором.</em>’.»\n»;
echo «</span>»;
comment_text().»\n»;
$reply_link_args = array(
‘depth’ => $depth,
‘reply_text’ => ‘Ответить’,
‘login_text’ => ‘Вы должны быть залогинены’
);
echo get_comment_reply_link(array_merge($args, $reply_link_args));
echo ‘</div>’.»\n»;
}
public function end_el( &$output, $comment, $depth = 0, $args = array() ) {
$output .= «</li><!— #comment-## —>\n»;
}
}
}
if (!function_exists(‘pagination’)) {
function pagination() {
global $wp_query;
$big = 999999999;
$links = paginate_links(array(
‘base’ => str_replace($big,’%#%’,esc_url(get_pagenum_link($big))),
‘format’ => ‘?paged=%#%’,
‘current’ => max(1, get_query_var(‘paged’)),
‘type’ => ‘array’,
‘prev_text’ => ‘Назад’,
‘next_text’ => ‘Вперед’,
‘total’ => $wp_query->max_num_pages,
‘show_all’ => false,
‘end_size’ => 15,
‘mid_size’ => 15,
‘add_args’ => false,
‘add_fragment’ => »,
‘before_page_number’ => »,
‘after_page_number’ => »
));
if( is_array( $links ) ) {
echo ‘<ul class=»pagination»>’;
foreach ( $links as $link ) {
if ( strpos( $link, ‘current’ ) !== false ) echo «<li class=’active’>$link</li>»;
else echo «<li>$link</li>»;
}
echo ‘</ul>’;
}
}
}
add_action(‘wp_footer’, ‘add_scripts’);
if (!function_exists(‘add_scripts’)) {
function add_scripts() {
if(is_admin()) return false;
wp_deregister_script(‘jquery’);
wp_enqueue_script(‘jquery’,’//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’,»,»,true);
wp_enqueue_script(‘bootstrap’, get_template_directory_uri().’/js/bootstrap.min.js’,»,»,true);
wp_enqueue_script(‘main’, get_template_directory_uri().’/js/main.js’,»,»,true);
}
}
add_action(‘wp_print_styles’, ‘add_styles’);
if (!function_exists(‘add_styles’)) {
function add_styles() {
if(is_admin()) return false;
wp_enqueue_style( ‘bs’, get_template_directory_uri().’/css/bootstrap.min.css’ );
wp_enqueue_style( ‘main’, get_template_directory_uri().’/style.css’ );
wp_enqueue_style( ‘main2′, get_template_directory_uri().’/css/calc.css?ver=1.2’ );
}
}
if (!class_exists(‘bootstrap_menu’)) {
class bootstrap_menu extends Walker_Nav_Menu {
private $open_submenu_on_hover;
function __construct($open_submenu_on_hover = true) {
$this->open_submenu_on_hover = $open_submenu_on_hover;
}
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= «\n<ul class=\»dropdown-menu\»>\n»;
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$item_html = »;
parent::start_el($item_html, $item, $depth, $args);
if ( $item->is_dropdown && $depth === 0 ) {
if (!$this->open_submenu_on_hover) $item_html = str_replace(‘<a’, ‘<a class=»dropdown-toggle» data-toggle=»dropdown» role=»button» aria-haspopup=»true» aria-expanded=»false»‘, $item_html);
$item_html = str_replace(‘</a>’, ‘ <b class=»caret»></b></a>’, $item_html);
}
$output .= $item_html;
}
function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
if ( $element->current ) $element->classes[] = ‘active’;
$element->is_dropdown = !empty( $children_elements[$element->ID] );
if ( $element->is_dropdown ) {
if ( $depth === 0 ) {
$element->classes[] = ‘dropdown’;
if ($this->open_submenu_on_hover) $element->classes[] = ‘show-on-hover’;
} elseif ( $depth === 1 ) {
$element->classes[] = ‘dropdown-submenu’;
}
}
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}
}
if (!function_exists(‘content_class_by_sidebar’)) {
function content_class_by_sidebar() {
if (is_active_sidebar( ‘sidebar’ )) {
echo ‘col-sm-9’;
} else {
echo ‘col-sm-12’;
}
}
}
function menu_items_move_class_from_li_to_a( $atts, $item, $args ) {
$class = $item->classes[0];
if ( strpos($class, ‘menu-item’) === false ) {
$atts[‘class’] = $class;
}
return $atts;
}
add_filter( ‘nav_menu_link_attributes’, ‘menu_items_move_class_from_li_to_a’, 10, 3 );
function vComp(){
get_template_part(‘calculator’);
}
add_shortcode( ‘vShortcode’, ‘vComp’ );
add_action(‘acf/init’, ‘my_acf_init’);
function my_acf_init() {
if( function_exists(‘acf_add_options_page’) ) {
$option_page = acf_add_options_page(array(
‘page_title’ => __(‘Общие настройки’, ‘my_text_domain’),
‘menu_title’ => __(‘Общее’, ‘my_text_domain’),
‘menu_slug’ => ‘theme-general-settings’,
));
}
}
?>
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
<script type=»text/javascript»>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ’18’ == event.detail.contactFormId ) {
yaCounter51293893.reachGoal(‘form1’);
}
}, false );
</script>
<?php
}
Здравствуйте!
Попробуйте предложенный в статье код вставить перед символом, показанным на скриншоте http://prntscr.com/loxb11
Или вообще удалите выделенный на скриншоте символ. Попробуйте оба варианта.
Здравствуйте, Юлия! очень понравилась ваша статья и помогла, до этого я трижды пыталась цель повесить на контактную форму у себя на сайте! Спасибо вам за то, что пишите полезные статьи! буду читать вас дальше! Успехов вам!
Здравствуйте, Светлана! Спасибо за Ваш комментарий!
Очень приятно :)
Здравствуйте! Будет ли корректно работать данный код, если у меня создана одна цель и к ней я хочу подключить 4 контактные формы?
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
<script type=»text/javascript»>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ‘1998’ == event.detail.contactFormId ) {
yaCounter51252211.reachGoal(‘ORDER’);
}
if ( ‘1774’ == event.detail.contactFormId ) {
yaCounter51252211.reachGoal(‘ORDER’);
}
if ( ‘1990’ == event.detail.contactFormId ) {
yaCounter51252211.reachGoal(‘ORDER’);
}
if ( ‘1833’ == event.detail.contactFormId ) {
yaCounter51252211.reachGoal(‘ORDER’);
}
}, false );
</script>
<?php
}
Здравствуйте!
Как добавить с помощью кода несколько целей? У меня 20 форм заявок.
Здравствуйте! Нужно будет повторять предложенный фрагмент кода меняя идентификатор формы и идентификатор цели.
Юлия, здравствуйте!
Публикую ниже код для 3-х контактных форм. Данные в раздел Конверсии Метрики почему — то не попадают.
Подскажите пож-та, что можно изменить?
———————————-
…………..[здесь прикладываются 3 последние строчки кода из functions.php]
return et_get_safe_localization( sprintf( $credits_format, $footer_credits, ‘div’ ) );
}
endif;
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
<script type=»text/javascript»>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ‘43187’ == event.detail.contactFormId ) {
yaCounter48660077.reachGoal(‘getfreeacces’);
}
if ( ‘43188’ == event.detail.contactFormId ) {
yaCounter48660077.reachGoal(‘prinyatie43188’);
}
if ( ‘38680’ == event.detail.contactFormId ) {
yaCounter48660077.reachGoal(‘telefon38680’);
}
}, false );
</script>
<?php
}
Здравствуйте Юлия, добавил 2 цели, вставил в конец кода, при обновлении страницы просто белый экран, как быть подскажите пожалуйста. Спасибо.
Здравствуйте, Максим! А у Вас перед кодом «add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );» в конце файла случайно не стоят символы «?>» ? Если стоят — удалите их или поставьте перед кодом «add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );» символы «
С этой целью работает,
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
<script type=»text/javascript»>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ‘844’ == event.detail.contactFormId ) {
yaCounter52710556.reachGoal(‘zvonok’);
}
}, false );
</script>
<?php
}
Как вставляю ниже вот эту, белый экран.
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
<script type=»text/javascript»>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ‘831’ == event.detail.contactFormId ) {
yaCounter52710556.reachGoal(‘consult’);
}
}, false );
</script>
<?php
}
Формы наоборот работают, не в том порядке скинул, с consult работает, с zvonok белый экран
Решил проблему, таким образом, в один код прописал 2 цели.Выкладываю кому понадобится
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
<script type=»text/javascript»>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
if ( ‘831’ == event.detail.contactFormId ) {
yaCounter52710556.reachGoal(‘consult’);
}
if ( ‘844’ == event.detail.contactFormId ) {
yaCounter52710556.reachGoal(‘zvonok’);
}
}, false );
Здравствуйте, сделал вроде все по инструкции, но метрика не находит счетчик.
https://yadi.sk/i/1uQAR98zWfXprA
что не так)
спасибо
Юлия, Вы большая молодец! Я перерыл множество сайтов где написано очень похоже, но они не смогли решить проблему! Ключевым оказалось обращение в файл functions.php. благодаря чему, счетчик заработал как надо (вроде)))
Сергей, спасибо большое за Ваш комментарий! Удачи Вам!
Юлия, здравствуйте! А как эту форму Contact Form7 связать с рекламой?
Здравствуйте, Оксана! Что именно Вы имеете ввиду?
Бомба, спасибо. Только ваш вариант сработал.
Спасибо! Всё отлично работает :)
Спасибо, все работает!
Отличено! И Вам спасибо за комментарий!