コンテンツにスキップ
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterCF クラシックヘルプセンター

サードパーティの埋め込みコード

公開日: 更新日:

ClickFunnels を使用すると、フォーム、カレンダー、カスタム アイコン、ウィジェットなどのサードパーティ コンテンツを埋め込むことで、ページを強化できます。このガイドでは、 HTML/JS 要素、 ヘッダーコード、 およびフッターコード エディターを使用して、外部コードをページに埋め込む方法を示します。

必要条件

Section titled “必要条件”

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

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

  • 外部埋め込みコード

埋め込むことができるもの

Section titled “埋め込むことができるもの”

ClickFunnels ページに埋め込むことができるサードパーティ コンテンツの例をいくつか示します。

  • 予約スケジューラ: Calendly、Acuity Scheduling、1on1 などのツールを埋め込んで、ユーザーがページ上で直接予約できるようにします。

  • カスタムフォーム: データ収集には、JotForm、Google フォーム、Typeform などのサービスを使用してフォームを追加します。

  • メディア プレーヤー: SoundCloud や Spotify プレイリストなどの 外部 ビデオおよび オーディオ プレーヤーを埋め込んで、マルチメディアでページを強化します。

  • インタラクティブ機能: Google マップの地図、Calconic の電卓、Tidio や Intercom などのライブ チャット ツールなどのウィジェットを追加します。

HTML/JS 要素の使用

Section titled “HTML/JS 要素の使用”

ページエディタの HTML/JS 要素 は、サードパーティのコンテンツを埋め込む最も簡単な方法です。次の手順を実行します:

  1. HTML/JS 要素を追加します。

    • HTML/JS 要素をページにドラッグ アンド ドロップします。

    • セクションと行内に配置して、レイアウトを整理します。

  2. 埋め込みコードを貼り付けます。

    • 要素設定の [ コードエディタを開く ] オプションをクリックします。

    • 外部コードをエディターに貼り付けます。

    • コードエディタを閉じます。エディターを閉じると、コードが要素に適用されます。

    • [ 保存] をクリックしてページを保存します。

ヘッダーとフッターのコードエディタの使用

Section titled “ヘッダーとフッターのコードエディタの使用”

ClickFunnels には、カスタム コードを追加するための 2 つの追加領域、 ヘッダーコード エディターと フッターコード エディターが用意されています。これらのオプションを使用すると、ページの HTML 構造の特定の部分にコードを直接挿入できます。

  • ヘッダーコード は、ページの <head> タグと </head> タグの間にコードを追加するために使用されます。これは、ページ コンテンツの前にロードする必要があるメタ タグ、外部スタイルシート、トラッキング スクリプト、または構造化データを追加するのに最適です。

  • フッターコードは 、カスタムコードを <body> タグ内の終了 </body> タグの直前に配置します。これは通常、ページ コンテンツの後に読み込む必要がある JavaScript またはその他のスクリプトに使用されます。

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

例: 外部カレンダーウィジェットの埋め込み

Section titled “例: 外部カレンダーウィジェットの埋め込み”

以下は、Calendlyウィジェットをページに埋め込む例です。

  1. カレンダーイベントを作成したら、 インライン埋め込み コードをコピーします。

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

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

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

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

  6. コード エディターを開き、埋め込みコードを貼り付けます。
    HTML/JS要素のコードエディターに埋め込みコードを貼り付けた状態

  7. コードエディタを閉じてから、[保存] をクリックして変更を保存します。

ページが保存されたら、[ プレビュー] 👁️ アイコンをクリックして、レンダリングされたウィジェットを表示します。

埋め込みコードのトラブルシューティング

Section titled “埋め込みコードのトラブルシューティング”

ウィジェットが期待どおりにレンダリングされない場合は、次の手順に従います。

  1. HTML と JavaScript を分離する

    • HTML コードを HTML/JS 要素内に配置します。

    • JavaScript コードを****フッターコードエディターに貼り付けます。

  2. コードを確認する
    埋め込みコードが正確であることを確認してください。属性の欠落、構文エラー、またはコードの形式が不適切であると、失敗する可能性があります。

  3. ページレイアウトの検査
    ウィジェットが埋め込まれているセクションまたは行に、ウィジェットを正しく表示するのに十分なスペースがあることを確認します。必要に応じてレイアウトのサイズを変更または調整して、クリッピングや不適切なレンダリングを防ぎます。

  4. ディスプレイの問題
    ウィジェットがページプレビューで期待どおりに表示されない場合は、コードを変更する必要があるか、ウィジェットのデザインに調整が必要になる場合があります。たとえば、Calendly ウィジェットの背景色を変更するには、カレンダー イベント設定の Calendly アカウントで直接設定する必要があります。