Come aggiungere uno script alla pagina

Scoprite come aggiungere funzionalità avanzate al vostro sito web
È possibile aggiungere qualsiasi script al proprio sito web. Aggiungete un blocco T123 ("Incorpora codice HTML") dalla categoria "Altro" alla pagina e incorporatevi lo script. Ecco una selezione di esempi di codice che potete utilizzare per ampliare le funzionalità del vostro sito web.
Dopo averla trasferita al servizio di acquisizione dati Tilda
Prima di portare il visitatore del sito web dal carrello al sito web del sistema di pagamento
Risposta ai clic su link o pulsanti di classi specifiche
Si noti che potrebbe essere necessario modificare gli esempi di codice di questa guida prima di utilizzarli sul proprio sito web. Potrebbe essere necessario comprendere il funzionamento di JavaScript per procedere. Purtroppo, Tilda non fornisce assistenza per i problemi legati all'utilizzo di codice di terze parti.
Intercettazione degli eventi
sulla pagina web
L'intercettazione degli eventi è utile quando è necessario tracciare gli eventi pop-up, i clic sui link o i trasferimenti di dati a terzi dopo l'invio di un modulo e molto altro ancora, a seconda di ciò che serve o si desidera provare.
Script per intercettare i clic sui link
<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 per intercettare i clic sui link in un blocco specifico
Ecco come intercettare i clic sui link nel blocco #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>
dove #rec123456789 è l'ID del blocco in cui sarà inserito il widget meteo.

L'ID del blocco si trova nel pannello delle impostazioni del blocco.
Script per il tracciamento degli eventi di clic dei pulsanti
Ci sono due pulsanti, uno che porta a un blocco di testo nella stessa pagina, l'altro a una pagina diversa. Il primo pulsante ha un'ancora per il blocco #rec12345678, mentre il secondo contiene un link alla pagina esterna 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>
dove XXXXXX è l'ID del contatore.
Script per l'invio di informazioni sui clic dei link o dei pulsanti a Google Analytics
È possibile utilizzare questo script per tracciare i clic su qualsiasi link o pulsante il cui indirizzo contiene "un valore in URL". Se si verifica un clic di questo tipo, si riceve una notifica. Di seguito è riportato un esempio di codice. I valori da sostituire sono in MAIUSCOLO.
<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>
VALORE URL: qui va inserita qualsiasi parola presente nel link. Ad esempio, quando si fa clic su un pulsante, il visitatore viene portato alla pagina di registrazione: http://mysite.com/registration. Qui si deve sostituire il VALORE DELL'URL con "registrazione".

NOME DELLA PAGINA VIRTUALE. In Google Analytics, le informazioni sul clic di un pulsante vengono visualizzate nelle statistiche di visualizzazione della pagina virtuale.

LINK: il link presente in un pulsante. Ad esempio, http://mysite.com/registration.

Per tracciare un clic su un pulsante come completamento di un obiettivo, creare un nuovo obiettivo in Google Analytics: Obiettivo personalizzato → Pagina di destinazione → Inizia con / clic /
Script per l'invio dei dati del modulo alla propria risorsa dopo il trasferimento al servizio di acquisizione dati Tilda
Inserite il nome della funzione che i moduli devono richiamare dopo un trasferimento di dati riuscito in tutti i moduli del vostro sito.
<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 per l'esecuzione di una funzione personalizzata prima di portare il visitatore del sito web dal carrello al sito web del sistema di pagamento
Se avete bisogno di aggiungere informazioni sul contenuto del carrello ai cookie o di inviare eventi eCommerce a Google Analytics o Yandex.Metrica, utilizzate lo script descritto sopra. Lo script viene richiamato subito prima che il cliente venga reindirizzato alla pagina del sistema di pagamento o che venga lanciato il widget di pagamento.
<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>
Come collegare un servizio personalizzato o di terze parti
Script per un servizio di terze parti che risponde ai clic su link o pulsanti di classi specifiche
Ad esempio, se il servizio richiesto apre una finestra di dialogo speciale quando si fa clic su un pulsante, è necessario applicare lo script del servizio utilizzando il metodo corretto. Per evitare errori, specificare prima le classi dei pulsanti e incorporare poi lo 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) {
      /* 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>
Come posizionare un widget speciale sopra un blocco
A volte si vuole aggiungere qualcosa di speciale ai blocchi esistenti, come ad esempio aggiungere un modulo a Zero Block o un widget meteo alla copertina della pagina. Tilda rende possibile anche questo. È sufficiente aggiungere un blocco HTML.
Script per aggiungere un widget meteo a un blocco
Aggiungere un blocco HTML alla pagina. Andare sul sito web pogoda.yandex.ru, copiare il codice del widget, fare clic su Contenuto e creare la magia. Incorporare questo codice nel blocco specifico (il widget del meteo), appena a destra dal centro del blocco.
<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>
dove #rec123456789 è l'ID del blocco in cui sarà inserito il widget meteo.

L'ID del blocco si trova nel pannello delle impostazioni del blocco.
Script per il lancio di diversi widget su mobile e desktop
A volte è necessario inserire un widget ingombrante per la versione desktop del sito web e un widget piccolo per la versione mobile. A tale scopo, è necessario utilizzare la variabile "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 per l'aggiunta di un 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>
Come creare un menu in Zero Block
Affinché il menu creato in Zero Block si comporti come un menu normale, cioè sovrapposto al blocco successivo e fisso allo scorrimento, è necessario aggiungere questo codice alla pagina, sostituendo rec000000000 con l'ID del vostro Zero Block.
<style>
    /* Replace rec00000000 with Zero block ID */
    #rec00000000 {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 9998;
    }
</style>
Script per abilitare l'interazione tra uno script di terze parti e un modulo in 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 per disabilitare il trasferimento automatico dei dati dei lead a Facebook Pixel
Se si installa il Pixel di Facebook, nella pagina apparirà un oggetto fbq che invia informazioni sull'evento Lead quando i dati del modulo vengono trasferiti a Facebook. Se si ha bisogno di un Pixel di Facebook personalizzato, è possibile disabilitare questo comportamento utilizzando questo codice:
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var allRec = document.getElementById('allrecords');
            if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
        });
  </script>
L'utente è responsabile della modifica degli esempi di codice utilizzati sopra. L'uso di questi esempi richiede la comprensione del funzionamento di JavaScript. Purtroppo non forniamo assistenza per i problemi legati all'uso di codice di terze parti.
Realizzato su
Tilda