So fügen Sie ein Skript zur Seite hinzu

Erfahren Sie, wie Sie Ihrer Website erweiterte Funktionen hinzufügen können
Sie können ein beliebiges Skript in Ihre Website einfügen. Fügen Sie der Seite einen T123-Block ("HTML-Code einbetten") aus der Kategorie "Sonstiges" hinzu und betten Sie das Skript darin ein. Hier finden Sie eine Auswahl von Codebeispielen, mit denen Sie die Funktionen Ihrer Website erweitern können.
Nach der Übermittlung an den Datenerfassungsdienst Tilda
Bevor der Besucher der Website vom Einkaufswagen auf die Website des Zahlungssystems weitergeleitet wird
Reagieren auf Klicks auf Links oder Schaltflächen bestimmter Klassen
Bitte beachten Sie, dass Sie die Codebeispiele aus diesem Leitfaden möglicherweise ändern müssen, bevor Sie sie auf Ihrer Website verwenden. Möglicherweise müssen Sie wissen, wie JavaScript funktioniert, um fortfahren zu können. Leider bietet Tilda keine Unterstützung bei Problemen im Zusammenhang mit der Verwendung von Drittanbieter-Code.
Ereignisabfangung
auf der Webseite
Das Abfangen von Ereignissen ist nützlich, wenn Sie Pop-up-Ereignisse, Link-Klicks oder Datenübertragungen an Dritte nach einer erfolgreichen Formularübermittlung nachverfolgen müssen und vieles mehr, je nachdem, was Sie brauchen oder ausprobieren möchten.
Skript zum Abfangen von Linkklicks
<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>
Skript zum Abfangen von Linkklicks in einem bestimmten Block
So können Sie Linkklicks im Block #rec123456789 abfangen
<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>
wobei #rec123456789 die ID des Blocks ist, in dem das Wetter-Widget platziert werden soll.

Die Block-ID finden Sie im Einstellungsfenster des Blocks.
Skript zur Verfolgung von Schaltflächenklick-Ereignissen
Es gibt zwei Schaltflächen, von denen eine zu einem Textblock auf der gleichen Seite führt, die andere zu einer anderen Seite. Die erste Schaltfläche hat einen Anker für den Block #rec12345678, die zweite enthält einen Link zu der externen Seite 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>
wobei XXXXXX die Zähler-ID ist.
Skript zum Senden von Informationen über Link- oder Schaltflächenklicks an Google Analytics
Sie können dieses Skript verwenden, um Klicks auf einen Link oder eine Schaltfläche zu verfolgen, deren Adresse "einen Wert in URL" enthält. Wenn ein solcher Klick erfolgt, werden Sie darüber benachrichtigt. Nachstehend finden Sie einen Beispielcode. Die zu ersetzenden Werte sind in GROSSBUCHSTABEN geschrieben.
<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 - hier sollte ein beliebiges Wort eingefügt werden, das in dem Link vorkommt. Wenn der Besucher zum Beispiel auf eine Schaltfläche klickt, wird er zur Anmeldeseite weitergeleitet: http://mysite.com/registration. Hier sollten Sie den WERT IN URL durch "Registrierung" ersetzen.

VIRTUELLER SEITENNAME. In Google Analytics werden Informationen über einen Schaltflächenklick in den Statistiken zur Anzeige der virtuellen Seite angezeigt.

LINK - der Link, der auf einer Schaltfläche zu finden ist. Zum Beispiel http://mysite.com/registration.

Um einen Schaltflächenklick als Zielabschluss zu verfolgen, erstellen Sie ein neues Ziel in Google Analytics: Benutzerdefiniertes Ziel → Landing Page → Beginnt mit / Klick /
Skript zum Senden der Formulardaten an Ihre Ressource nach der Übermittlung an den Datenerfassungsdienst Tilda
Bitte fügen Sie den Namen der Funktion, die die Formulare nach erfolgreicher Datenübertragung aufrufen sollen, in alle Formulare auf Ihrer Seite ein.
<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>
Skript zur Ausführung einer benutzerdefinierten Funktion, bevor der Website-Besucher vom Einkaufswagen auf die Website des Zahlungssystems weitergeleitet wird
Wenn Sie Informationen über den Inhalt des Warenkorbs zu Cookies hinzufügen oder eCommerce-Ereignisse an Google Analytics oder Yandex.Metrica senden möchten, verwenden Sie das oben beschriebene Skript. Das Skript wird aufgerufen, bevor der Kunde auf die Seite des Zahlungssystems weitergeleitet wird oder das Zahlungs-Widget gestartet wird.
<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>
So verbinden Sie einen benutzerdefinierten Dienst oder einen Drittanbieterdienst
Skript für einen Drittanbieterdienst, der auf Klicks auf Links oder Schaltflächen bestimmter Klassen reagiert
Wenn der gewünschte Dienst zum Beispiel ein spezielles Dialogfeld öffnet, wenn Sie auf eine Schaltfläche klicken, müssen Sie das Skript des Dienstes mit der richtigen Methode anwenden. Um Fehler zu vermeiden, geben Sie zuerst die Klassen der Schaltflächen an und betten das Skript erst danach ein.
<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>
Wie man ein spezielles Widget über einem Block platziert
Manchmal möchte man den vorhandenen Blöcken etwas Besonderes hinzufügen, z. B. ein Formular auf Zero Block oder ein Wetter-Widget auf der Titelseite. Tilda macht auch dies möglich. Alles, was Sie tun müssen, ist einen HTML-Block hinzuzufügen.
Skript zum Hinzufügen eines Wetter-Widgets über einen Block
Fügen Sie einen HTML-Block auf der Seite ein. Gehen Sie auf die Website pogoda.yandex.ru, kopieren Sie den Widget-Code, klicken Sie auf Inhalt und erstellen Sie die Magie. Betten Sie diesen Code in den spezifischen Block (das Wetter-Widget) ein, direkt rechts von der Mitte des Blocks.
<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>
wobei #rec123456789 die ID des Blocks ist, in dem das Wetter-Widget platziert werden soll.

Die Block-ID finden Sie im Einstellungsfenster des Blocks.
Skript zum Starten verschiedener Widgets auf Handy und Desktop
Manchmal müssen Sie ein großes Widget für die Desktop-Version der Website und ein kleines Widget für die mobile Version einfügen. Hierfür müssen Sie die Variable "window.isMobile" verwenden.
<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>
Skript zum Hinzufügen eines gemischten Widgets
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>
Wie erstellt man ein Menü in Zero Block
Damit sich das in Zero Block erstellte Menü wie ein normales Menü verhält, d.h. den nächsten Block überlagert und beim Scrollen fixiert, müssen Sie diesen Code in die Seite einfügen, wobei Sie rec000000000 durch die ID Ihrer Zero Block ersetzen.
<style>
    /* Replace rec00000000 with Zero block ID */
    #rec00000000 {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 9998;
    }
</style>
Skript zur Ermöglichung der Interaktion zwischen einem Skript eines Drittanbieters und einem Formular 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>
Skript zur Deaktivierung der automatischen Übertragung von Lead-Daten an Facebook Pixel
Wenn Sie Facebook Pixel installieren, wird ein fbq-Objekt auf der Seite erscheinen, das Ihnen Informationen über das Lead-Ereignis sendet, wenn die Formulardaten an Facebook übertragen werden. Wenn Sie ein benutzerdefiniertes Facebook-Pixel benötigen, können Sie dieses Verhalten mit diesem Code deaktivieren:
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var allRec = document.getElementById('allrecords');
            if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
        });
  </script>
Bitte beachten Sie, dass Sie für die Änderung der oben verwendeten Codebeispiele selbst verantwortlich sind. Die Verwendung dieser Beispiele setzt voraus, dass Sie wissen, wie JavaScript funktioniert. Leider bieten wir keine Unterstützung bei Problemen im Zusammenhang mit der Verwendung von Drittanbieter-Code.
Hergestellt am
Tilda