Добавление скриптов на страницу

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

    $("[href='http://help-ru.tilda.ws/']").click(function () {
        yaCounterXXXXXX.reachGoal('CLICK2');
    });
});
</script>
где XXXXXX — номер вашего счетчика;
Отправка события в Яндекс. Метрику об открытии попапа
Отлавливаем все клики и если, ссылка на которую кликнули, указывает на "#popup:...", то отправляем в метрику событие - просмотр страницы, ведь попап это тоже страница, да и просмотр страницы легче отследить или построить составную цель (например: открытие страницы, открытие попапа, отправка формы)

Чтобы код ниже заработал, его нужно поместить в HTML-блок, который должен быть в самом верху
<script>
$(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>
Отправка события в Яндекс. Метрику о добавлении товара в Корзину
Указанный скрипт отслеживает клик по кнопке добавления в Корзину. Если такой клик произошел, то будет отправлена цель "AddToCart" в метрику.
<script>
$(document).ready(function () {
    $("[href^='#order']").click(function () {
        yaCounterXXXXXX.reachGoal("AddToCart");
    });
});
</script>
где XXXXXX — номер счетчика;
AddToCart — произвольное имя цели в Яндекс.Метрике;
Отправка информации в Google Analitycs о клике на ссылку / кнопку
Скрипт отслеживает клик по любой ссылке/кнопке, в адресе которой содержится "значение в url". Если такой клик произошел, то будет отправлена информация о клике. Ниже образец кода. Значения, которые нужно заменить выделены прописными.
<script>
$(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
            );
        }
    });
});
</script>
ЗНАЧЕНИЕ В URL — здесь нужно поставить любое слово, которое есть в ссылке. Например, при клике на кнопку, посетитель попадает на страницу регистрации по адресу: http://mysite.com/registration. В этом случае вместо ЗНАЧЕНИЕ В URL укажите registration.

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

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

Чтобы отслеживать клик на кнопку, как достижение цели, создайте в Google Analitycs цель: Собственная цель → Целевая страница → Начинается с /click/
Отправка формы на свой ресурс после отправки на приемщик данных Тильды
Проходим все формы и прописываем в них название функции, которую форма сама вызовет после успешной отправки данных
<script>
$(document).ready(function () {
    window.mySuccessFunction = function ($form) {
        /* $form - jQuery объект ссылающийся на форму */

        /* номер заявки (Lead ID) */
        var formresult = $form.data('tildaformresult');
        var leadid = formresult.tranid;

        /* все поля заявки в */
        var arr = {};
        $($form.serializeArray()).each(function(i, el) {
            arr[el.name] = el.value;
        });

        /*
          для обращения к значению поля используйте:
          arr["Name"]
          arr["Phone"]
          arr["Email"]
          и так далее...
        */

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

    }

    $('.js-form-proccess').each(function () {
        $(this).data('success-callback', 'window.mySuccessFunction');
    });
});
</script>
Выполнение своей функции перед переходом из корзины на сайт платежной системы
Если нам нужно, добавить в cookie информацию о содержимом корзины, или отправить события типа ecommerce в GA или Метрику, то используя вышеуказанный скрипт это можно сделать. Скрипт вызывается прямо перед переходом к платежной системе или вызова виджета оплаты.
<script>
$(document).ready(function () {
    window.myAfterSendedFunction = function ($form) {
        /* $form - jquery объект ссылающийся на форму */

        /* номер заявки (Lead ID) */
        var formresult = $form.data('tildaformresult');
        var leadid = formresult.tranid;

        /* все поля заявки */
        var formArr = $form.serializeArray();

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

    $('.t706 form').each(function () {
        $(this).data('formsended-callback', 'window.myAfterSendedFunction');
    });
});
</script>
Отправка данных из формы Zero блока на свой ресурс
Если вы хотите, чтобы код сработал для элементов в Zero блоке, то исполнение кода нужно отложить, например, на 3 секунды. Пример такого кода:
<script>
$(document).ready(function () {
    window.mySuccessFunctionZero = function ($form) {
        /* $form - jquery объект ссылающийся на форму */

        /* номер заявки (Lead ID) */
        var formresult = $form.data('tildaformresult');
        var leadid = formresult.tranid;

        /* все поля заявки */
        var formArr = $form.serializeArray();

        /* отправляем данные POST-запросом */
        $.ajax({
            url: "https://yourwebhook.ru/form.php",
            type: "POST",
            data: formArr,
            async: false,
            success: function (response) {
                /* какие-то действия, если данные дошли успешно */
                if (response) {
                    /* переадресация на другую страницу */
                    window.location.href = "https://yoursite.ru/succsess-page";
                }

            }
        });
    }

    setTimeout(function () {
        $(".js-form-proccess").each(function () {
            $(this).data("success-callback", "window.mySuccessFunctionZero");
        });
        /* ваш код для работы с Zero блоком */
    }, 3000);
});
</script>
Как подключать свои или сторонние сервисы
Сторонний сервис, который срабатывает на кнопки/ссылки с определённым классом
Например, если необходимый сервис при клике на кнопку открывает специальный диалог, то важно соблюдать порядок работы со скриптом сервиса. Чтобы избежать проблем, сначала происходит добавление классов для кнопок, а потом вставка скрипта:
<script>
$(document).ready(function () {
    /* меняем класс кнопок на нужный */
    $('.t-btn').addClass('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>
Как разместить что-то особенное поверх блока
Иногда возникает ситуация, когда в существующие блоки хочется добавить какую-то изюминку. Например разместить форму в нулевой блок или виджет погоды поместить на обложку. В Тильде и это возможно. Для этого используем великий блок HTML.
Размещение любого виджета поверх блока
Благодаря JavaScript и jQuery мы можем в любой блок вставить любой HTML-код.
<script>
$(document).ready(function () {
    var $html = $('HTML-код который нужно вставить в блок');
    /* дополнительное позиционирование кода, который вставляем */
    $html.attr('style', 'display: block;left: 50%;margin-left: 20%;position: absolute;top: 100px;');
    $("#rec123456789").append($html);
});
</script>
где #rec123456789 — номер блока, в который добавится виджет;
Запуск разных виджетов для мобильных и десктопных клиентов
Иногда нужно вставить громоздкий виджет для десктопа, при этом небольшой виджет для мобильного варианта. Для этого нам на помощь придет переменная window.isMobile
<script>
$(document).ready(function () {
    if (window.isMobile == true) {
        /* код для мобильных клиентов*/
    } else {
        /* код для десктопных клиентов*/
    }
});
</script>
Пример вставки смешанного виджета
Вместо условия window.isMobile можно использовать размеры экрана, например, $(window).width() < 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>
$(document).ready(function () {
    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' + '>';
    }
    $('#widgetbox').append(html);
});
</script>
Как сделать меню в Zero блоке
Чтобы меню, созданное в Zero Block вело себя как обычное меню — то есть накладывалось на следующий блок и фиксировалось при скролле — добавьте на страницу код,заменив rec000000000 на номер вашего Zero Block.
<style>
.floating {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9997;
}
</style>

<script>
$(document).ready(function () {
    /* rec00000000 нужно заменить на номер блока выполняющего роль меню */
    var blockMenuID = '#rec00000000';
    $(blockMenuID).addClass('floating');
});
</script>
Запрет автоматической передачи данных о лидах в Facebook Pixel
Если установить Facebook Pixel, то на странице появится объект fbq, который при отправке формы в Facebook отправляет событие Lead. Если требуется собственная настройка пикселя Facebook, запретить это поведение можно с помощью кода:
<script>
$(document).ready(function () {
    $("#allrecords").data("fb-event", "nosend");
});
</script>
Примите во внимание, что выше приведены образцы кода, которые вам нужно будет модифицировать самостоятельно, и эти действия требуют понимания того, как работает Javascript. К сожалению, мы не осуществляем поддержку по вопросам, связанным с работой стороннего кода.
Made on
Tilda