Jak dodać skrypt do strony

Dowiedz się, jak dodać zaawansowane funkcje do swojej witryny
Możesz dodać dowolny skrypt do swojej strony. Dodaj do strony blok T123 ("Osadź kod HTML") z kategorii "Inne" i umieść w nim skrypt. Oto wybór przykładów kodu, których możesz użyć do rozszerzenia funkcji na swojej stronie internetowej.
Po przesłaniu go do serwisu przechwytywania danych Tilda
Przed przeniesieniem użytkownika witryny z koszyka na stronę systemu płatności
Reagowanie na kliknięcia linków lub przycisków określonych klas
Należy pamiętać, że może być konieczne zmodyfikowanie przykładów kodu z tego przewodnika przed użyciem ich na swojej stronie internetowej. Być może będziesz musiał zrozumieć, jak działa JavaScript, aby kontynuować. Niestety, Tilda nie zapewnia wsparcia w kwestiach związanych z używaniem kodu innych firm.
Przechwytywanie zdarzeń
na stronie internetowej
Przechwytywanie zdarzeń przydaje się, gdy trzeba śledzić wyskakujące okienka, kliknięcia linków lub transfery danych do strony trzeciej po pomyślnym przesłaniu formularza i wiele więcej, w zależności od tego, czego potrzebujesz lub chcesz spróbować.
Skrypt do przechwytywania kliknięć linków
<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>
Skrypt do przechwytywania kliknięć linków w określonym bloku
Oto jak można przechwytywać kliknięcia linków w bloku #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>
gdzie #rec123456789 to identyfikator bloku, w którym zostanie umieszczony widżet pogody.

Identyfikator bloku można znaleźć w panelu ustawień bloku.
Skrypt do śledzenia zdarzeń kliknięcia przycisku
Istnieją dwa przyciski, jeden prowadzący do bloku tekstowego na tej samej stronie, drugi do innej strony. Pierwszy przycisk ma kotwicę dla bloku #rec12345678, a drugi zawiera łącze do zewnętrznej strony 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>
gdzie XXXXXXXX to identyfikator licznika.
Skrypt do wysyłania informacji o kliknięciach linków lub przycisków do Google Analytics
Możesz użyć tego skryptu do śledzenia kliknięć dowolnego linku lub przycisku, którego adres zawiera "wartość w adresie URL". Jeśli takie kliknięcie nastąpi, zostaniesz o tym powiadomiony. Poniżej znajduje się przykładowy kod. Wartości, które mają zostać zastąpione, są pisane WIELKIMI LITERAMI.
<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 - tutaj należy wstawić dowolne słowo znajdujące się w linku. Na przykład po kliknięciu przycisku użytkownik zostanie przeniesiony na stronę rejestracji: http://mysite.com/registration. W tym miejscu należy zastąpić WARTOŚĆ w adresie URL słowem "rejestracja".

WIRTUALNA NAZWA STRONY. W Google Analytics informacje o kliknięciu przycisku pojawiają się w statystykach wyświetlania strony wirtualnej.

LINK - link znajdujący się na przycisku. Na przykład http://mysite.com/registration.

Aby śledzić kliknięcie przycisku jako ukończenie celu, utwórz nowy cel w Google Analytics: Cel niestandardowy → Landing Page → Zaczyna się od / kliknięcia /
Skrypt do wysyłania danych formularza do zasobu po przesłaniu ich do usługi przechwytywania danych Tilda .
Wstaw nazwę funkcji, którą formularze powinny wywoływać po pomyślnym przesłaniu danych we wszystkich formularzach na swojej stronie.
<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>
Skrypt wykonujący niestandardową funkcję przed przeniesieniem odwiedzającego witrynę z koszyka na stronę systemu płatności.
Jeśli chcesz dodać informacje o zawartości koszyka do plików cookie lub wysłać zdarzenia eCommerce do Google Analytics lub Yandex.Metrica, użyj skryptu opisanego powyżej. Skrypt jest wywoływany tuż przed przekierowaniem klienta na stronę systemu płatności lub uruchomieniem widżetu płatności.
<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>
Jak podłączyć usługę niestandardową lub usługę innej firmy
Skrypt dla usługi innej firmy reagujący na kliknięcia linków lub przycisków określonych klas
Na przykład, jeśli wymagana usługa otwiera specjalne okno dialogowe po kliknięciu przycisku, należy zastosować skrypt usługi przy użyciu odpowiedniej metody. Aby uniknąć błędów, należy najpierw określić klasy przycisków, a następnie osadzić skrypt.
<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>
Jak umieścić specjalny widżet nad blokiem
Czasami chcesz dodać coś specjalnego do istniejących bloków, na przykład dodać formularz do Zero Block lub widżet pogody do okładki strony. Tilda umożliwia nawet to. Wystarczy dodać blok HTML.
Skrypt do dodawania widżetu pogody nad blokiem
Dodaj blok HTML do strony. Wejdź na stronę pogoda.yandex.ru, skopiuj kod widżetu, kliknij na Content i create magic. Umieść ten kod w określonym bloku (widżet pogody), po prawej stronie od środka bloku.
<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>
gdzie #rec123456789 to identyfikator bloku, w którym zostanie umieszczony widżet pogody.

Identyfikator bloku można znaleźć w panelu ustawień bloku.
Skrypt do uruchamiania różnych widżetów na urządzeniach mobilnych i stacjonarnych
Czasami trzeba wstawić duży widżet dla wersji desktopowej strony i mały widżet dla wersji mobilnej. Aby to zrobić, należy użyć zmiennej "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>
Skrypt dodający widżet mieszany
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>
Jak utworzyć menu w aplikacji Zero Block
Aby menu utworzone w Zero Block zachowywało się jak zwykłe menu, czyli nakładało się na następny blok i utrwalało podczas przewijania, należy dodać ten kod do strony, zastępując rec000000000 identyfikatorem strony Zero Block.
<style>
    /* Replace rec00000000 with Zero block ID */
    #rec00000000 {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 9998;
    }
</style>
Skrypt umożliwiający interakcję między skryptem innej firmy a formularzem w aplikacji 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>
Skrypt wyłączający automatyczne przesyłanie danych potencjalnych klientów do Facebook Pixel
Jeśli zainstalujesz Facebook Pixel, na stronie pojawi się obiekt fbq, który wysyła informacje o zdarzeniu Lead, gdy dane formularza są przesyłane do Facebooka. Jeśli potrzebujesz niestandardowego Piksela Facebooka, możesz wyłączyć to zachowanie za pomocą tego kodu:
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var allRec = document.getElementById('allrecords');
            if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
        });
  </script>
Należy pamiętać, że użytkownik jest odpowiedzialny za modyfikację przykładów kodu użytych powyżej. Korzystanie z tych przykładów wymaga zrozumienia, jak działa JavaScript. Niestety, nie zapewniamy wsparcia w kwestiach związanych z używaniem kodu stron trzecich.
Wykonane na
Tilda