За последние 24 часа нас посетили 22763 программиста и 1085 роботов. Сейчас ищут 495 программистов ...

Добавка пикселя фейсбук в скрипт

Тема в разделе "JavaScript и AJAX", создана пользователем Evg82, 6 май 2017.

Метки:
  1. Evg82

    Evg82 Активный пользователь

    С нами с:
    5 авг 2015
    Сообщения:
    18
    Симпатии:
    0
    Доброго времени! Есть скрипт через который генерируется форма с кнопкой заказа
    Весь код по ссылке http://antistress.kupitovar24.ru/forma.js
    // генерация формы
    function generate_form() {
    // номер формы
    var dropshippingApiFormNumber = $("#dropshipping-api-form-body").attr('number');
    // номер поьльзователя
    var dropshippingApiFormOwner = $("#dropshipping-api-form-body").attr('user');

    var data = 'form='+dropshippingApiFormNumber+'&user='+dropshippingApiFormOwner;

    $.ajax({
    url: 'http://rusdropshipping.ru/api/api-form.php?action=download_form',
    type: 'POST',
    data: data,
    success: function(response) {
    var result = jQuery.parseJSON(response);
    if(result.status == 'success') {

    $("#dropshipping-api-form-body").html(result.html);
    jQuery(function($) { // Установка маски для поля ввода номера телефона
    $('.api-form-phone').mask('71111111111');
    });
    }
    }
    });
    }

    generate_form();

    // функция оформления заказа
    function formApiAddNewOrder(form_id) {
    var items = $("#api-form-items-form-"+form_id).serialize(); // заказанные товары
    var name = $("#api-form-name-"+form_id).val(); // имя
    var phone = $("#api-form-phone-"+form_id).val(); // телефон
    var comment = $("#api-form-comment-"+form_id).val();
    var data = 'form_id='+form_id+'&name='+name+'&phone='+phone+'&comment='+comment+'&'+items;

    $.ajax({
    url: 'http://rusdropshipping.ru/api/api-form.php?action=add_new_order',
    type: 'POST',
    data: data,
    success: function(response) {
    var result = jQuery.parseJSON(response);
    // удаляем все отметки об ошибках
    $(".my-error-class").html('');
    if(result.status == 'success') {
    $("#api-form-body-block-"+form_id).html('<div id="generating-result-alert" class="alert alert-success"><h4>'+result.message+'</h4></div>');
    }
    else if(result.status == 'error') {
    $(result.errors).each(function(key, value){
    $("#api-form-"+value.type+"-error-"+form_id).html(value.text);
    });
    }
    else if(result.status == 'failed') {
    $("#api-form-message-block-"+form_id).html('<div id="generating-result-alert" class="alert alert-danger">'+result.message+'</div>')
    setTimeout(function(){
    $("#generating-result-alert").remove();
    }, 1000);
    }
    }
    });
    }



    Форма выглядит примерно так

    [​IMG]
    Нужно на кнопку посадить этот пиксель

    Код (Javascript):
    1. <script>
    2. fbq('track', 'AddToCart', {
    3. value: 3.50,
    4. currency: 'USD'
    5. });
    6. </script>
    Умные головы подскажите как это сделать?
     
  2. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    вот в эту часть добавить

    Код (Javascript):
    1. if(result.status == 'success') {
    2.  
    3. $("#api-form-body-block-"+form_id).html('<div id="generating-result-alert" class="alert alert-success"><h4>'+result.message+'</h4></div>');
    4. }
    что бы получилось
    Код (Javascript):
    1. if(result.status == 'success') {
    2. fbq('track', 'AddToCart', {value: 3.50,currency: 'USD'});
    3. $("#api-form-body-block-"+form_id).html('<div id="generating-result-alert" class="alert alert-success"><h4>'+result.message+'</h4></div>');
    4. }
     
    Evg82 нравится это.
  3. Evg82

    Evg82 Активный пользователь

    С нами с:
    5 авг 2015
    Сообщения:
    18
    Симпатии:
    0
    то есть по нажатию кнопки оформить данные будут передаваться в фейсбук?
     
  4. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    нет, данные будут передаваться после того, как оформление пройдет удачно и вернется success, иначе при каждом нажатии будут передаваться данные, а если человек неверно заполнил форму и заказ не оформился - ему придется нажимать снова и снова будут отправляться те же данные
     
    Evg82 нравится это.
  5. Evg82

    Evg82 Активный пользователь

    С нами с:
    5 авг 2015
    Сообщения:
    18
    Симпатии:
    0
  6. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    в принципе верно, но данный скрипт подойдет только для одной формы с конкретной ценой.
    вам нужна более универсальная формула в которую будет передаваться цена из текущей формы заказа

    т.е. вот на цену вешаем Id
    <td id="api-form-price-856" class="vertical-align-middle">1980</td>

    далее в функции используем
    Код (Javascript):
    1. function formApiAddNewOrder(form_id) {
    2.     var items = $("#api-form-items-form-"+form_id).serialize(); // заказанные товары
    3.     var name = $("#api-form-name-"+form_id).val();  // имя
    4.     var phone = $("#api-form-phone-"+form_id).val();    // телефон
    5.     var comment = $("#api-form-comment-"+form_id).val();
    6.     var data = 'form_id='+form_id+'&name='+name+'&phone='+phone+'&comment='+comment+'&'+items;
    7.  
    8.   var price = $("#api-form-phone-"+form_id).val();    // цена
    Код (Javascript):
    1.             if(result.status == 'success') {
    2.             fbq('track', 'AddToCart', {value: price,currency: 'USD'}); // добавлени в карзину
    3.             fbq('track', 'Purchase', {value: price,currency: 'USD'});// покупка. нажали кнопку и офрмили заказ
    4.                 $("#api-form-body-block-"+form_id).html('<div id="generating-result-alert" class="alert alert-success"><h4>'+result.message+'</h4></div>');      
    5.             }
    если нужно в другой валюте - конвертируйте здесь же
     
    Evg82 нравится это.
  7. Evg82

    Evg82 Активный пользователь

    С нами с:
    5 авг 2015
    Сообщения:
    18
    Симпатии:
    0

    Вроде все правильно первый раз сделал. Но форма не отправляется по нажатию кнопки. Использовать лучше второй вариант?
     
  8. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    в консоль смотрите у вас там
    Код (Text):
    1. Uncaught ReferenceError: fbq is not defined
    т.е. пиксель не подключен и fbq не инициализировано
     
    Evg82 нравится это.
  9. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.410
    Симпатии:
    1.768
    в try...catch надо обернуть, чтобы отправлялась даже если пиксель отвалится.
     
  10. Evg82

    Evg82 Активный пользователь

    С нами с:
    5 авг 2015
    Сообщения:
    18
    Симпатии:
    0
    использовал ваш второй вариант и ничего не получилось
    <script src="http://kulon.kupitovar24.ru/forma2.js"></script>
    Вообще ни чего не загрузилось
    --- Добавлено ---
    а как это сделать?
    --- Добавлено ---
    Пиксель фейсбук работает, но возможно данные еще не обновились....
    Пожалуйста, посмотрите http://kulon.kupitovar24.ru/forma2.js все ли верно? лишних пробелов нет?
    --- Добавлено ---
    http://prntscr.com/f4pq7n ну у меня так в консоле
     
  11. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    ну там же ясно указывает на 282 строку в которой проблема
     
    Evg82 нравится это.
  12. Evg82

    Evg82 Активный пользователь

    С нами с:
    5 авг 2015
    Сообщения:
    18
    Симпатии:
    0
    Это вот из за этого
    т.е. вот на цену вешаем Id
    <td id="api-form-price-856" class="vertical-align-middle">1980</td>

    В форме http://kulon.kupitovar24.ru/forma2.js
    Форма и не грузится

    Эту запись
    <td id="api-form-price-856" class="vertical-align-middle">1980</td>

    куда надо прописать?

    У меня так

    http://prntscr.com/f4pzwy

    Однако первый вариант без цены форму отображает но не инициилизирует пиксель
    При этом по нажатию кнопки заказ фиксируется, но не появляется сообщение о том что форма успешно отправлено и что менеджеры свяжутся. Просто кликаю по кнопке. событие срабатывает, заказ в систему передается и все.

    Получается любое вмешательство в код чревато его нестабильной работой? Или что то нужно поправить еще?
     
  13. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    ууу. похоже вам в раздел Сделайте за меня, раз вам каждый шаг разжевывать нужно.
     
    Evg82 нравится это.
  14. Evg82

    Evg82 Активный пользователь

    С нами с:
    5 авг 2015
    Сообщения:
    18
    Симпатии:
    0
    Я правильно понимаю если эти строчки кода
    Код (Javascript):
    1. fbq('track', 'Purchase', {value: 50.00,currency: 'USD'});    // покупка. нажали кнопку и офрмили заказ
    2.             fbq('track', 'AddToCart', {value: 3.50,currency: 'USD'});    // Добавили в карзину
    здесь

    Код (Javascript):
    1. if(result.status == 'success') {
    2.             fbq('track', 'Purchase', {value: 50.00,currency: 'USD'});    // покупка. нажали кнопку и офрмили заказ
    3.             fbq('track', 'AddToCart', {value: 3.50,currency: 'USD'});    // Добавили в карзину
    4.             $("#api-form-body-block-"+form_id).html('<div id="generating-result-alert" class="alert alert-success"><h4>'+result.message+'</h4></div>');      
    5.             }
    не инициализируется то есть не выполняется, то success и не выполняется то есть не срабатывает эта строчка кода ?
    Код (Javascript):
    1. $("#api-form-body-block-"+form_id).html('<div id="generating-result-alert" class="alert alert-success"><h4>'+result.message+'</h4></div>');
    --- Добавлено ---
    Почти так. С простыми кодами работал, когда сам что то писал или копировал. в этом же случае скрипт создан был не мной. Я пытаюсь внедрить в него пиксель. Первый ваш вариант понятен и форма грузится и заказ в систему попадает. Это и нужно было
    а вот второй вариант вашего кода меня запутал. Поэтому если сложно растолковать то и не надо. Спасибо за помощь!
    --- Добавлено ---
    Базовый код пикселя не сохранился. Теперь все работает в первом варианте кода.
     
  15. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    вот это
    HTML:
    1. <td id="api-form-price-856" class="vertical-align-middle">1980</td>
    нужно в html в форму добавить
    сейчас у вас
    HTML:
    1. <td class="vertical-align-middle">1980</td>
    т.е. по аналогии того, как передаются у вас данные имени и телефона через id="api-form-name-856" и id="api-form-phone-856"
    Определяются в скрипте они же вот так

    1. Код (Javascript):
      1.     var name = $("#api-form-name-"+form_id).val();  // имя
      2.     var phone = $("#api-form-phone-"+form_id).val();    // телефон
     
  16. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.410
    Симпатии:
    1.768
    заменить все вызовы fbq() на свою функцию, внутри которой будет так:
    Код (Javascript):
    1. function myfbq(параметры) {
    2.   try {
    3.     fbq(параметры);
    4.   } catch (e) {
    5.   }
    6.   return true;
    7. }