Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Отправка цели в Яндекс Метрику из Формы (https://javascript.ru/forum/misc/80135-otpravka-celi-v-yandeks-metriku-iz-formy.html)

alshanskiy 30.04.2020 17:10

Отправка цели в Яндекс Метрику из Формы
 
Здравствуйте.
На многих моих сайтах сделанных мной, стоят "формы". Они передают данные в телеграм, а так же отправляют копии на почты.
Сама форма и весь код практически взят из урока "Библиотека PHPMailer. Отправка писем средствами AJAX". Я ее немного преобразовал под себя, встроил в опенкарт. Чуть чуть дописал Яваскрипт методами "ОК ГУГЛ". Работает она прекрасно, как мне и требуется. Проверки на заполнения, что бы пробелы не отправлялись, все было хорошо, пока не пришел СЕОшник.
Он сказал, что надо на все настроить цели. Хоп. Мы настроили цели, как по справке яндекса.
Через месяц работы мы выяснили, что:
Целей по форме было 100 штук. А писем пришло только 65 (условные данные.)
И тут я понял, что это происходит из-за нажатия отправки по кнопки SUBMIT
Но ява скрипт при нажатии проверяет корректность формы, и может ее не отправить если не заполнены поля.
Иногда пользователь два - три раза нажимает submit перед тем как форма отправиться.
Я Сам не знаю яваскрипт, не мешало бы мне его выучить, но вопрос такой.
Как правильно вставить момент отправки цели, после всех удачных событий.
Код прилагаю.

<form action="" method="post" id="zakaz-seychas">
    <input type="text" name="myname"    id="myname"     placeholder="Имя *">
    <span></span>
    <input type="text" name="myphone"   id="myphone"    placeholder="Телефон *">
    <span></span>
    <input type="text" name="mymail"    id="mymail"     placeholder="E-mail">
    <span></span>
    <input type="text" name="mycomment" id="mycomment"  placeholder="Сообщение">
    <span></span>
    <button type="submit" name="submit" id="submit" value="ЗАКАЗАТЬ СЕЙЧАС">ЗАКАЗАТЬ СЕЙЧАС</button>
    <span></span>
</form>


<script>
     $(function(){
           $('#zakaz-seychas').submit(function(){
           $('#zakaz-seychas').find('input, textarea').removeClass("danger"); // удаляю класс *обязательно к заполнению
           $('#zakaz-seychas').find('input, textarea').removeClass("succses"); // удаляю класс *успешно заполненно                                   
           var errors = false;
           $(this).find('span').empty(); // очищаем спаны
           $(this).find('input, textarea').not(':input#mymail').each(function(){
                if( $.trim( $(this).val() ) == '' ) {
                     errors = true;
                     $(this).addClass("danger"); // ставим класс *обязательно к заполнению
                }
                else{
                     $(this).addClass("succses"); // ставим класс *успешно заполненно   
                }
           });
             if( !errors ){
                 var data = $('#zakaz-seychas').serialize();
                 $.ajax({
                    url: 'catalog/view/theme/zebra/template/phpmailer/sendform2.php', // могу и этот файл отправить
                    type: 'POST',
                    data: data,
                    beforeSend: function(){
                     	 $('#zakazing').modal('hide') // скрываю модалку с формой
                         $('#sending').modal('show') // запускаю модалку с отправкой формы и прогрессбаром 
                    },
                    success: function(res){
                        if( res == 1 ){
                            $('#zakaz-seychas').find('input, textarea').removeClass("danger");
                            // удаляю класс *обязательно к заполнению
                            $('#zakaz-seychas').find('input, textarea').addClass("succses");
                            // удаляю класс *успешно заполненно 
                            $('#zakaz-seychas').find('input:not(#submit), textarea').val('');
                            // очищаем значения полей при успешной отправки
                            $('#submit').next().empty();
                            // очищаем поясняняющий спан "отправляю"
                            $('#sending').modal('hide'); 
                            // прячу модалку "отправка формы и прогрессбаром"

                            //////////////////////////////////////////////////
                            // ВОТ В ЭТО МЕСТО НУЖНО ВСТАВИТЬ ОТПРАВКУ ЦЕЛИ//
                            //////////////////////////////////////////////////

                            alert('Письмо успешно отправлено');
                            // алерт об успехе
                            $('#zakaz-seychas').find('input, textarea').removeClass("succses"); 
                            // удаляю класс *успешно заполненно     
                        }else{
                            $('#submit').next().empty();
                            alert('Ошибка 1049');
                        }
                    },
                    error: function(){
                        alert('Ошибка 1059!');
                    }
                });
            }
            return false;
         });
     });
</script>


Второй вариант установки кода цели в форму согласно яндекс.справки
<form action="">
    <input type="button" onclick="ym(XXXXXX, 'reachGoal', 'TARGET_NAME'); return true;" value="Заказать" />
</form>

Второй вариант установки кода цели в форму согласно яндекс.справки
<form action="" method="get" onsubmit="ym(XXXXXX, 'reachGoal', 'TARGET_NAME'); return true;">
</form>


в обоих случаях, при многократном нажатии инпута и удачной отправки формы на почту и в ТГ отправляется много целей, вместо одной.

Пожалуйста помогите.

Malleys 30.04.2020 18:02

alshanskiy, у вас используется типа такой код для метрики — ym(XXXXXX, 'reachGoal', 'TARGET_NAME');

Так вставьте его туда, где у вас написано ВОТ В ЭТО МЕСТО НУЖНО ВСТАВИТЬ ОТПРАВКУ ЦЕЛИ (строка №43)

alshanskiy 30.04.2020 18:19

Цитата:

Сообщение от Malleys (Сообщение 523659)
alshanskiy, у вас используется типа такой код для метрики — ym(XXXXXX, 'reachGoal', 'TARGET_NAME');

Так вставьте его туда, где у вас написано ВОТ В ЭТО МЕСТО НУЖНО ВСТАВИТЬ ОТПРАВКУ ЦЕЛИ (строка №43)

я попробывал так сделать. Тогда просиходит следующее.
Письмо уходит, в телеграм сообщение падает, а на этой строчки скрипт прерывается. Алерт тоже не выходит. Браузер показывает предупреждение, что ym это не функция.

Malleys 30.04.2020 18:39

Цитата:

Сообщение от alshanskiy
что ym это не функция.

У вас должен быть подключен к странице код счётчика, в котором определена та самая функция ym

Код счётчика выглядит так..
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(XXXXXX, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->


Свой код с правильным ключом вы можете найти у себя на странице в Яндекс метрике — https://metrika.yandex.ru/list/

alshanskiy 30.04.2020 19:05

Код установлен. Так как до этого цель приходила. Мы просто ее перенсли их тега <form> в 43 строчку как вы и сказали.

Если я переношу так, как вы написали:

success: function(res){
                                                 if( res == 1 ){
                                                     $('#zakaz-seychas').find('input, textarea').removeClass("danger");
                                                     $('#zakaz-seychas').find('input, textarea').addClass("succses");
                                                     $('#zakaz-seychas').find('input:not(#submit), textarea').val('');
                                                     $('#submit').next().empty();
                                                     $('#sending').modal('hide');
                                                     ym(XXXXXXXX, 'reachGoal', 'zakaz_top');
                                                     alert('Письмо успешно отправлено');
                                                     $('#zakaz-seychas').find('input, textarea').removeClass("succses"); 
                                                 }else{
                                                     $('#submit').next().empty();
                                                     alert('Ошибка 1049');
                                                 }
                                             },


То тогда форма отпраляется, алерт выходит, но цель не доходит.
А если я ставлю строчку полностью:

success: function(res){
                                                 if( res == 1 ){
                                                     $('#zakaz-seychas').find('input, textarea').removeClass("danger");
                                                     $('#zakaz-seychas').find('input, textarea').addClass("succses");
                                                     $('#zakaz-seychas').find('input:not(#submit), textarea').val('');
                                                     $('#submit').next().empty();
                                                     $('#sending').modal('hide');
                                                     ym(XXXXXXXX, 'reachGoal', 'zakaz_top') return true;
                                                     alert('Письмо успешно отправлено');
                                                     $('#zakaz-seychas').find('input, textarea').removeClass("succses"); 
                                                 }else{
                                                     $('#submit').next().empty();
                                                     alert('Ошибка 1049');
                                                 }
                                             },


то браузер выдает такую ошибку:

Код:

SyntaxError: unexpected token: keyword 'return'
где то ошибка в синтаксисе.

laimas 30.04.2020 19:33

https://yandex.ru/support/metrica/code/ajax-flash.html

Malleys 30.04.2020 19:42

Цитата:

Сообщение от alshanskiy
Если я переношу так, как вы написали:

Примерная задержка по передачи данных составляет 15-20 минут. Иногда до 60 минут. Когда вы перейдете в отчет Конверсии, то увидите, что данные по цели передались.

Цитата:

Сообщение от alshanskiy
SyntaxError: unexpected token: keyword 'return'

Так не правильно. Первый вариант в вашем сообщении выше правильный.

Цитата:

Сообщение от laimas
https://yandex.ru/support/metrica/code/ajax-flash.html

Автор не делает сайт в Macromedia Flash, swf. Это широко распространённая практика?

И тем более код для цели указан при создании цели...



Я проверил, достигнутая цель отображается в метрике примерно через полчаса!

laimas 30.04.2020 20:48

Цитата:

Сообщение от Malleys
Автор не делает сайт в Macromedia Flash, swf. Это широко распространённая практика?

Что в придурка играть будем или знаний не хватает прочесть все, кроме Flash?

Malleys 01.05.2020 19:30

laimas, комментарий не читай, одно слово вылавливай.


Часовой пояс GMT +3, время: 10:26.