Как настроить цель Google Analytics на отправку Contact Form 7 в WP?

Question

[Oleg Rudzhev]

Доброго времени суток.

Помогите, пожалуйста, кто сталкивался с такой задачей: на сайте superpila.com.ua необходимо, чтобы после отправки формы "Оставить заказ" (на этой странице товара например) и второй формы "Задать вопрос специалисту" (на той же странице, но она находится в шапке сайта) передавались параметры - gtag('event', 'ostavitzakaz', {'event_category': 'formajax'}); и gtag('event', 'specvopros', {'event_category': 'formajax1'}); соответственно.

Но пробежался по файлам php, не нашел ни сабмита этих форм или я их просто не вижу.

Подскажите место куда нужно вставить эти данные, чтобы после submit этих форм они передавались в Google Analytics (и подсчитались как заказ и отправка формы).

P.S. вроде нашел как это делать в этой статье, но в ней не указано КУДА вставлять скрипт из их примера (в functions.php или в настройки самого плагина Contact Form 7):

<script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        gtag('event','submit', {'event_category' : 'Form'});
    }, false );
</script>

Answer 1

[Денис Янчевский]

Доброго.

но в ней не указано КУДА вставлять скрипт из их примера (в functions.php или в настройки самого плагина Contact Form 7):

В настройки вставлять не нужно. Можно в functions.php(например, с помощью хука wp_footer), можно в js-файл, можно в какой-то плагин для сниппетов.

Также, если нужна отправка с какой-то конкретной формы, то нужно проверять её ID.

document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '59' == event.detail.contactFormId ) {
        gtag('event','submit', {'event_category' : 'Form'});
    }
}, false );

Документация

Comments

[Oleg Rudzhev]

Денис Янчевский, т.е. в любом месте этого файла вставить этот скрипт, без тегов ? Так как я пытался вставлять данный скрипт в functions.php и файл не сохранялся, отображалось сообщение про неверный синтаксис.

Я еще нашел скрипт для нескольких форм (я его немного подкорректирую для гугл аналитики убрав "yacounter"):

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function sendMail( event ) {
  if ( '28269' == event.detail.contactFormId ){
   gtag('event', 'send', {'event_category': 'formapopup', 'event_action': 'Submit'});
   yaCounterXXXXXXXX.reachGoal('formapopup');}
  if ( '28270' == event.detail.contactFormId ){
   gtag('event', 'send', {'event_category': 'zakaz', 'event_action': 'Submit'});
   yaCounterXXXXXXXX.reachGoal('zakaz');}
  if ( '28271' == event.detail.contactFormId ){
  gtag('event', 'send', {'event_category': 'zayva', 'event_action': 'Submit'});
  yaCounterXXXXXXXX.reachGoal('zayva');}}, false );
</script>

Только получается нужно вставить его без строчек
"<script type="text/javascript">"

и

"</script>"?

[Денис Янчевский]

Oleg Rudzhev, в functions.php нужно вставлять с помощью php функций.
Пример (найдите на странице "Способ 2. Выводим скрипты непосредственно через HTML-тег")

Можете вставить в header.php между тегами head. Туда можно вставить "как есть".

Я лично использую плагин и вставляю всякие счетчики и аналитики через него, чтобы постоянно не лазить в код. Туда тоже можно вставить Ваш код, как он есть сейчас.

[Oleg Rudzhev]

Денис Янчевский, понял, спасибо большое, сейчас буду тестить.

[Oleg Rudzhev]

Денис Янчевский, поставил этот плагин, вставил в хэд почему-то не сработало :(
Может быть из-за того, что в хэде есть код GTM, а не конкретно Google Analytics?

вставил в таком виде (и с 2-мя формами пробовал) - не срабатывает в аналитике:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function sendMail( event ) {
  if ( '4' == event.detail.contactFormId ){
   gtag('event', 'send', {'event_category': 'formajax1', 'event_action': 'specvopros'});
}, false );
</script>

[Денис Янчевский]

Oleg Rudzhev,
1. Дайте адрес страницы, где вставляли.
2. Покажите код файла header.php (можно вставить на https://pastebin.com/ и прислать ссылку)

[Oleg Rudzhev]

Денис Янчевский,
1) superpila.com.ua/katalog/nozhi-i-reshetki-dlya-mya... (тестил форму в шапке и на товаре)
2) https://pastebin.com/UvE3Ueis

но проблема в том, что форма на товар не работает вообще - id товара не передается. Я почитал статьи по этому поводу, но там написано "осталось найти ошибку и исправить лишние куски кода". Класс :)

В шапке форма работает, но счетчик в аналитике по конверсиям все равно ничего не показал.

Этот сайт мне зашел на контекстную рекламу и я не проверил форму до правок.
Также попробовал удалить этот плагин для добавления скриптов, который вы советовали - форма все равно не работает. Я так понял она была сломана до меня.

Я его вернул, проверил плагином для google chrome - Google Tag Assistant - валидацию аналитики, все норм.

[Oleg Rudzhev]

Денис Янчевский, это вы сейчас форму отправляете? А то похоже какой-то спам пошел :)

[Денис Янчевский]

Oleg Rudzhev, ничего не отправлял.

Код в страницу вставился

В шапке форма работает, но счетчик в аналитике по конверсиям все равно ничего не показал.

Насколько я помню появляется не сразу и надо вроде смотреть "Отчет в реальном времени" или как-то так.

Я так понял она была сломана до меня.

Ну если резервных копий не делали и правите сразу на рабочем сайте, то, видимо, только обращаться в ТП хостинга. Мб у них есть копии.

Можете ещё попробовать отключить плагин autoptimize. Периодически встречаю жалобы на него.

[Oleg Rudzhev]

Денис Янчевский, интересно пришли 2-а сообщения, только что, вида:

Имя: Normanbuild
Емейл: [e-mail]
Вопрос: Светодиодное освещение «под ключ» по всей Украине с гарантией.
Сделано на лучших заводах Китая для внутреннего и европейского рынков.
Без подделок.
http://dll.in.ua/

и

Имя: MarloNup
Емейл: [e-mail]
Вопрос: We strive to provide fast turnaround and reliable service to all of our customers.  ARI PartnerConnectВ® is designed to save you time and money by providing a 
<a href=http://howtosavemoneyfast.cf/course-forms-detail-north-carolina-how-to-save-up-money-fast-as-a-teenager>how to save money fast</a>

Интересно...

+ на счет реального времени я знаю, но почему не срабатывает не понимаю.

p.s. те файлы, которые я затрагивал - header.php, functions.php до правок скопировал и залил обратно на FTP, но все равно не работает.

[Денис Янчевский]

Oleg Rudzhev,

интересно пришли 2-а сообщения, только что, вида:

Похоже на обычный спам, коего кучи в интернетах)

+ на счет реального времени я знаю, но почему не срабатывает не понимаю.

Ну тут, увы, не подскажу. Возможно, в теге Google Analytics что-то подскажут.

[Oleg Rudzhev]

Денис Янчевский, я попробую удалить тег google tag и добавить обычный gtag от Google Analytics - возможно поможет. Спасибо за помощь.

p.s. если решу этот вопрос обязательно сделаю ваш коммент решением - не забуду! :)

[Oleg Rudzhev]

Денис Янчевский, нашел решение - ВСЕ РАБОТАЕТ! НАКОНЕЦ-ТО! Камень с души :)

Нужно было вписать в functions.php следующее:

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '4' == event.detail.contactFormId ) {
        gtag('event', 'specvopros', {'event_category': 'formajax1'});
    if ( '59' == event.detail.contactFormId ) {
        gtag('event', 'ostavitzakaz', {'event_category': 'formajax'});
        }
    }
}, false );
</script>
<?php
}

т.е. я просто не правильно обращался в этом файле...

И конечно удалил из файла header.php код Google Tag Manager и заменил его на обычный от Google Аналитики (ибо с GTM не срабатывала цель)

P.S. Денис Янчевский, спасибо, что пытались помочь и направили вектор мыслей в верном направлении!