今回はClickFunnelsであらかじめ決まった時間をカウントダウンする方法を説明します。
今回お届けするノウハウはこちら
「MINUTE TIMER」とは
ClickFunnelsのタイマーは何種類かあり、例えば24時間を毎日カウントダウンするようなタイマーもあります。これについては別の動画で説明しているのですが、今回作るのは例えば1時間、30分、15分というふうにあらかじめ決まった秒数、分数をカウントダウンしてくれるタイマーで「MINUTE TIMER」という機能です。何も設定しないと例えば今見ているページを更新した場合に設定した30分に戻るのですが、もう一回更新するとまた30分に戻ります。この辺の挙動も変更することができるのでやっていきます。
Step1. 「MINUTE TIMER」を挿入する
「ADD NEW ELEMENT」で今回は「MINUTE TIMER」を使います。先ほど言った毎日X時をカウントするものは「DAY TIMER」です。「COUNTDOWN 2.0」はまた別の機能があるので、別の動画を見てください。「MINUTE TIMER」を選択して挿入されたら設定していきます。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整できます。
- 「HOURS」「MINUTES」「SECONDS」：カウントダウンする時間を指定できます。今回は30分に指定しておきます。
- TRANSLATE：ラベルの言語を変更できるので、日本語にしておきます。
- EXPIRE ACTION：カウントダウンが0になったときの挙動をどうするかというものです。いくつかあるのですが、「Redirect To URL」はここで指定したURLに自動的にリダイレクトしてくれるという機能です。「Show & Hide Elements」は例えばタイマーの下に申し込みボタンがあるような場合にそれを隠したり、カウントダウンが0になった瞬間に他のページやメーリングリストに登録するボタンやフォームを出したりする設定ができます。
- HIDE THESE：複数選択できるので、ボタンやフォームなどのエレメントにチェックを付けて複数のエレメントを隠すことができます。
- SHOW THESE：「HIDE THESE」とは逆に、タイマーが0になった際に表示したいエレメントを選択できます。この下に“「SHOW THESE」で設定したものはタイマーがまだ動いている状態のときは消えています”という注意書きが書いてあります。
- RE – VISIT ACTION：最初にお見せしたようにページを更新し直したり、もう一度そのページに戻ってきたときのタイマーの挙動です。
- デフォルトは「Auto Reset Timer」になっているので、30分に設定していた場合は例えば残りが1分になっていてもリロードした瞬間に30分に戻るようになっています。
- あとの2つはCookieを使って途中まで覚えていてくれるという機能です。「Auto Expire For X Days」は「EXPIRE COOKIE (DAYS)」に入力したカウントダウンの時間を覚えていてくれるという機能です。「Hide Timer & Show Section/Row」は残り時間の有無に関わらずタイマーを隠して他のSectionやRowを表示するという機能です。これも「SHOW THIS」で何を表示するか選択できます。これはリビジットしたときに表示するエレメントのことです。例えば「EXPIRE COOKIE (DAYS)」が7日間であれば1週間はこの設定を覚えていてくれて、1週間たったらまた指定した時間に戻るという感じの挙動になります。この辺は少しややこしいかもしれませんが、必ずご自身でテストしてみることをお勧めします。
- FONT FAMILY：フォントを選択できるもので、他のエレメントと共通しています。
Step3. THEMESタブを設定する
デザイン不要でいろいろな形が出てきます。今回は赤だときついのでシンプルな黒のデザインにします。このようにワンクリックですごくいいデザインを選ぶことができます。
Step4. ADVANCEDタブを設定する
STYLESタブから見ていきます。
- SIZE：全体のサイズを選択できます。「Large」にして見やすくしておきます。
- ALIGN：左右の位置を変更できます。
- LABEL WEIGHT：ラベルの部分の太さです。見やすく「Bold」にしておきます。
- LABEL COLOR：「Black – subtle」になっていますが、「White – subtle」だとこのような感じになります。
次はANIMATIONタブです。
他のエレメントでも説明したことがありますが、ページがロードされてから若干遅れてエレメントを表示させることができます。上は1秒以上の比較的大きなディレイを表示することができ、下はJavaScriptでいうLazy Loadingのような考え方になるのですが、指定したミリセカンドごとのディレイを表示することができます。
上の「TIMED DELAY」は「Fade In」と「Fade In With Scale」の効果があり、どちらがいいかは実際にやってみたほうがわかりやすいと思うので、いろいろ試してみてください。
「MINUTES」と「SECONDS」で時間を設定できます。例えば90分に設定すれば1時間半になるので、「HOURS」がなくても心配しないでください。これは例えば60分のウェビナーに対して30分で表示したいという場合によく使います。「MINUTES」を「30」、「SECONDS」を「15」にして30分15秒に指定することもできます。これは起算点に注意してほしいのですが、ウェビナーの所に入れた場合もウェビナーを再生したときからではなくて、ページをロードしたときから指定した時間でディレイを入れて表示するという感じになるので、この辺は挙動を確認してください。
「ANIMATION」はミリセカンド単位でしたね。「TYPE」の「On Page Load」を見ていきます。「STLYLE」は「TIMED DELAY」よりも選択肢があるのでいろいろ試してみてください。「DELAY (MS)」はデフォルトで500ミリセカンドになっています。「On Page Load」はページの読み込みから起算した短めのディレイです。
「On Page Scroll (becomes visible)」は例えば長いセールスレターなどでこのタイマーの場所に来たときから起算するというもので、ディレイの起算点を変えることができます。こちらも「STYLE」と「DELAY (MS)」を変更できます。今回は以上です。