Cómo añadir un script a la página

Descubra cómo añadir funciones avanzadas a su sitio web
Puedes añadir cualquier script a tu página web. Añade un bloque T123 ("Incrustar código HTML") de la categoría "Otros" a la página e incrusta el script en él. Aquí tienes una selección de ejemplos de código que puedes utilizar para ampliar las funciones de tu sitio web.
Después de transferirlo al servicio de captura de datos Tilda
Antes de llevar al visitante del sitio web desde la cesta de la compra al sitio web del sistema de pago
Respuesta a los clics en enlaces o botones de clases específicas
Tenga en cuenta que es posible que tenga que modificar los ejemplos de código de esta guía antes de utilizarlos en su sitio web. Es posible que necesite entender cómo funciona JavaScript para proceder. Lamentablemente, Tilda no ofrece asistencia sobre problemas relacionados con el uso de código de terceros.
Interceptación de eventos
en la página web
La interceptación de eventos resulta muy útil cuando se necesita realizar un seguimiento de eventos emergentes, clics en enlaces o transferencias de datos a terceros tras el envío satisfactorio de un formulario y mucho más, en función de lo que necesite o desee probar.
Script para interceptar clics en enlaces
<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 clics de enlaces en un bloque específico
Así es como puede interceptar los clics en enlaces en el bloque #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>
donde #rec123456789 es el ID del bloque donde se colocará el widget del tiempo.

Puedes encontrar el ID del bloque en el panel de configuración del bloque.
Script para el seguimiento de eventos de clic de botón
Hay dos botones, uno lleva a un bloque de texto en la misma página, el otro a una página diferente. El primer botón tiene un ancla para el bloque #rec12345678, y el segundo contiene un enlace a la 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>
donde XXXXXX es el ID del contador.
Script para enviar información sobre clics en enlaces o botones a Google Analytics
Puede utilizar este script para rastrear los clics en cualquier enlace o botón cuya dirección contenga "un valor en URL". Si se produce un clic de este tipo, recibirá una notificación al respecto. A continuación se muestra un código de ejemplo. Los valores que deben sustituirse están en MAYÚ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>
VALOR URL-Aquí debe insertarse cualquier palabra que se encuentre en el enlace. Por ejemplo, al hacer clic en un botón, el visitante es conducido a la página de registro: http://mysite.com/registration. Aquí debe sustituir el VALOR EN URL por "inscripción".

NOMBRE DE PÁGINA VIRTUAL. En Google Analytics, la información sobre el clic en un botón aparece en las estadísticas de visualización de la página virtual.

ENLACE-el enlace que se encuentra en un botón. Por ejemplo, http://mysite.com/registration.

Para realizar el seguimiento de un clic en un botón como finalización de un objetivo, cree un nuevo objetivo en Google Analytics: Objetivo personalizado → Página de destino → Comienza con / clic /
Script para enviar los datos del formulario a su recurso después de transferirlos al servicio de captura de datos Tilda
Por favor, inserte el nombre de la función que los formularios deben llamar después de una transferencia de datos exitosa en todos los formularios de su sitio.
<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 realizar una función personalizada antes de llevar al visitante del sitio web desde la cesta de la compra al sitio web del sistema de pago.
Si necesita añadir información sobre el contenido del carro de la compra a las cookies o enviar eventos de comercio electrónico a Google Analytics o Yandex.Metrica, utilice el script descrito anteriormente. El script se llama justo antes de redirigir al cliente a la página del sistema de pago o de lanzar el widget de pago.
<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>
Cómo conectar un servicio personalizado o de terceros
Script para un servicio de terceros que responde a los clics en enlaces o botones de clases específicas.
Por ejemplo, si el servicio requerido abre un cuadro de diálogo especial al hacer clic en un botón, debe aplicar el script de servicio utilizando el método correcto. Para evitar errores, especifique primero las clases de los botones e incruste el script después.
<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>
Cómo colocar un widget especial sobre un bloque
A veces quieres añadir algo especial a los bloques existentes, como añadir un formulario a Zero Block o un widget del tiempo a la portada de la página. Tilda hace que incluso esto sea posible. Todo lo que tienes que hacer es añadir un bloque HTML.
Script para añadir un widget del tiempo sobre un bloque
Añade un bloque HTML a la página. Ve a la página pogoda.yandex.ru, copia el código del widget, pulsa en Contenido y crea magia. Incrusta este código en el bloque específico (el widget del tiempo), justo a la derecha del centro del bloque.
<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>
donde #rec123456789 es el ID del bloque donde se colocará el widget del tiempo.

Puedes encontrar el ID del bloque en el panel de configuración del bloque.
Script para lanzar diferentes widgets en móvil y escritorio
A veces es necesario insertar un widget voluminoso para la versión de escritorio del sitio web y un widget pequeño para la versión móvil. Para ello, es necesario utilizar la variable "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 añadir un widget mixto
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>
Cómo crear un menú en Zero Block
Para que el menú creado en Zero Block se comporte como un menú normal, es decir, superpuesto al bloque siguiente y fijo al desplazarse, debe añadir este código a la página, sustituyendo rec000000000 por el ID de su Zero Block.
<style>
    /* Replace rec00000000 with Zero block ID */
    #rec00000000 {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 9998;
    }
</style>
Script para permitir la interacción entre un script de terceros y un formulario en 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 desactivar la transferencia automática de datos de clientes potenciales al píxel de Facebook
Si instalas Facebook Pixel, aparecerá un objeto fbq en la página que te enviará información sobre el evento Lead cuando los datos del formulario se transfieran a Facebook. Si necesitas un píxel de Facebook personalizado, puedes desactivar este comportamiento con este código:
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var allRec = document.getElementById('allrecords');
            if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
        });
  </script>
Tenga en cuenta que usted es responsable de modificar los ejemplos de código utilizados anteriormente. El uso de estos ejemplos requiere comprender cómo funciona JavaScript. Lamentablemente, no ofrecemos asistencia sobre problemas relacionados con el uso de código de terceros.
Hecho en
Tilda