ページにスクリプトを追加する方法

ウェブサイトに高度な機能を追加する方法をご覧ください。
あなたのウェブサイトに任意のスクリプトを追加することができます。その他」カテゴリのT123ブロック(「HTMLコードを埋め込む」)をページに追加し、その中にスクリプトを埋め込みます。ここでは、あなたのウェブサイトの機能を拡張するために使用できるコードサンプルの一部を紹介します。
Tilda データキャプチャサービスに転送後
ウェブサイト訪問者がショッピングカートから決済システムのウェブサイトに移動する前
特定のクラスのリンクやボタンのクリックに反応する
あなたのウェブサイトで使用する前に、このガイドのコードサンプルを修正する必要があるかもしれないことに注意してください。また、JavaScriptがどのように動作するかを理解している必要があります。残念ながら、Tilda 、サードパーティのコードを使用することに関する問題のサポートは提供していません。
ウェブページ上のイベント遮断
イベントの傍受は、ポップアップイベント、リンククリック、フォーム送信成功後のサードパーティへのデータ転送などを追跡する必要がある場合に便利です。
リンククリックを妨害するスクリプト
<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>
特定のブロック内のリンククリックを遮断するスクリプト
以下は、ブロック#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>


ブロックIDはブロックの設定パネルで確認できます。
ボタンのクリックイベントをトラッキングするスクリプト
2つのボタンがあり、1つは同じページのテキストブロックに、もう1つは別のページにつながっています。最初のボタンにはブロック#rec12345678のアンカーがあり、2番目のボタンには外部ページ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>
ここでXXXXXXはカウンタIDである。
リンクやボタンのクリック情報をGoogle Analyticsに送信するスクリプト
このスクリプトは、アドレスに "URL の値" が含まれるリンクやボタンのクリックを追跡するために使用できます。そのようなクリックが発生した場合、そのことが通知されます。下記はサンプルコードです。置換される値は大文字です。
<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-ここには、リンクで見つかった任意の単語を挿入する。例えば、ボタンをクリックすると、訪問者は登録ページに移動します。http://mysite.com/registration。ここでは、URLのVALUEを "registration "に置き換えてください。

VIRTUAL PAGE NAME.Google Analyticsでは、ボタンのクリックに関する情報は、バーチャルページの閲覧統計に表示されます。

LINK-ボタンにあるリンク。例えば、 http://mysite.com/registration。

ボタンのクリックをゴールの完了としてトラッキングするには、Googleアナリティクスで新しいゴールを作成します:カスタムゴール → ランディングページ → /クリック/で始まる
フォームデータをTilda データキャプチャサービスに転送した後、お客様のリソースに送信するスクリプトです。
サイトのすべてのフォームに、データ転送が成功した後にフォームが呼び出す関数名を挿入してください。
<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>
ウェブサイト訪問者がショッピングカートから決済システムのウェブサイトに移動する前にカスタム機能を実行するためのスクリプト
ショッピングカートの内容に関する情報をクッキーに追加したり、eコマースイベントをGoogle AnalyticsやYandex.Metricaに送信する必要がある場合は、上記のスクリプトを使用してください。このスクリプトは、顧客が決済システムのページにリダイレクトされるか、決済ウィジェットが起動される直前に呼び出されます。
<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>
カスタムサービスまたはサードパーティ・サービスの接続方法
特定のクラスのリンクやボタンのクリックに応答するサードパーティ・サービスのスクリプト
例えば、必要なサービスがボタンをクリックすると特別なダイアログを開く場合、正しい方法でサービススクリプトを適用する必要があります。エラーを避けるには、最初にボタンのクラスを指定し、その後にスクリプトを埋め込みます。
<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>
特別なウィジェットをブロックの上に配置する方法
Zero Block にフォームを追加したり、ページカバーに天気予報ウィジェットを追加したりと、既存のブロックに何か特別なものを追加したいことがあります。Tilda では、このようなことも可能です。必要なのはHTMLブロックを追加するだけです。
ブロック上に天気予報ウィジェットを追加するスクリプト
ページにHTMLブロックを追加する。ウェブサイトpogoda.yandex.ruに行き、ウィジェットコードをコピーし、「コンテンツ」をクリックし、マジックを作成する。このコードを特定のブロック(天気予報ウィジェット)に、ブロックの中央から右側に埋め込みます。
<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>


ブロックIDはブロックの設定パネルで確認できます。
モバイルとデスクトップで異なるウィジェットを起動するスクリプト
時には、デスクトップ版のウェブサイト用に大きなウィジェットを挿入し、モバイル版用に小さなウィジェットを挿入する必要がある。これを行うには、"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>
混合ウィジェット追加スクリプト
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>
メニューの作り方Zero Block
Zero Block で作成したメニューを通常のメニューのように動作させるには、つまり、次のブロックに重なって表示され、スクロールすると固定されるようにするには、次のコードをページに追加し、rec000000000 をZero Block の ID に置き換える必要がある。
<style>
    /* Replace rec00000000 with Zero block ID */
    #rec00000000 {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 9998;
    }
</style>
でサードパーティ製スクリプトとフォームとのインタラクションを可能にするスクリプト。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>
Facebook Pixelへのリードデータの自動転送を無効にするスクリプト
Facebook Pixelをインストールすると、フォームデータがFacebookに転送される際にLeadイベントの情報を送信するfbqオブジェクトがページに表示されます。カスタムFacebookピクセルが必要な場合は、このコードを使ってこの動作を無効にできます:
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var allRec = document.getElementById('allrecords');
            if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
        });
  </script>
上記で使用したコードサンプルの改変は自己責任で行ってください。これらのサンプルを使用するには、JavaScriptがどのように動作するかを理解する必要があります。残念ながら、サードパーティのコードを使用することに関する問題のサポートは行っておりません。
製造元
Tilda