今回はClickFunnelsでカウントダウンタイマーを追加していきます。
今回お届けするノウハウはこちら
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」の使い方でした。
