Два кода отслеживания в одной ссылке

Question

Имеется код в файле JS:

    if(!err_fields){
        $(".box.last .button_controller").append(`<a onclick="ym(XXXXXXXX, 'reachGoal', 'sendbrief');" class="button button_long last">Отправить данные</a>`).find("a.last").css("cursor","pointer").click(function(){
            send_data_brif();
        });
    }

это участок, отвечающий за появления кнопки "Отправить данные" (как только посетитель заполнит все обязательные поля). Как видно в нем установлен код Yandex Metrika для отслеживания цели.

Теперь решил дополнить скриптом отслеживания от Google. Google стандартно предлагает установить код приблизительно в таком ввиде:

<button onclick="return gtag_report_conversion('http://example.com/your-link')">Отправить</button>

Проблема в том, что Google за пример показывает, клик с переходом на конверсионную страницу, в моем случае конверсионная страница одна, там где установлена форма отправки.

В итоге вопрос, насколько у меня получается валидным код, если устанавливаю вот так?

        if(!err_fields){
            $(".box.last .button_controller").append(`<a onclick="ym(XXXXXXXX, 'reachGoal', 'sendbrief');return gtag_report_conversion('http://example.com/your-link');" class="button button_long last">Отправить данные</a>`).find("a.last").css("cursor","pointer").click(function(){
                send_data_brif();
            });
        }

Answer 1

Прямое присваивание событий через атрибуты обычно очень нежелательно. Если вы вешаете события через onclick, то вы не можете повесить более одной функции. Можно попробовать так:

/*
Тут используются стрелочные функции. Аналоги:
function triggerYM() { return  ym(XXXXXXXX, 'reachGoal', 'sendbrief') };
function triggerGA() { return gtag_report_conversion('http://example.com/your-link') }
*/

const triggerYM = () => ym(XXXXXXXX, 'reachGoal', 'sendbrief');
const triggerGA = () => gtag_report_conversion('http://example.com/your-link');

/*
.bind позволяет вешать несколько действий на одно событие.
В нативном JS можно использовать .addEventListener()
*/

if(!err_fields){
    $(".box.last .button_controller")
      .append(`<a class="button button_long last">Отправить данные</a>`)
      .find("a.last")
      .css("cursor","pointer")
      .bind('click', triggerYM, false)
      .bind('click', triggerGA, false)
      .bind('click', () => send_data_brif());
}

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

БЛОГ НА HUSL

Два кода отслеживания в одной ссылке

Ответы (1 шт):