Contact Form 7 и reachGoal — настройка многих целей Яндекс Метрики

Не знаю, как вам, а мне так и не удалось найти в инете нормальный мануал по настройке нескольких целей одновременно для Contact Form 7 в WordPress. Пришлось разобраться самому.

Как известно, ещё в 2017 году, дополнительное свойство on_sent_ok было исключено из употребления.

Обновление 01.10.2019: Обратите внимание!

Метод reachGoal на данный момент имеет несколько другой вид: ym(XXXXXX, ‘reachGoal’, ‘TARGET_NAME’); . В остальном принцип работы не поменялся. 

После этого, разработчик CF7 написал, что можно делать так:

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '123' == event.detail.contactFormId ) {
        yaCounter000000.reachGoal('name_of_goal');
    }
}, false );
</script>
<?php
}

Где «123» — это event.detail.contactFormId, т.е. id созданной в админке формы CF7.

[contact-form-7 id="123" title="Contact form 1"]

Всё это прописывается в файле function.php в корне вашей темы WordPress.

Так вот, всё бы хорошо, но как быть с несколькими целями? Я пробовал и конструкцию вида «else if», и разные функции с экншнами использовать. Ничего не помогало, цели так и не фиксировались в метрике…

Дальше решил попробовать тест — конечно же alert(»), как же без него? 🙂 Проставив его в конструкцию «else if», было выявлено, что функция не работает!

Этот метод проверки привёл меня к тому, что нужно дублировать именно то, что находится внутри <script>:

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '123' == event.detail.contactFormId ) {
        yaCounter000000.reachGoal('name_of_goal1');
    }
}, false );
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '456' == event.detail.contactFormId ) {
        yaCounter000000.reachGoal('name_of_goal2');
    }
}, false );
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '789' == event.detail.contactFormId ) {
        yaCounter000000.reachGoal('name_of_goal3');
    }
}, false );
</script>
<?php
}

Итак, сколько целей нужно, столько addEventListener’ов и дублируйте. Не забывайте только менять id формы и имя цели, указанной в Метрике.

Помогло? Лайкуйте, комментируйте, делитесь!

На этом у меня всё. Печатал знаниями в блог Геннадьич. Благодарю за внимание!