チルダヘルプセンター

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

Web サイトに高度な機能を追加する方法を確認する
あなたはあなたのウェブサイトにどんなスクリプトでも追加することができます。「その他」カテゴリからT123ブロック(「HTMLコードを埋め込む」)をページに追加し、スクリプトを埋め込みます。ここでは、Web サイトの機能を拡張するために使用できるコード サンプルをいくつか紹介します。
リンクのクリックを傍受するためのスクリプト
特定のブロックでリンクのクリックを傍受するためのスクリプト
ボタンクリックイベントを追跡するためのスクリプト
リンクまたはボタンのクリックに関する情報を Google アナリティクスに送信するためのスクリプト
フォーム データをリソースに送信するためのスクリプト
Tildaデータキャプチャサービスに転送した後
カスタム機能を実行するためのスクリプト
Web サイトの訪問者をショッピング カートから決済システムの Web サイトに誘導する前
サードパーティ サービスのスクリプト
特定のクラスのリンクまたはボタンのクリックへの応答
ブロックに天気ウィジェットを追加するスクリプト
モバイルとデスクトップで異なるウィジェットを起動するためのスクリプト
混合ウィジェットを追加するためのスクリプト
Zero Blockでメニューを作成する方法
サードパーティのスクリプトと Zero Block のフォーム間の相互作用を可能にするスクリプト
Facebook Pixel へのリード データの自動転送を無効にするスクリプト
このガイドのコードサンプルをWebサイトで使用する前に、変更が必要な場合があることに注意してください。先に進むには、JavaScriptがどのように機能するかを理解する必要があるかもしれません。残念ながら、Tildaはサードパーティコードの使用に関連する問題に関するサポートを提供していません。
イベントインターセプト
ウェブページで
イベント インターセプトは、ポップアップ イベント、リンクのクリック、またはフォームの送信が成功した後のサード パーティへのデータ転送などを追跡する必要がある場合に役立ちます。
リンクのクリックを傍受するためのスクリプト
特定のブロック内のリンクのクリックをインターセプトするスクリプト
ブロック内のリンククリックを傍受する方法は次のとおりです #rec123456789
#rec123456789 は、天気ウィジェットが配置されるブロックの ID です。

ブロック ID は、ブロックの [設定] パネルで確認できます。
ボタンクリックイベントを追跡するためのスクリプト
2 つのボタンがあり、1 つは同じページ上のテキスト ブロックに移動し、もう 1 つは別のページに移動します。最初のボタンにはブロック #rec12345678 のアンカーがあり、2 番目のボタンには外部ページ http://help-ru.tilda.ws へのリンクが含まれています。
ここで、XXXXXX はカウンター ID です。
リンクまたはボタンのクリックに関する情報を Google アナリティクスに送信するためのスクリプト
このスクリプトを使用して、アドレスに「URL の値」が含まれているリンクまたはボタンのクリックをトラッキングできます。このようなクリックが発生すると、通知されます。以下はサンプルコードです。置き換えられる値は大文字です。
URL VALUE:リンクで見つかった単語を挿入する必要があります。たとえば、ボタンをクリックすると、訪問者はサインアップページに移動します: http://mysite.com/registration。 ここでは、URLの値を「登録」に置き換える必要があります。

仮想ページ名。Googleアナリティクスでは、ボタンクリックに関する情報が仮想ページの表示統計に表示されます。

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

ボタンのクリックを目標の完了としてトラッキングするには、Google アナリティクスで新しい目標を作成します。 カスタム目標→ランディングページ → で始まる / クリック /
フォームデータをTildaデータキャプチャサービスに転送した後、リソースに送信するためのスクリプト
サイト上のすべてのフォームでデータ転送が成功した後にフォームが呼び出す関数の名前を入力してください。
Web サイトの訪問者をショッピング カートから支払いシステムの Web サイトに誘導する前に、カスタム関数を実行するためのスクリプト
ショッピング カートの内容に関する情報を Cookie に追加する必要がある場合、または e コマース イベントを Google Analytics または Yandex.Metrica に送信する必要がある場合は、上記のスクリプトを使用します。このスクリプトは、顧客が支払いシステムのページにリダイレクトされる直前、または支払いウィジェットが起動される直前に呼び出されます。
カスタム サービスまたはサードパーティ サービスを接続する方法
特定のクラスのリンクまたはボタンのクリックに応答するサードパーティ サービスのスクリプト
たとえば、必要なサービスがボタンをクリックしたときに特別なダイアログを開く場合、正しい方法を使用してサービス スクリプトを適用する必要があります。エラーを回避するには、最初にボタンのクラスを指定し、後でスクリプトを埋め込みます。
ブロックの上に特別なウィジェットを配置する方法
Zero Blockにフォームを追加したり、ページカバーに天気ウィジェットを追加したりするなど、既存のブロックに特別なものを追加したい場合があります。Tildaはこれさえも可能にします。必要なのは、HTMLブロックを追加することだけです。
ブロックに天気ウィジェットを追加するスクリプト
ページに HTML ブロックを追加します。 Web サイト pogoda.yandex.ru にアクセスし、ウィジェット コードをコピーして、[コンテンツ] をクリックし、魔法を作成します。このコードを特定のブロック (天気ウィジェット) の、ブロックの中心からすぐ右側に埋め込みます。
#rec123456789 は、天気ウィジェットが配置されるブロックの ID です。

ブロック ID は、ブロックの [設定] パネルで確認できます。
モバイルとデスクトップで異なるウィジェットを起動するためのスクリプト
デスクトップバージョンのWebサイトにはかさばるウィジェットを挿入し、モバイルバージョンには小さなウィジェットを挿入する必要がある場合があります。これを行うには、"window.isMobile" 変数を使用する必要があります。
混合ウィジェットを追加するためのスクリプト
Window.isMobile の代わりに、$(window).width () などの画面サイズを使用できます。 


' + '>';
    } else {
      /* code for desktop devices */
      html = '' + '>';
    }
    var widgetBox = document.querySelector('#widgetbox');
    if (widgetBox) widgetBox.insertAdjacentHTML('beforeend', html);
  }
Zero Blockでメニューを作成する方法
Zero Block で作成されたメニューを通常のメニューのように動作させるには、つまり、次のブロックに重ねてスクロール時に固定するには、このコードをページに追加し、rec0000000000 を Zero Block の ID に置き換える必要があります。
サードパーティのスクリプトと Zero Block のフォーム間の相互作用を可能にするスクリプト
Facebook Pixel へのリード データの自動転送を無効にするスクリプト
Facebook Pixel をインストールすると、フォーム データが Facebook に転送されたときに Lead イベントに関する情報を送信するページに fbq オブジェクトが表示されます。カスタム Facebook ピクセルが必要な場合は、次のコードを使用してこの動作を無効にすることができます。
上記で使用したコード サンプルの変更は、お客様の責任で行ってください。これらのサンプルを使用するには、JavaScript の仕組みを理解する必要があります。残念ながら、サードパーティ コードの使用に関連する問題についてはサポートを提供していません。
作成日
Tilda