tilda help center

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

Для отправки нестандартных событий, перехвата клика на странице или расширения функциональности
С помощью блока «вставка HTML кода» (T123, категория Другое) на страницу можно добавить абсолютно любой скрипт. Мы собрали примеры кода, который вы можете использовать, чтобы добавить некоторые функции.
Перехват клика по ссылке
Перейти
Перехват клика по ссылке в конкретном блоке
Перейти
Отправка события в Яндекс. Метрику
о достижении цели при клике на ссылку / кнопку
Перейти
Отправка информации в Google Analitycs
о клике на кнопку
Перейти
Отправка события в Яндекс.Метрику
об открытии попапа
Перейти
Отправка данных из формы на свой ресурс
после отправки на приемщик данных Тильды
Перейти
Выполнение своей функции
перед переходом из корзины на сайт платежной системы
Перейти
Отправка данных из формы Zero блока на свой ресурс
Перейти
Подключение стороннего сервиса
который срабатывает на кнопки/ссылки с определённым классом
Перейти
Запуск разных виджетов для мобильных и десктопных клиентов
Перейти
Как сделать меню в Zero блоке
Перейти
Запрет автоматической передачи данных о лидах
в 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 вело себя как обычное меню, то есть накладывалось на следующий блок и фиксировалось при скролле, добавьте на страницу код, заменив rec1234567 на номер вашего Zero Block
<style>
    #rec1234567 {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 9997;
    }
</style>
где #rec12345678 – номер блока, выполняющего роль меню
Запрет автоматической передачи данных о лидах в 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