Como adicionar um script à página

Saiba como adicionar recursos avançados ao seu site
Você pode adicionar qualquer script ao seu site. Adicione um bloco T123 ("Incorporar código HTML") da categoria "Outros" à página e incorpore o script nele. Aqui está uma seleção de exemplos de código que você pode usar para expandir os recursos em seu site.
Depois de transferi-lo para o serviço de captura de dados Tilda
Antes de levar o visitante do site do carrinho de compras para o site do sistema de pagamento
Responder a cliques em links ou botões de classes específicas
Observe que talvez seja necessário modificar os exemplos de código deste guia antes de usá-los em seu site. Talvez você precise entender como o JavaScript funciona para prosseguir. Infelizmente, o site Tilda não oferece suporte para problemas relacionados ao uso de código de terceiros.
Interceptação de eventos
na página da Web
A interceptação de eventos é útil quando você precisa rastrear eventos de pop-up, cliques em links ou transferências de dados para terceiros após o envio bem-sucedido de um formulário e muito mais, dependendo do que você precisa ou gostaria de experimentar.
Script para interceptar cliques em links
<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 () {
        /* write action type */
      });
    });
  }
</script>
Script para interceptar cliques em links em um bloco específico
Veja como você pode interceptar cliques em links no bloco #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 () {
        /* write action type */
      });
    });
  }
</script>
onde #rec123456789 é o ID do bloco em que o widget de clima será colocado.

Você pode encontrar o ID do bloco no painel Settings (Configurações) do bloco.
Script para rastrear eventos de clique em botões
Há dois botões, um que leva a um bloco de texto na mesma página e o outro a uma página diferente. O primeiro botão tem uma âncora para o bloco #rec12345678, e o segundo contém um link para a página externa 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>
em que XXXXXX é a ID do contador.
Script para enviar informações sobre cliques em links ou botões para o Google Analytics
Você pode usar esse script para rastrear cliques em qualquer link ou botão cujo endereço contenha "um valor na URL". Se esse clique ocorrer, você será notificado sobre ele. Abaixo está um exemplo de código. Os valores que devem ser substituídos estão em MAIÚSCULAS.
<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 Value') !== -1) {
          e.preventDefault();
          ga('send', {
            'hitType': 'pageview',
            'page': '/click' + window.location.pathname,
            'title': 'Virtual page name',
          });
          setTimeout(function () {
            window.location = link.href;
          }, 200);
        }
      });
    });
  }
</script>
URL VALUE - aqui deve ser inserida qualquer palavra encontrada no link. Por exemplo, ao clicar em um botão, o visitante é levado à página de registro: http://mysite.com/registration. Aqui você deve substituir o VALUE IN URL por "registration" (registro).

VIRTUAL PAGE NAME (nome da página virtual). No Google Analytics, as informações sobre um clique no botão aparecem nas estatísticas de visualização da página virtual.

LINK - o link encontrado em um botão. Por exemplo, http://mysite.com/registration.

Para rastrear um clique em um botão como conclusão de meta, crie uma nova meta no Google Analytics: Meta personalizada → Landing Page → Começa com / clique /
Script para enviar os dados do formulário para seu recurso depois de transferi-los para o serviço de captura de dados Tilda
Insira o nome da função que os formulários devem chamar após uma transferência de dados bem-sucedida em todos os formulários do seu site.
<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;

    /* fields in the lead */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });
    /*
    to address to field value use:
    obj["Name"]
    obj["Phone"]
    obj["Email"]
    etc. 
    */
  }

  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>
Script para executar uma função personalizada antes de levar o visitante do site do carrinho de compras para o site do sistema de pagamento
Se precisar adicionar informações sobre o conteúdo do carrinho de compras aos cookies ou enviar eventos de comércio eletrônico para o Google Analytics ou Yandex.Metrica, use o script descrito acima. O script é chamado logo antes de o cliente ser redirecionado para a página do sistema de pagamento ou de o widget de pagamento ser iniciado.
<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;

    /* fields in the lead */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });

    /* here you should write a data sending code to the destination, e.g. data receiving to your script or data adding in 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>
Como conectar um serviço personalizado ou de terceiros
Script para um serviço de terceiros que responde a cliques em links ou botões de classes específicas
Por exemplo, se o serviço necessário abrir uma caixa de diálogo especial ao clicar em um botão, você deverá aplicar o script do serviço usando o método correto. Para evitar erros, especifique as classes dos botões primeiro e incorpore o script depois.
<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) {
      /* add custom class to buttons */
      button.classList.add('superclass');
    });

    /* add service script */
    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>
Como colocar um widget especial sobre um bloco
Às vezes, você deseja acrescentar algo especial aos blocos existentes, como adicionar um formulário a Zero Block ou um widget de previsão do tempo à capa da página. Tilda torna isso possível. Tudo o que você precisa fazer é adicionar um bloco HTML.
Script para adicionar um widget de previsão do tempo em um bloco
Adicione um bloco HTML à página. Vá para o site pogoda.yandex.ru, copie o código do widget, clique em Content (Conteúdo) e crie uma mágica. Incorpore esse código no bloco específico (o widget de clima), logo à direita do centro do bloco.
<script>
$(document).ready(function () {
    var widget = $('<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>');
    widget.attr('style', 'display: block;left: 50%;margin-left: 20%;position: absolute;top: 100px;');
    $('#rec123456789').append(widget);
});
</script>
onde #rec123456789 é o ID do bloco em que o widget de clima será colocado.

Você pode encontrar o ID do bloco no painel Settings (Configurações) do bloco.
Script para iniciar diferentes widgets no celular e no desktop
Às vezes, você precisa inserir um widget volumoso para a versão desktop do site e um widget pequeno para a versão móvel. Para fazer isso, você precisa usar a variável "window.isMobile".
<script>
  if (document.readyState !== 'loading') {
    us_initAdaptiveWidget();
  } else {
    document.addEventListener('DOMContentLoaded', us_initAdaptiveWidget);
  }

  function us_initAdaptiveWidget() {
    if (window.isMobile == true) {
      /* code for mobile devices */
    } else {
      /* code for desktop devices */
    }
  }
</script>
Script para adicionar um widget misto
Instead of window.isMobile, you can use screen sizes, for example, $(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>
  if (document.readyState !== 'loading') {
    us_appendMixedWidget();
  } else {
    document.addEventListener('DOMContentLoaded', us_appendMixedWidget);
  }

  function us_appendMixedWidget() {
    var html = '';
    if (window.isMobile == true) {
      /* code for mobile devices */
      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 {
      /* code for desktop devices */
      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>
Como criar um menu em Zero Block
Para que o menu criado em Zero Block se comporte como um menu normal, ou seja, sobreposto ao próximo bloco e fixado na rolagem, você precisa adicionar este código à página, substituindo rec000000000 pelo ID do seu Zero Block.
<style>
    /* Replace rec00000000 with Zero block ID */
    #rec00000000 {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 9998;
    }
</style>
Script para permitir a interação entre um script de terceiros e um formulário em Zero Block
<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;

    /* all lead fields */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });

    /* Send data via POST-request */
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://yourwebhook.ru/form.php');
    xhr.send(JSON.stringify(obj));
    xhr.onload = function () {
      if (xhr.response) {
        /* Actions if data was received successfully */

        /* Redirection to the success page */
        var successUrl = form.getAttribute('data-success-url');
        if (successUrl) window.location.href = successUrl;
      }
    };
  }
</script>
Script para desativar a transferência automática de dados de leads para o Facebook Pixel
Se você instalar o Facebook Pixel, um objeto fbq aparecerá na página que envia informações sobre o evento Lead quando os dados do formulário são transferidos para o Facebook. Se você precisar de um Facebook Pixel personalizado, poderá desativar esse comportamento usando este código:
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var allRec = document.getElementById('allrecords');
            if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
        });
  </script>
Observe que você é responsável por modificar os exemplos de código usados acima. O uso dessas amostras requer o conhecimento do funcionamento do JavaScript. Infelizmente, não oferecemos suporte para problemas relacionados ao uso de código de terceiros.
Fabricado em
Tilda