• Skip to primary navigation
  • Skip to main content

石崎力也のコンサルティング「いしこん」

年収1000万円以上のネットビジネス経営者を対象にデジタルコンテンツの販売方法とマーケティングオートメーションの導入方法に関する情報を発信するブログ。

  • いしこん 2.0
  • 無料ウェビナー
  • もう1本読む?
    • オンラインコース(講座)ビジネスの作り方・やり方
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • 会員制サイトの作り方とサブスクリプションの導入方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • ログイン
    • 新規登録はこちら
    • アカウントを持っている
  • Show Search
Hide Search
現在の場所:ホーム / ClickFunnels / 5-5 ClickFunnelsでカウントダウンタイマーを設置する (Countdown 2.0)

5-5 ClickFunnelsでカウントダウンタイマーを設置する (Countdown 2.0)

Last updated on 2021年4月14日 By 石崎 力也

今回はClickFunnelsでカウントダウンタイマーを追加していきます。

今回お届けするノウハウはこちら

  • ClickFunnelsの3つのカウントダウンタイマー
  • Step1. Auto Webiner Funnel以外のCountdown 2.0の挙動
  • Step2. Auto Webiner FunnelにおけるCountdown 2.0の挙動
  • やり方を動画で見る

ClickFunnelsの3つのカウントダウンタイマー

ClickFunnelsには3つのカウントダウンタイマーがあります。

  • Day Timer:毎日X時に向けてカウントダウンしてくれるものです。
  • Minute Timer:ページを開いてからX分後かをカウントダウンしてくれるものです。
  • Countdown 2.0:指定した日時に向けてカウントダウンしてくれるものですが、Auto Webiner Funnelとそれ以外のFunnelで挙動が変わります。

今回はCountdown 2.0を扱います。すると例えば15分ごとのAuto Webinerを設定している場合は15分ごとにカウントダウンしてくれます。それ以外のFunnelに関しては「何月何日の何時」というふうに日時を指定する形でカウントダウンを設定できます。では見ていきましょう。

Step1. Auto Webiner Funnel以外のCountdown 2.0の挙動

まずは普通のFunnelを用意しました。これはAuto Webiner Funnelではありません。今、「EDIT PAGE」で「Sales Page」に入ったとします。そうするとこういう画面を用意してあるので、ここに「ADD NEW ELEMENT」でタイマーを追加していきます。今回は「COUNTDOWN」の所にある「COUNTDOWN 2.0」を追加します。そして追加されたタイマーを設定していきます。

  • TOP MARGIN:このエレメントの上の余白の幅を調整できます。
  • END DATE:日付を指定する所です。
  • END TIME:「END DATE」で指定した日付の何時かを指定できます。
  • TIMEZONE:これが一番の肝です。この中に4つのタイムゾーンがあるのですが、日本標準時( JST )はありません。「EST」など、米国のタイムゾーンが4つ並んでいます。つまりこれを使う場合には米国時間になるということなので、日本で使う場合には少し挙動に注意が必要かもしれません。十分にテストして使ってみてください。
  • TRANSLATE:「DAYS」や「HOURS」と表示されている所の各言語を選択できます。「Japanese」が使えるので「Japanese」を選択するといいかもしれません。
  • EXPIRE ACTION:タイマーが0になったときの挙動を選べます。
    • 「Redirect To URL」であれば、下の「REDIRECT URL」に入力した所にリダイレクトをかけてくれます。
    • 「Show & Hide Elements」にすると、下のほうでタイマーが0になったときにどのエレメントを隠してどのエレメントを表示するかを選べるようになります。

次は「CUSTOMIZE DISPLAY」です。今は「DAYS」「HOURS」「MINUTES」「SECONDS」が表示されているのですが、もっと大きい単位で例えば何カ月、何年というカウントダウンもできます。反対に秒数のカウントがうるさく感じる場合には「SECONDS」をなくしてもいいかもしれません。

  • FONT FAMILY:普通にフォントを選ぶような感じになります。
  • TIME UNITS COLOR:カウントダウンの数字の色を変更できるので、これを赤にしてみます。
  • LABEL COLOR:「DAYS」や「MINUTES」の文字の色を変更できるので、緑にしてみます。このような感じで設定できます。

次はTHEMESタブです。テーマに関してはClickFunnelsがあらかじめ用意してくれているプリセットがあります。デザイン要らずですごく手軽に使うことができます。

次はADVANCEDタブです。

  • STYLESタブの「SIZE」に関しては標準で「Medium」が表示されています。「Large」にしたり「Small」にしたりできます。「Large」がけっこう見やすいと思います。
  • ALIGN:「Left」「Center」「Right」を選択できます。
  • LABEL WEIGHT:「SECONDS」などの表示されている単位の文字の太さを選択できます。「Normal」だと少し細いような感じがするので、「Bold」にするとすごくよく見えるかもしれません。

次はANIMATIONタブです。これに関しては各エレメントやセクションで共通しているので他の動画でもかぶっていますが、「TIMED DELAY」に関しては1秒よりも大きいディレイを挿入するときに設定します。例えばウェビナーを表示していて30分経過してからタイマーを出したい場合は、「TIMED DELAY」を「Fade In」にして「MINUTES」に「30」と入力します。「SECONDS」に「15」を入力して「30分15秒」という設定もできます。

「ANIMATION」に関してはもっと細かいミリセカンドごとのディレイの表示ができます。よくjQueryやJavaScriptで「Lazy Loading」という画像の遅延読み込みを設定するものがありますが、それと一緒です。画像がいっぱい並んでいるときに画像を遅らせて表示させることで負荷を軽減させることもできます。これも2種類選択できます。「On Page Load」はページがローディングされてから起算する秒数です。「On Page Scroll (becomes visible)」であれば、スクロールして該当の所まで来たときからカウントが始まります。

Step2. Auto Webiner FunnelにおけるCountdown 2.0の挙動

例えば今、15分ごとのウェビナーを設定している場合、次のウェビナーはPM4:00で残りが1分半あるという表示になっています。このような感じでカウントダウンされます。

ということで、「Webinar Confirmation」のページに「Countdown 2.0」のエレメントを追加していきます。同じ「Countdown 2.0」のエレメントを追加するのですが、設定画面に行くと先ほど表示されていた日時の設定などが丸々できなくなっています。これは先ほど言ったとおり15分ごとや20分ごとに設定されているAuto Webinerの時間に合わせてカウントダウンするので、ここの部分が丸々選べなくなっています。「TOP MARGIN」や「FONT FAMILY」は普通に選べますし、「THEMES」や「ADVANCED」のタブも先ほどと一緒です。以上が「Countdown 2.0」の使い方でした。

やり方を動画で見る

ClickFunnels(クリックファネル)の使い方・操作方法の一覧ページに戻る

Filed Under: ClickFunnels

知っていることはお金になる…1度限りのウェビナーをご用意しました。視聴する

石崎力也のコンサルティング「いしこん」

Copyright © 2022 · Rikiya "Sales Funnel" Ishizaki