Добавление скриптов на страницу
Расширяем функциональность сайта
С помощью блока «вставка html кода» (T123, категория Другое) на страницу можно добавить абсолютно любой скрипт. Мы собрали примеры кода, который вы можете использовать, чтобы добавить некоторые функции.
Примите во внимание, что ниже приведены образцы кода, которые вам нужно будет модифицировать самостоятельно, и эти действия требуют понимания того, как работает javascript. К сожалению, мы не осуществляем поддержку по вопросам, связанных с работой вашего кода.
Перехват различных событий на странице
Перехват может понадобиться, если мы хотим отследить открытие попапа, переход по ссылке, отправки данных на сторонний сервис после успешной отправки формы, встраивание в форму своих контролов и много чего еще, на что хватает фантазии и в чем есть потребность.
Перехват клика по ссылке
<script type="text/javascript">
$(document).ready(function(){ $('a').click(function(){ /* здесь пишем нужное действие */ });
});
</script>
Перехват клика по ссылке в конкретном блоке
Перехватываем клик по ссылке в блоке с ID равным 123456
<script type="text/javascript">
$(document).ready(function(){ $('#rec123456 a').click(function(){ /* здесь пишем нужное действие */ });
});
</script>
Отправка события в Яндекс.Метрику о достижении цели при клике на ссылку / кнопку
Указанный скрипт отслеживает клик по любой ссылке/кнопке, у которой адрес совпадает с "ссылка". Если такой клик произошел, то будет отправлено событие "цель" в метрику.
<script type="text/javascript"> $("[href='ссылка']").click(function() { yaCounter123456789.reachGoal('цель'); return true; });
</script>
Отправка события в Яндекс.Метрику о достижении цели при клике на внешнюю ссылку / кнопку
Указанный скрипт отслеживает клик по любой внешней ссылке/кнопке, у которой адрес совпадает с "ссылка". Если такой клик произошел, то будет отправлено событие "цель" в метрику.
<script type="text/javascript"> $("[href='ссылка']").click(function() { var url = $(this).attr('href'); yaCounter123456789.reachGoal('цель'); if (url.indexOf('http://')!=-1) { setTimeout(function(){ window.location.href=url; },500); return false; } else { return true; } });
</script>
Пример отправки событий при клике на кнопки
Например: у нас есть две кнопки, одна ведет на блок с текстом размещенный на этой же странице, а вторая на другую страницу. У первой кнопки прописан якорь на блок #rec12345678, а у второй ссылка на внешнюю страницу http://help-ru.tilda.ws/
<script type="text/javascript">
$(document).ready(function(){ $("[href='#rec12345678']").click(function() { yaCounter1111111111.reachGoal('CLICK1'); return true; }); $("[href='http://help-ru.tilda.ws/']").click(function() { yaCounter1111111111.reachGoal('CLICK2'); return true; });
});
</script>
Отправка события в Яндекс. Метрику об открытии попапа
Отлавливаем все клики и если, ссылка на которую кликнули, указывает на "#popup:...", то отправляем в метрику событие - просмотр страницы, ведь попап это тоже страница, да и просмотр страницы легче отследить или построить составную цель (например: открытие страницы, открытие попапа, отправка формы)

Чтобы код ниже заработал, его нужно поместить в HTML-блок, который должен быть в самом верху
<script type="text/javascript">
$(document).ready(function(){ $('a').on('click', function(){ var url = $(this).attr('href'); if(url.substring(0,7)=='#popup:' && window.mainMetrika > '' && window[window.mainMetrika]) { var virtPage = window.location.pathname+'/popup/'+url.substring(7); var virtTitle = $(this).text(); window[window.mainMetrika].hit(virtPage, {title: virtTitle,referer: window.location.href}); } });
});
</script>
Отправка информации в Google Analitycs о клике на ссылку / кнопку
Скрипт отслеживает клик по любой ссылке/кнопке, в адресе которой содержится "значение в url". Если такой клик произошел, то будет отправлена информация о клике. Ниже образец кода. Значения, которые нужно заменить выделены прописными.
<script type="text/javascript">
$(document).ready(function(){ $("a").click(function(e) { var url = $(this).attr('href'); if(url.indexOf('ЗНАЧЕНИЕ В URL') != -1) { e.preventDefault(); ga('send', {'hitType':'pageview', 'page': '/click'+window.location.pathname,'title':'НАЗВАНИЕ ВИРТУАЛЬНОЙ СТРАНИЦЫ'}); setTimeout( function(){ window.location = url; }, 200 ); return false; } return true; });
});
</script>
ЗНАЧЕНИЕ В URL — здесь нужно поставить любое слово, которое есть в ссылке. Например, при клике на кнопку, посетитель попадает на страницу регистрации по адресу: http://mysite.com/registration. В этом случае вместо ЗНАЧЕНИЕ В URL укажите registration.

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

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

Чтобы отслеживать клик на кнопку, как достижение цели, создайте в Google Analitycs цель: Собственная цель > Целевая страница > Начинается с /click/
Отправка формы на свой ресурс после отправки на приемщик данных Тильды
Проходим все формы и прописываем в них название функции, которую форма сама вызовет после успешной отправки данных
<script type="text/javascript">
$(document).ready(function(){ window.mySuccessFunction= function($form){ /* $form - jquery объект ссылающийся на форму */ /* здесь нужно написать код отправки данных в нужное место, например в свой скрипт */ } $('.js-form-proccess').each(function(){ $(this).data('success-callback', 'window.mySuccessFunction'); });
});
</script>
Как подключать свои или сторонние сервисы
Сторонний сервис, который срабатывает на кнопки/ссылки с определённым классом
Например, необходимый нам сервис, при клике на кнопку должен открывать специальный диалог. Если мы просто вставим в код тег скрипт и изменим классы у нужных кнпок, то может и не сработать. Так как сторонний скрипт может начать выполняться раньше, чем классы у кнопок поменяются, поэтому мы сначала меням класс кнопок, а потом вставляем в код тег скрипт, после чего этот скрипт загрузится и начнет работать.
<script type="text/javascript">
$(document).ready(function() { /* меняем класс кнопок на нужный внешнему сервису */ $('.t-btn').addClass('superclass'); /* добавляем теги скрипт для загрузки внешнего сервиса */ var scriptService = document.createElement('script'); scriptService .src = "https://superservice.com"; scriptService .type = "text/javascript"; scriptService .charset = "UTF-8"; document.documentElement.appendChild(scriptService );
});
</script>
Как разместить что-то особенное поверх блока
Иногда возникает ситуация, когда в существующие блоки хочется добавить какую-то изюминку. Например разместить форму в нулевой блок или виджет погоды поместить на обложку. В Тильде и это возможно. Для этого используем великий блок HTML.
Размещение любого виджета поверх любого блока
Благодаря JavaScript и jQuery мы можем в любой блок вставить любой HTML-код.
<script type="text/javascript">
$(document).ready(function(){ var $html = $('HTML-код который нужно вставить в блок'); /* дополнительное позиционирование кода, который вставляем */ $html.attr('style','display: block;left: 50%;margin-left: 20%;position: absolute;top: 100px;'); /* вставка HTML-кода в блок с номером 7615999, номер блока можно посмотреть в меню Настройки / Settings у нужного блока */ $('#rec7615999').append($html);
});
</script>
Размещаем виджет-погоды поверх блока
Добавляем на страницу блок HTML.. Идем на сайт pogoda.yandex.ru, копируем оттуда код виджета и открываем [Контент] и творим магию. Этот код, вставит в блок, с указанным номером, виджет погоды, чуть правее центра блока.
<script type="text/javascript">
$(document).ready(function(){ var $html = $('<a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://pogoda.yandex.ru/213" target="_blank"><img src="//info.weather.yandex.net/213/1_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>'); $html.attr('style','display: block;left: 50%;margin-left: 20%;position: absolute;top: 100px;'); $('#rec7615999').append($html);
});
</script>
Рекуррентные платежи в Cloudpayments
Если нужно включить автопродление для рекуррентных платежей в Cloudpayments, нужно на страницу с формой добавить скрипт:
<script type="text/javascript">
/* код блока (только цифры), посмотреть можно в внизу панели "Настройка" у блока ST08 */
window.st08recid = '11111111';
$(document).ready(function(){ var interval='Month', period = '1'; $('#formpayment'+window.st08recid).data('recurrent-interval',interval).data('recurrent-period',period).data('recurrent','1');
});
</script>
Запуск разных виджетов для мобильных и десктопных клиентов.
Иногда нужно вставить громоздкий виджет для десктопа, при этом небольшой виджет для мобильного варианта. Для этого нам на помощь придет переменная window.isMobile
<script type="text/javascript">
$(document).ready(function(){ if (window.isMobile == true) { /* код для мобильных клиентов*/ } else { /* код для десктопных клиентов*/ }
});
</script>
Пример вставки смешанного виджета (где есть HTML и JS)
Основная конструкция та же самая. С нюансом. Сначала размещаем блок куда будет вставлен добавочный код (который отличается для мобильников и десктопов), а потом вставим наше условие которое и определяет какой код вставлять.

Вместо условия window.isMobile==true можно использовать размеры экрана. Например if ($(window).width()<960) { /* здесь код для мобильных */ } else { /* а здесь для нормальных экранов */ }
<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 type="text/javascript">
$(document).ready(function(){ var html = ''; if (window.isMobile == true) { /* код для мобильных клиентов*/ html = '<script type="text/javascript">'; 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 type="text/javascript">' +'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'+'>'; } $('#widgetbox').append(html);
});
</script>
Примите во внимание, что выше приведены образцы кода, которые вам нужно будет модифицировать самостоятельно, и эти действия требуют понимания того, как работает javascript. К сожалению, мы не осуществляем поддержку по вопросам, связанных с работой вашего кода.
Made on
Tilda