Примеры полезных JS-скриптов

Для отправки нестандартных событий, перехвата клика на странице или расширения функциональности
С помощью блока «вставка HTML кода» (T123, категория Другое) на страницу можно добавить абсолютно любой скрипт. Мы собрали примеры кода, который вы можете использовать, чтобы добавить некоторые функции.
о достижении цели при клике на ссылку / кнопку
о клике на кнопку
об открытии попапа
после отправки на приемщик данных Тильды
перед переходом из корзины на сайт платежной системы
который срабатывает на кнопки/ссылки с определённым классом
в Facebook Pixel
Примите во внимание, что ниже приведены образцы кода, которые вам нужно будет модифицировать самостоятельно, и эти действия требуют понимания того, как работает Javascript. К сожалению, мы не осуществляем поддержку по вопросам, связанным с работой стороннего кода.
Перехват различных событий на странице
Перехват может понадобиться, если мы хотим отследить открытие попапа, переход по ссылке, отправки данных на сторонний сервис после успешной отправки формы, встраивание в форму своих контролов и много чего еще, на что хватает фантазии и в чем есть потребность.
Перехват клика по ссылке
<script>
  if (document.readyState !== 'loading') {
    us_clickInterception();
  } else {
    document.addEventListener('DOMContentLoaded', us_clickInterception);
  }

  function us_clickInterception() {
    var links = document.querySelectorAll('a');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        /* здесь пишем нужное действие */
      });
    });
  }
</script>
Перехват клика по ссылке в конкретном блоке
Перехватываем клик по ссылке в блоке #rec123456789
<script>
  if (document.readyState !== 'loading') {
    us_clickInterceptionInBlock();
  } else {
    document.addEventListener('DOMContentLoaded', us_clickInterceptionInBlock);
  }

  function us_clickInterceptionInBlock() {
    var links = document.querySelectorAll('#rec123456789 a');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        /* здесь пишем нужное действие */
      });
    });
  }
</script>
где #rec123456789 — номер блока, в который добавится виджет с погодой;
Номер блока можно посмотреть в Настройках блока
Отправка события в Яндекс.Метрику о достижении цели при клике на ссылку/кнопку
Указанный скрипт отслеживает клик по любой ссылке/кнопке, у которой адрес совпадает с "ссылка". Если такой клик произошел, то будет отправлено событие "цель" в метрику.
<script>
  if (document.readyState !== 'loading') {
    us_sendMertics();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMertics);
  }

  function us_sendMertics() {
    var links = document.querySelectorAll('[href="любая_ссылка"]');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('произвольная_цель');
        }
      });
    });
  }
</script>
где XXXXXX — номер вашего счетчика;
Отправка события в Яндекс.Метрику о достижении цели при клике на внешнюю ссылку/кнопку
Указанный скрипт отслеживает клик по любой внешней ссылке/кнопке, у которой адрес совпадает с "ссылка". Если такой клик произошел, то будет отправлено событие "цель" в метрику.
<script>
  if (document.readyState !== 'loading') {
    us_sendMerticsByClickOnExternalLink();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMerticsByClickOnExternalLink);
  }

  function us_sendMerticsByClickOnExternalLink() {
    var links = document.querySelectorAll('[href="ваша_ссылка"]');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        var url = link.getAttribute('href');
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('цель');
        }
        if (url && url.indexOf('http://') !== -1) {
          setTimeout(function () {
            window.location.href = url;
          }, 500);
        }
      });
    });
  }
</script>
где XXXXXX — номер вашего счетчика;
Пример отправки событий при клике на кнопки
Есть две кнопки, одна ведет на блок с текстом размещенный на этой же странице, а вторая на другую страницу. У первой кнопки прописан якорь на блок #rec12345678, а у второй ссылка на внешнюю страницу http://help-ru.tilda.cc/
<script>
  if (document.readyState !== 'loading') {
    us_sendMerticsByClickOnBtn();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMerticsByClickOnBtn);
  }

  function us_sendMerticsByClickOnBtn() {
    var internalLinks = document.querySelectorAll('[href="#rec123456789"]');
    var externalLinks = document.querySelectorAll('[href="http://help-ru.tilda.ws"]');
    Array.prototype.forEach.call(internalLinks, function (link) {
      link.addEventListener('click', function () {
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('CLICK1');
        }
      });
    });
    Array.prototype.forEach.call(externalLinks, function (link) {
      link.addEventListener('click', function () {
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('CLICK2');
        }
      });
    });
  }
</script>
где yaCounterXXXXXX — номер вашего счетчика;
Отправка события в Яндекс. Метрику об открытии попапа
Отлавливаем все клики и если, ссылка на которую кликнули, указывает на "#popup:...", то отправляем в метрику событие - просмотр страницы, ведь попап это тоже страница, да и просмотр страницы легче отследить или построить составную цель (например: открытие страницы, открытие попапа, отправка формы)

Чтобы код ниже заработал, его нужно поместить в HTML-блок, который должен быть в самом верху
<script>
  if (document.readyState !== 'loading') {
    us_sendMerticsByPopup();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMerticsByPopup);
  }

  function us_sendMerticsByPopup() {
    var links = document.querySelectorAll('a');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        if (link.href && link.href.substring(0, 7) === '#popup:' && window.mainMetrika > '' &&
          window[window.mainMetrika]) {
          var virtPage = window.location.pathname + '/popup/' + link.href.substring(7);
          var virtTitle = link.textContent;
          window[window.mainMetrika].hit(virtPage, {
            title: virtTitle,
            referer: window.location.href,
          });
        }
      });
    });
  }
</script>
Отправка события в Яндекс. Метрику о добавлении товара в Корзину
Указанный скрипт отслеживает клик по кнопке добавления в Корзину. Если такой клик произошел, то будет отправлена цель "AddToCart" в метрику.
<script>
  if (document.readyState !== 'loading') {
    us_sendMerticsByCart();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMerticsByCart);
  }

  function us_sendMerticsByCart() {
    var links = document.querySelectorAll('[href^="#order"]');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('AddToCart');
        }
      });
    });
  }
</script>
где yaCounterXXXXXX — номер счетчика;
AddToCart — произвольное имя цели в Яндекс.Метрике;
Отправка информации в Google Analytics о клике на ссылку / кнопку
Скрипт отслеживает клик по любой ссылке/кнопке, в адресе которой содержится "значение в url". Если такой клик произошел, то будет отправлена информация о клике. Ниже образец кода. Значения, которые нужно заменить выделены прописными.
<script>
  if (document.readyState !== 'loading') {
    us_sendGoogleAnalytics();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendGoogleAnalytics);
  }

  function us_sendGoogleAnalytics() {
    var links = document.querySelectorAll('a');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function (e) {
        if (link.href && link.href.indexOf('ЗНАЧЕНИЕ В URL') !== -1) {
          e.preventDefault();
          ga('send', {
            'hitType': 'pageview',
            'page': '/click' + window.location.pathname,
            'title': 'НАЗВАНИЕ ВИРТУАЛЬНОЙ СТРАНИЦЫ',
          });
          setTimeout(function () {
            window.location = link.href;
          }, 200);
        }
      });
    });
  }
</script>
ЗНАЧЕНИЕ В URL — здесь нужно поставить любое слово, которое есть в ссылке. Например, при клике на кнопку, посетитель попадает на страницу регистрации по адресу: http://mysite.com/registration. В этом случае вместо ЗНАЧЕНИЕ В URL укажите registration.

НАЗВАНИЕ ВИРТУАЛЬНОЙ СТРАНИЦЫ. Информация о клике на кнопке в Google Analitycs появится в виде статистики просмотра виртуальной страницы. Страница виртуальная, поэтому здесь может быть что угодно.

ССЫЛКА — ссылка, которая стоит на кнопке. Например, http://mysite.com/registration

Чтобы отслеживать клик на кнопку, как достижение цели, создайте в Google Analitycs цель: Собственная цель → Целевая страница → Начинается с /click/
Отправка формы на свой ресурс после отправки на приемщик данных Тильды
Проходим все формы и прописываем в них название функции, которую форма сама вызовет после успешной отправки данных
<script>
function mySuccessFunction(form) {
    if (!form) return;
    if (form instanceof jQuery) {
      form = form.get(0);
    }

    /* номер заявки (Lead ID) */
    var leadId = form.tildaTranId;
    var orderId = form.tildaOrderId;

    /* все поля заявки в */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      if (input.type === 'radio') {
        if (input.checked) obj[input.name] = input.value;
     } else {
       obj[input.name] = input.value;
     }
   });
    /*
    для обращения к значению поля используйте:
    obj["Name"]
    obj["Phone"]
    obj["Email"]
    и так далее...
    */
  }

  if (document.readyState !== 'loading') {
    us_sendFormAfterSuccess();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendFormAfterSuccess);
  }

  function us_sendFormAfterSuccess() {
    var forms = document.querySelectorAll('.js-form-proccess');
    Array.prototype.forEach.call(forms, function (form) {
      form.addEventListener('tildaform:aftersuccess', function () {
        mySuccessFunction(form);
      });
    });
  }
</script>
Отправка данных из формы Zero блока на свой ресурс
<script>
  function t396_onSuccess(form) {
    if (!form) return;
    if (form instanceof jQuery) {
      form = form.get(0);
    }

    /* номер заявки (Lead ID) */
    var leadId = form.tildaTranId;
    var orderId = form.tildaOrderId;

    /* Все поля заявки */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });

    /* Отправляем данные POST-запросом */
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://yourwebhook.ru/form.php');
    xhr.send(JSON.stringify(obj));
    xhr.onload = function () {
      if (xhr.response) {
        /* Какие-то действия, если данные дошли успешно */

        /* Переадресация на страницу успеха */
        var successUrl = form.getAttribute('data-success-url');
        if (successUrl) window.location.href = successUrl;
      }
    };
  }
</script>
Выполнение своей функции перед переходом из корзины на сайт платежной системы
Если нам нужно, добавить в cookie информацию о содержимом корзины, или отправить события типа ecommerce в GA или Метрику, то используя вышеуказанный скрипт это можно сделать. Скрипт вызывается прямо перед переходом к платежной системе или вызова виджета оплаты.
<script>
  window.myAfterSendedFunction = function (form) {
    if (!form) return;
    if (form instanceof jQuery) {
      form = form.get(0);
    }

    /* номер заявки (Lead ID) */
    var leadId = form.tildaTranId;
    var orderId = form.tildaOrderId;

    /* все поля заявки */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });

    /* здесь нужно написать код отправки данных в нужное место, например в свой скрипт или добавление данных в cookie */
  };

  if (document.readyState !== 'loading') {
    us_eventFromCartToPayment();
  } else {
    document.addEventListener('DOMContentLoaded', us_eventFromCartToPayment);
  }

  function us_eventFromCartToPayment() {
    var forms = document.querySelectorAll('.js-form-proccess');
    Array.prototype.forEach.call(forms, function (form) {
      form.addEventListener('tildaform:aftersuccess', function () {
        window.myAfterSendedFunction(form);
      });
    });
  }
</script>
Сторонний сервис, который срабатывает на кнопки/ссылки с определённым классом
Например, если необходимый сервис при клике на кнопку открывает специальный диалог, то важно соблюдать порядок работы со скриптом сервиса. Чтобы избежать проблем, сначала происходит добавление классов для кнопок, а потом вставка скрипта:
<script>
  if (document.readyState !== 'loading') {
    us_customDOMChanges();
  } else {
    document.addEventListener('DOMContentLoaded', us_customDOMChanges);
  }

  function us_customDOMChanges() {
    var buttons = document.querySelectorAll('.t-btn');
    Array.prototype.forEach.call(buttons, function (button) {
      /* добавляем свой класс к кнопкам */
      button.classList.add('superclass');
    });

    /* добавляем скрипт для загрузки сервиса */
    var service = document.createElement('script');
    service.src = 'https://superservice.com/script.js';
    service.type = 'text/javascript';
    service.charset = 'UTF-8';
    document.documentElement.appendChild(service);
  }
</script>
Запуск разных виджетов для мобильных и десктопных клиентов
Иногда нужно вставить громоздкий виджет для десктопа, при этом небольшой виджет для мобильного варианта. Для этого нам на помощь придет переменная window.isMobile
<script>
  if (document.readyState !== 'loading') {
    us_initAdaptiveWidget();
  } else {
    document.addEventListener('DOMContentLoaded', us_initAdaptiveWidget);
  }

  function us_initAdaptiveWidget() {
    if (window.isMobile == true) {
      /* код для мобильных клиентов*/
    } else {
      /* код для десктопных клиентов*/
    }
  }
</script>
Пример вставки смешанного виджета
Вместо условия window.isMobile можно использовать размеры экрана, например, window.innerWidth < 960
<div id="widgetbox" style="text-align: center;">
    <div class="left" id="_bn_widget_"><a href="http://bnovo.ru/" id="_bnovo_link_" target="_blank">Bnovo</a></div>
    <script type="text/javascript" src="http://widget.bnovo.ru/v2/js/bnovo.js"></script>
</div>

<script>
  if (document.readyState !== 'loading') {
    us_appendMixedWidget();
  } else {
    document.addEventListener('DOMContentLoaded', us_appendMixedWidget);
  }

  function us_appendMixedWidget() {
    var html = '';
    if (window.isMobile == true) {
      /* код для мобильных клиентов*/
      html = '<script>';
      html += 'Bnovo_Widget.init(function(){Bnovo_Widget.open("_bn_widget_", {type: "vertical",lcode: "1234567890",lang: "ru",width: "230",background: "#ffda4a",bg_alpha: "100",padding: "18",font_type: "arial",font_color: "#222222",font_size: "16",title_color: "#222222",title_size: "18",inp_color: "#222222",inp_bordhover: "#3796e5",inp_bordcolor: "#cccccc",inp_alpha: "100",btn_background: "#f8f8f8",btn_background_over: "#ffffff",btn_textcolor: "#222222",btn_textover: "#222222",btn_bordcolor: "#cccccc",btn_bordhover: "#cccccc"});});';
      html += '</script' + '>';
    } else {
      /* код для десктопных клиентов */
      html = '<script>' +
        'Bnovo_Widget.init(function(){Bnovo_Widget.open("_bn_widget_", {type: "horizontal",lcode: "1234567890",lang: "ru",width: "960",background: "#ffda4a",bg_alpha: "100",padding: "20",font_type: "arial",font_color: "#222222",font_size: "16",title_color: "#222222",title_size: "18",inp_color: "#222222",inp_bordhover: "#3796e5",inp_bordcolor: "#cccccc",inp_alpha: "100",btn_background: "#f8f8f8",btn_background_over: "#ffffff",btn_textcolor: "#222222",btn_textover: "#222222",btn_bordcolor: "#cccccc",btn_bordhover: "#cccccc"});});' +
        '</script' + '>';
    }
    var widgetBox = document.querySelector('#widgetbox');
    if (widgetBox) widgetBox.insertAdjacentHTML('beforeend', html);
  }
</script>
Как сделать меню в Zero блоке
Данная опция теперь встроена в редактор Zero Block. Чтобы включить фиксирование блока, перейдите в настройки артборда → Position and Overflow и поставьте значение Fixed. Подробнее о настройках фиксации →
Запрет автоматической передачи данных о лидах в Facebook Pixel
Если установить Facebook Pixel, то на странице появится объект fbq, который при отправке формы в Facebook отправляет событие Lead. Если требуется собственная настройка пикселя Facebook, запретить это поведение можно с помощью кода:
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var allRec = document.getElementById('allrecords');
            if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
        });
  </script>
Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.
Примите во внимание, что выше приведены образцы кода, которые вам нужно будет модифицировать самостоятельно, и эти действия требуют понимания того, как работает Javascript. К сожалению, мы не осуществляем поддержку по вопросам, связанным с работой стороннего кода.
Made on
Tilda