カウントダウンタイマーを作成して埋め込む方法

ClickFunnels のカウントダウン タイマーを使用すると、緊迫感を生み出し、視聴者に即時の行動を促すことができます。このドキュメントでは、カウントダウンタイマーを作成してメールキャンペーンに埋め込む方法について説明します。

必要条件

• ClickFunnels Scale, Optimize or Dominate plan

• The Countdown Funnels app added to your workspace

カウントダウンタイマーの概要

カウントダウン タイマーは、特定の日付または時刻へのライブ カウントダウンを表示するカスタマイズ可能な要素です。イベント、締め切り、またはキャンペーンに関連する重要な瞬間までのカウントダウンに使用できます。

ファネル ページや電子メールでカウントダウン タイマーを使用してリアルタイムの更新を提供し、重要なマイルストーンまでの残り時間を視聴者に常に確認できるようにすることができます。

新しいカウントダウンタイマーの作成

1. 左側のメニューで [ アプリ ] に移動し、[ カウントダウン ファネル] を選択します。

2. [カウントダウン ファネル] メニューで、[ カウントダウン タイマー] をクリックします。

3. 右上隅にある [カウントダウン タイマーの作成 ] ボタンをクリックします。
   

4. イベントを作成したら、イベントの種類や詳細などの設定を調整します。詳細な説明はSetting Up the Countdown Event項目を参照 。

カウントダウンタイマーの設定

名前

カウントダウン タイマーに一意の名前を付けて、後で簡単に識別できるようにします。

有効

このオプションを切り替えて、タイマーを有効または無効にします。無効にすると、タイマーは目標到達プロセスやメールに表示されません。

全般

このセクションを使用して、タイマーのコア外観を設定します。

• カウンタのフォントサイズとフォントの色を調整して、タイマーの外観をカスタマイズします。

• 先頭のゼロを有効または無効にします(例:「03」と「3」の表示)。

ラベル

このセクションでは、時間ラベルの表示とスタイルを調整するのに役立ちます。

• 日、時間、分、秒のラベルを表示または非表示にします。

• フォントサイズとラベルの色をカスタマイズします。

• 必要に応じて、時間単位ごとにカスタムラベルを定義します(例:「日」や「時間」)。

バックグラウンド

タイマーの背景をカスタマイズして、ページ デザインとの視覚的な整合性を高めます。

• 背景色とマットカラーを設定します。

• 必要に応じて、 背景画像 をアップロードします。

• コーナー半径を調整して、タイマーのエッジを丸めます。

満了

このセクションを使用して、タイマーがゼロに達したときの動作を制御します。

• 有効 期限モード を選択して、ゼロを表示したり、タイマーを非表示にしたり、メッセージを表示したりします。

• カウントダウンが終了したときに表示するカスタム の期限切れメッセージ を追加します。

プレビュー

プレビューパネルには、カウントダウン中と有効期限が切れた後の両方でタイマーがどのように表示されるかをライブビューで表示できます。

埋め込みコード

タイマーを埋め込むための HTML コードを生成します。

• イベントメール: このオプションは、タイマーをメールワークフローのカウントダウンイベントと同期させます。

• 固定日時: このオプションを使用して、ページに埋め込むための特定の有効期限の日時を設定します。

タイマーの設定が完了したら、[ カウントダウン タイマーの作成] をクリックして変更を保存します。

カウントダウンタイマーの埋め込み

タイマーを作成したら、メールやページに埋め込むことができます。

メール埋め込み

イベントメール埋め込みコードを使用すると、メールにライブカウントダウンタイマーを含めることができます。この機能により、登録者はイベント開始時刻までのリアルタイムのカウントダウンを確認できるため、常に最新の情報を入手し、イベントの準備を整えることができます。イベント登録に基づくワークフローを通じて問い合わせがトリガーされると、カウントダウンタイマーは動的に調整され、イベントの残り時間が表示されます。

メールの埋め込みを設定するには:

1. ファネルを作成する: ファネルにカレンダー イベントが添付されたページが含まれていることを確認します。
   カウントダウンカレンダーイベントをファネルステップに添付する方法の詳細については 、記事How to Add a Countdown Calendar Event in a Funnel Stepをご覧ください。
   

2. ワークフローを設定する: 「カレンダー イベント - 連絡先が登録済み」というイベントでトリガーされるワークフローを作成します。
   
   ワークフロートリガーの詳細については、 記事How to Manage Workflow Triggersを参照してください。
   

3. ファネルの選択: コンタクトがイベントに登録するファネルを選択します。

4. メールを編集する: ワークフロー内でメール エディターを開きます。

5. HTML 要素を挿入する: HTML ブロックを電子メール エディターにドラッグ アンド ドロップします。

6. 埋め込みコードを貼り付ける: カウントダウン イベント設定から埋め込みコードをコピーし、HTML エディターに貼り付けます。
   

7. 保存して公開: メールを保存し、ワークフローを公開します。

メールが送信されると、 イベント埋め込みコード にイベントまでの残り時間が自動的に表示されます。このアプローチにより、各受信者に対してパーソナライズされた正確なカウントダウンが保証され、行動の可能性が高まります。

手記：

イベントメール埋め込みコードは、「Send Email」ステップを使用してワークフローを介してメールが送信され、「カレンダーイベント - 連絡先登録済み」イベントによってトリガーされた場合にのみ機能します。ブロードキャストメールやClickFunnelsの外部から送信されたメールでは機能しません。

ページへの埋め込み

1. タイマーエディターの埋め 込みコード セクションに移動します。

2. [ 固定日時] を選択して、タイマーの特定の有効期限の日付と時刻を設定します。このオプションを使用すると、タイマーをページに表示できます。
   

3. 提供された HTML コード スニペットをコピーします。

4. ページ エディターに移動し、目的のページを開きます。

5. HTML/カスタム JS 要素をページに追加します。

6. 埋め込みコードをエディターに貼り付けます。埋め込みコード内のテキスト?end=2025-01-25 20:56"を編集して、カウントダウンの日時を調整します。
   

7. ページを保存してプレビューし、タイマーが正しく表示されていることを確認します。

ページエディタでのコードの埋め込みの詳細については、記事 Embedding Third Party Embed Codeを参照してください。

手記：

ClickFunnels には、ページ エディターに カウントダウン 要素機能が含まれており、特定の日付までのカウントダウンを表示できます。ページエディタでカウントダウン要素は、カウントダウンタイマー機能の代わりに使用できます。カウントダウン要素の詳細については、記事 Countdown: Display a Countdown Timer on Your Pageを確認してください。

既存のカウントダウンタイマーの編集

1. カウントダウン ファネル アプリの [カウントダウン タイマー] メニューに移動します。

2. 編集するタイマーを見つけて、歯車⚙️アイコンをクリックします。

3. タイマーの詳細に必要な変更を加えます。

4. [ カウントダウンタイマーの更新] をクリックして、変更を保存します。

カウントダウンタイマーの削除

1. カウントダウン ファネル アプリの [カウントダウン タイマー] メニューに移動します。

2. 削除したいタイマーを見つけて、 ゴミ箱🗑️アイコンをクリックします 。
   

3. ポップアップダイアログで削除を確認します。

警告：

カウントダウンタイマーの削除は永続的なアクションであり、 元に戻すことはできません。不要になった正しいタイマーを削除していることを確認してください。