今回はClickFunnelsで毎日決まった時刻をカウントダウンするタイマー（Day Timer）を作っていきます。
今回お届けするノウハウはこちら
Step1. 「DAY TIMER」を挿入する
「ADD NEW ELEMENT」をクリックします。タイマーはいくつか種類があるので間違えないようにしてほしいのですが、今回作るのは「DAY TIMER」です。では、設定していきます。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整できます。
- END TODAY AT：何時に対してカウントダウンするかという時間を選択できます。例えば「1 AM」であれば夜中の1時です。ここが今回の肝になるところです。
- TIMEZONE：これが一番大事なところです。「EST」や「PST」など4つのタイムゾーンがありますが、アメリカのタイムゾーンなので日本のタイムゾーンはありません。つまり、例えば「TIMEZONE」で「EST」を選択したら日本のタイムゾーンである「JST」との対応を調べてもらう必要があります。日本時間で夜中の12時にしたい場合は「EST」では何時かがわかると思うので、その時間に設定してください。
- TRANSLATE：「Japanese」があり、選択するとラベルの部分が日本語になります。他の言語も選択できます。
- EXPIRE ACTION：カウントダウンタイマーが0になったときの挙動です。いくつか選択できるのですが、「Redirect To URL」はここで指定したURLに自動的にリダイレクトしてくれます。「Show & Hide Elements」は時間が来たらエレメントを隠してくれるというもので、例えば登録ボタンをなくしたりできます。あとはウェイトリストに飛ばすための代わりのボタンを出したりもできます。あるいは「本日の受付は終了しました」と表示させたりしてもいいかもしれません。
- RE – VISIT ACTION：ページを更新したりもう一度そのページに飛んできたときにどうするかを選択できます。
- Auto Reset Timer：デフォルトではこれになっていて、例えばページを閉じてタイマーが0になった後、もう一回訪れた際に次の日の時間に対してカウントダウンが始まるというふうに、カウントダウンタイマーがずっと動き続けているという感じになります。
- Auto Expire For X Day：これを選択するとブラウザのcookieが覚えていて、タイマーが0になった後、「EXPIRE ACTION」で指定した挙動をどのくらい継続するかを選択できます。
- Hide Timer & Show Section/Row：タイマーがなくなる代わりに別のSectionやRow、エレメントなどを表示することができます。これも「ESPIRRE COOKIE (DAYS)」で日数を指定できるのでやってみてください。これもいろいろ設定した後は必ずチェックすることをお勧めします。
- FONT FAMILY：フォントを選択できます。
Step3. THEMESタブを設定する
THEMESタブにはプリセットのデザインがいろいろあるので、色合いなど好きなものを選んでください。
Step4. ADVANCEDタブを設定する
STYLESタブから見ていきましょう。
- SIZE：サイズを変更できます。
- ALIGN：左右の場所を選択できます。
- LABEL WEIGHT：ラベルの部分の太さを選択できます。太いほうが見やすいと思います。
- LABEL COLOR：「Black – subtle」が選択してありますが、「White – subtle」も選択できるのでページに合わせてください。
最後はANIMATIONタブです。これは他のエレメントでも説明していることですが、ページが表示されてから少し遅延してディレイを表示することができるものです。上のほうは1秒以上の比較的大きなディレイを表示することができ、下のほうはミリセカンド単位の時間の短いディレイを表示することができます。
上のほうの「TIMED DELAY」はディレイで表示させるときの効果を選択できます。これもいろいろと試してみてください。
「MINUTES」と「SECONDS」でどのくらいディレイさせるかという時間を設定できます。例えば60分のウェビナーで30分ぐらいからピッチが始まるような場合によく使います。これはページを表示してからなので動画の再生が遅れた分はカウントしてくれないのですが、「MINUTES」を「30」、「SECONDS」を「15」にするとページの読み込みから30分15秒ディレイさせて表示してくれます。
下のほうはJavaScriptでいうLazy Loadingのような効果が得られます。「TYPE」はページがロードされてから起算する「On Page Load」とページをスクロールしていってエレメントの場所まで来てから起算する「On Page Scroll (becomes visible)」の2つがあります。
「On Page Load」のほうを見ていきます。スタイルを選択でき、ディレイの時間はミリセカンド単位で指定できます。「DELAY (MS)」が「500」で0.5秒です。「On Page Scroll (becomes visible)」のほうも同様です。今回は以上です。
