ClickFunnels でのボタン、テキスト、画像のアクションの設定

ClickFunnels の要素アクションは、ユーザーがボタン、テキスト、または画像を操作したときに何が起こるかを定義し、ナビゲーション、フォーム送信、ポップアップのトリガーなどのタスクをガイドできるようにします。ClickFunnels は、これらのアクションを設定するためのユーザーフレンドリーなインターフェイスを提供し、ページ間でのスムーズな対話を保証します。この記事では、インタラクティブ性を強化するために、ボタン、テキスト、および画像要素のアクションを構成する方法を学習します。

必要条件

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

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

ボタンアクションの設定

ボタン要素の追加

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

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

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

4. [ フォーム] カテゴリから、[ ボタン] 要素を選択します。
   

5. ボタン要素にカーソルを合わせます。その境界線はオレンジ色で強調表示されます。 歯車⚙️アイコン をクリックするか、要素を直接クリックして設定パネルを開きます。

6. [ ボタン アクション] セクションまでスクロールして、ボタン アクションを設定します。

使用可能なボタンアクション

この設定では、訪問者がボタンをクリックしたときに何が起こるかを定義できます。使用可能なアクションは次のとおりです。

1. 何も起こらない: [ 何も起こらない ] オプションを選択しても、ボタンをクリックしても何も起こりません。

2. 移動先: [ 移動 ] アクションを選択すると、2 つの追加フィールドが表示され 、リダイレクト用の [カスタム URL] と [カスタム アクション リンク] のどちらかを選択できます。

   1. カスタム URL: このオプションを使用すると、クリック時にボタンがリダイレクトされる特定の URL (「ハード リンク」) を入力できます。これは、外部 Web サイトまたはユーザーを誘導する任意の URL にすることができます。「新しいウィンドウで開く」オプションを選択することもできます。これは、ボタンがクリックされると、リンクがブラウザの新しいタブで開くことを示します。
      

   2. カスタムアクションリンク:ハードコードされたURLに直接リンクする代わりに、 相対パス または カスタムアクションコマンド ( #open-popup や /terms-and-conditionなど)を使用できます。この柔軟性により、ポップアップを開いたり、同じドメインに関連付けられたパス名に一致するページに移動したりするなどのアクションをトリガーする動的リンクをページ内に作成できます。「新しいウィンドウで開く」オプションを選択することもできます。これは、ボタンがクリックされると、リンクがブラウザの新しいタブで開くことを示します。
      

   3. ストアページ: このオプションは、ファネルに接続されている storefrontページに直接リンクします。これは、ユーザーを商品リストやショップ関連コンテンツに誘導する必要があるボタンに役立ちます。新しいウィンドウ で開くを有効にして、新しいタブでストアページを起動できます 。
      

   4. ブログホームページ: このオプションは、ユーザーをサイトのメイン ブログ ページにリダイレクトします。ブログ コンテンツを宣伝したり、リンクしたりするのに最適です。[新しいウィンドウ で開く] チェックボックスは、ブログを別のタブで開く場合にも使用できます。
      
      

3. フォームの送信: ボタンアクションとして 注文/フォームの送信 を選択すると、リ ダイレクトの上書きを有効にする オプションを使用して送信後のリダイレクトを制御できます。

   • デフォルトの動作: [ リダイレクトの上書きを有効にする] ボックスをオフのままにすると、ボタン アクションはデフォルトの動作に従い、ユーザーを ClickFunnels ファネルの次のステップに進めます。ファネルに次のステップがない場合は、フォームが送信され、ページが現在の URL にリロードされます。

   • リダイレクトの上書きを有効にする: このボックスをオンにすると、 カスタム URL またはページ URL への 相対パス をフィールドに入力できます。有効にすると、ボタンは、ファネルの次のステップに進むのではなく、フォーム送信後にこの指定されたURLにユーザーをリダイレクトします。
     

4. スクロール先: ボタン アクションとして [スクロール先] を選択すると、ボタンがクリックされたときにページの特定の部分にスクロールすることで、スムーズなナビゲーションを作成できます。[スクロール先] を選択すると、ドロップダウン メニューが表示され、セクション、行、特定の要素などのターゲット要素を選択できます。識別しやすくするために、ユーザーがスクロールする場所(セクション、行、フレックス、および要素)をchange the container's title できます 。この機能は、ユーザーを同じページ上の関連コンテンツに誘導し、手動スクロールの必要性を減らすことでユーザー エクスペリエンスを向上させるのに役立ちます。
   

5. 表示/非表示: 表示/非表示 アクションを使用すると、ボタンがクリックされたときにページ上の特定の要素の表示を切り替えることができます。 [表示/非表示] を選択すると、次の 2 つのドロップダウン メニューが表示されます。

   1. 表示...: ボタンをクリックしたときに表示される要素、セクション、または行を選択します。

   2. 非表示...: ボタンをクリックしたときに非表示になる要素、セクション、または行を選択します。
      ボタンをクリックしてコンテンツを表示および非表示にする方法の詳細については、「ボタンクリック時にコンテンツを表示/非表示にする方法」の記事 を参照してください。
      

6. ポップアップを開く: ページポップアップウィンドウを開き、追加情報、フォーム、または行動喚起を含めることができます。

7. ポップアップを閉じる: アクティブなポップアップウィンドウを閉じます。

8. 完了としてマーク: コース内の現在のレッスンを完了としてマークし、ユーザをシーケンス内の次のレッスンに自動的に進めます。

9. 前のレッスンに戻る : このアクションを選択すると、ユーザはコースフロー内で以前に表示したレッスンに戻ることができます。このアクションは、現在のレッスンの完了ステータスを変更しないため、進行状況をリセットせずに以前のコンテンツに再アクセスする場合に便利です。

10. レッスンの再開: このアクションは、現在のレッスンをリロードし、関連するすべての進行状況をリセットします。これは、ユーザーが理解を深めるために教材を最初から繰り返す必要があるコースレッスンで特に役立ちます。
    コースページの編集とカスタマイズの詳細については、「 Using the Page Editor to Design Your Course」を参照してください。

11. 次のステップにリダイレクトする: ボタンをクリックすると、ユーザーは自動的にファネルシーケンスの次のステップに移動します。これは、URL を手動で指定することなく、訪問者にファネルの進行を案内する簡単な方法です。

    手記：

    [ 次のステップにリダイレクト ] アクションは、 フォーム送信を対象としていません。このアクションを選択しても、フォームデータは送信されません。クリックしたときにのみ、次のファネルステップへのリダイレクトがトリガーされます。ユーザーを進める前にフォーム情報をキャプチャする必要がある場合は、代わりに [フォームの送信] アクションを選択すると、データが適切に送信され、指定されたとおりにユーザーに誘導されます。

イメージアクションの設定

画像要素の追加

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

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

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

4. [ メディア ] カテゴリから、[ 画像 ] 要素を選択します。
   

5. 画像要素にカーソルを合わせます。その境界線はオレンジ色で強調表示されます。 歯車⚙️アイコン をクリックするか、要素を直接クリックして設定パネルを開きます。

6. [ リンクアクション] または [URL ] オプションまでスクロールして、ボタンアクションを設定します。

使用可能な画像アクション

[ リンク アクション] または [URL ] フィールドでは、ユーザーが画像をクリックしたときに何が起こるかを指定できます。いくつかの事前定義されたアクションから選択し、カスタム URL またはページ URL の相対パスを挿入できます。利用可能なオプションの内訳は次のとおりです。

• #open ポップアップ: 画像をクリックすると、ページポップアップが開きます。

• #submit 形式: このオプションは、画像をクリックしたときにオプトインフォームを送信します。

• ?next_funnel_step=trueです。 画像をクリックすると、ユーザーは目標到達プロセスの次のページにリダイレクトされます。

• #close ポップアップ: このアクションは、すでに開いているポップアップを閉じ、ポップアップを開くアクションの反対として機能します。

• ?page_action=mark_complete: コースレッスンエディタで画像を使用している場合、このアクションを選択すると、クリックしたときにレッスンが完了としてマークされます。

オプションで、[ ターゲット] フィールドを [同じウィンドウ] または [新しいタブ] として選択できます。[ 新しいタブ] オプションを選択すると、ブラウザ内の新しいタブでアクションまたは URL が開きます。

テキストアクションの設定

ClickFunnels のテキスト アクションとは、テキストをハイパーリンクして、ブログ投稿へのリダイレクト、セクションへの移動、ポップアップを開くなど、特定のユーザー インタラクションをトリガーすることを指します。これらのアクションは、見出し、サブ見出し、段落、箇条書きリストなどのさまざまなテキスト要素に適用できるため、ページ デザイン内でユーザー エンゲージメントを効果的に導く柔軟性が得られます。

テキストアクションを設定する手順

1. ハイパーリンクするテキストを選択します。

2. テキスト エディターのツールバーの [リンク チェーン🔗] アイコンをクリックします。
   

3. URL またはアクションを [ リンク URL...] フィールドに貼り付けます。
   

4. 矢印アイコンをクリックして、リンクを同じタブで開くか、新しいタブで開くかを選択します。

5. カラー ピックr を使用して、ハイパーリンクの色を変更し、デザインに合わせます。

6. 選択したテキストがリンクされている場合は、[ チェーンのリンク解除 ]アイコンをクリックしてハイパーリンクを削除します。

7. ベル アイコンをクリックして、クリック イベント リスナーのリンクを解除します。これは、リンクのクリックによって自動化がトリガーされているが、この特定のリンクをそれらのアクションのトリガーから除外する場合に便利です。コンテンツ内に外部参照、ボタン、または行動喚起を追加する場合に特に便利です。

カスタムアクション:

• #open ポップアップ: テキストをクリックすると、ページポップアップが開きます。

• #submit 形式: このオプションは、テキストをクリックしたときにオプトインフォームを送信します。

• ?next_funnel_step=trueです。 テキストをクリックすると、ユーザーはファネルの次のページにリダイレクトされます。

• #close ポップアップ: このアクションは、すでに開いているポップアップを閉じ、ポップアップを開くアクションの反対として機能します。

• ?page_action=mark_complete: このアクションを追加すると、テキストがクリックされたときにレッスンが完了したとマークされます。

• #scroll-[ID]: リンクまたはテキストアクションを#scroll-[ID]として追加すると、ページ上の指定されたコンテンツにシームレスにスクロールできるようになります。[ID] をコンテナの実際の ID (セクション、行、フレックス、または要素) に置き換えてください。たとえば、セクションのCSSコード領域に移動してgenerate an IDし( 例:#id-6Z-8oepNL-481)、テキストを #scroll-id-6Z-8oepNL-481にリンクして、その特定のセクションをスクロールできます。スムーズなスクロールが正しく機能するには、システムによって生成された ID を割り当てることが不可欠です。そのコンテナにカスタム ID を入力すると、スムーズ スクロール機能が意図したとおりに動作しません。または、カスタム ID が必要な場合はボタンを使用することもできます。

手記：

ClickFunnels には、エディターにリンクされたテキストを追加するために使用できる Link 要素も含まれており、ユーザーはインタラクティブで魅力的なコンテンツを作成できます。この機能は、ページ内の簡単なナビゲーション オプションを提供することでユーザー エクスペリエンスを向上させる場合に特に役立ちます。Link 要素の詳細については、記事 Link: Add Anchor Linksを参照してください。

Click-to-Call リンクと E メールリンクの追加

ClickFunnels を使用すると、テキスト、ボタン、または画像にアクションを追加して、ユーザーが要素をクリックして電話番号に電話をかけたり、電子メールを直接送信したりできます。ユーザーが電話番号リンクをクリックすると、デバイス上でダイヤラー アプリが自動的に開き、番号が事前に入力され、通話の準備が整います。同様に、電子メール リンクをクリックすると、指定された電子メール アドレスが事前に入力されたデフォルトの電子メール クライアントがユーザーのデバイス上で起動します。これらの機能は、ユーザー エンゲージメントを強化し、迅速で手間のかからないコミュニケーションを保証するシームレスな方法を提供します。

• 電話番号リンク: tel:+1234567890 を使用して、クリックして通話アクションを作成します。+1234567890を目的の電話番号に置き換えます。
  

• 電子メールリンク: mailto:email@domain.comを使用して 電子メールリンクを作成します。email@domain.comをターゲットのメールアドレスに置き換えます。
  

これらのリンクは、テキスト、ボタン、画像などのクリック可能な要素に適用できるため、ユーザーは通話や電子メールの機能に簡単にアクセスできます。

コンテナータイトルの変更

1. ページエディタで、コンテナ(セクション、行、Flex、または要素)にカーソルを合わせます。

2. コード<>アイコンをクリックします。
   

3. コードエディタで、 CSS情報 セクションに移動します

4. [タイトル] フィールドに、コンテナの [タイトル] を追加します。
   

   ヒント：

   明確で簡潔な命名規則 ( 例: Section-hero、 Row-slider、 Element-checkout など) は、特定のセクションにスクロールするようにボタン アクションを設定したり、カスタム CSS コード内の要素を参照したりするなど、さまざまなユースケースでコンテナの識別を容易にします。

5. [ 更新 ] をクリックして変更を保存します。