コンテンツにスキップ

高度な機能のためのJavaScriptとトラッキングコードの追加

ClickFunnels を使用すると、JavaScript とトラッキング コードをページに追加して、カスタム インタラクティブ性、サードパーティ ツール、分析などの高度な機能を実装できます。このガイドでは、カスタム JavaScript と トラッキング コードを ページに効果的に追加 する方法を学習します。


  • アクティブなClickFunnelsアカウント

  • ワークスペースで作成されたページ

  • 外部 JavaScript またはトラッキング コード


HTML/JS 要素を使用した JavaScript コードの追加

Section titled “HTML/JS 要素を使用した JavaScript コードの追加”

HTML/JS 要素は、ページ上の特定の機能やインタラクティブ性のためにカスタム JavaScript を追加するのに最適です。この方法は、ウィジェット、アニメーション、またはインタラクティブな要素を埋め込むのに最適です。

  1. ページエディタ内で、要素を 配置するセクション を追加します。

  2. そのセクション内に 行 を追加します。

  3. 行内のオレンジ色の + プラスまたは [新しい要素を追加] ボタンをクリックして、新しい要素を挿入します。

  4. その他 カテゴリから、HTML/JS 要素を選択します。

  5. 要素の設定パネルにある [コードエディタを開く ] ボタンをクリックします。

  6. JavaScript コードを <script> </script> タグ内にラップし、エディターに貼り付けます。

詳細はこちら: HTML/JS: Insert Custom HTML and JavaScript Code。


ページヘッダーまたはフッターへのトラッキングコードの追加

Section titled “ページヘッダーまたはフッターへのトラッキングコードの追加”

ClickFunnels の [ヘッダーコード ] セクションと [フッターコード ] セクションは、ページ全体に適用されるトラッキング スクリプトまたはグローバル JavaScript を追加するように設計されています。これらは、Google Analytics や Facebook Pixel などの分析ツールによく使用されます。

  1. ページ エディター内で、[ 設定] > [コードを表示] に移動し、[ヘッダーコード] または [フッターコード] タブを選択します。ファネルのページを編集している場合、[設定] は [カスタマイズ](歯車)アイコンの中にあります。

  2. ヘッダーまたはフッターコードを選択します。

    • ヘッダー コード セクションは、分析やCSSベースのスクリプトなど、ページライフサイクルの早い段階で読み込む必要があるスクリプトに使用します。

    • JavaScript の フッターコード セクションを使用すると、コンテンツの後に読み込むことができるページ要素またはスクリプトと対話します。

  3. JavaScript コードを <script> </script> タグでラップし、適切なセクションに貼り付けます。

  4. 変更を保存し、プレビューするかブラウザー開発者ツールを使用してページをテストし、スクリプトの実行を確認します。


ヘッダーコードとフッターコードを使用する場合

Section titled “ヘッダーコードとフッターコードを使用する場合”
  • ヘッダーコード: ページコンテンツの前に読み込む必要があるトラッキングスクリプトまたは外部スクリプトを追加します。
    例: Google アナリティクスまたはサードパーティの CSS ライブラリ。

  • フッターコード: 完全に読み込まれているページに依存するスクリプトを追加します。
    例: カスタム JavaScript または HTML 要素と対話するスクリプト。