今回はClickFunnelsでチェックボックスを使ってオプトインの同意を取っていきます。
今回お届けするノウハウはこちら
オプトインの同意を取る
今ここでは名前やメールアドレスなどの入力フォームの下にプライバシーポリシーのチェックボックスを付けています。もしこれを入れずにやると「チェックが付いていません」というふうに赤い枠が出るようになっています。同時にこの中にプライバシーポリシーのページのURLを埋め込んでいて、クリックすると新しいリンクで開くようになっています。これを作っていきましょう。
Step1. 「CHECKBOX HEADLINE」を挿入する
「ADD NEW ELEMENT」で今回使うのは「CHECKBOX HEADLINE」です。「check」で検索すると出てくると思います。
選択して追加されたら設定していきますが、その前に文字列を変えておきましょう。「プライバシーポリシーを理解し、同意します」という文章を作っておきます。ちなみにこれはもう少し中央に寄せたいと思うかもしれません。私もいろいろ試したのですが、これを中央に寄せるとチェックボックスが離れてしまいます。文字がもう少し長ければいいのかもしれませんが、スマホなどで見たときにうまく表示されていないと困るので、あえて左寄せにしておきます。
そしてまずはリンクを入れておきます。リンクはプライバシーポリシーのページのURLを取ってきます。そうしたら文字を選択してリンクのボタンを押して「#」のところも丸々入れ替え、「#」を先頭に残さないようにします。「Make Link Open In New Window」と書いてあるボタンがあるのですが、真っ白になっているときにクリックすると新しいウィンドウで開いてくれます。デフォルトだと薄い色になっています。これだと同じタブやウィンドウの中で開いてしまうので、必ず新しいウィンドウで開くようにしてください。ここで一旦セーブしておきます。
Step2. SETTINGSタブの「REQUIRED」と「CONTACT FIELD NAME」を設定する
SETTINGSタブのうち、「REQUIRED」と「CONTACT FIELD NAME」の2つが一番大事だと思います。
- REQUIRED：チェックボックスをチェックしないとオプトインやボタンの同意に進めないようにする機能です。私は「Required」をお勧めします。「Not Required」であればチェックボックスを外したままでもフォームを送信できたりします。
- CONTACT FIELD NAME：同意を取ったということをClickFunnelsのお客さんの情報の所に残すことができる機能です。例えば「accepted_terms」と入力してありますが、この文字列にはたぶんスペースを入れないほうがいいと思います。
これはテスト用ですが、「Contact Profile」を見るとチェックボックスを入れたままオプトインした場合は「Accepted Terms」が「true」になり、これで同意が取れたという証明になります。先ほどは「accepted_terms」というふうにアンダーバーが入っていましたが、ここではスペースが入っています。ということはシステムの関係でスペースを入れないほうがいいのではないかと思います。「CONTACT FIELD NAME」は同じ理由で日本語を推奨しません。2バイト文字を入力するとエラーが起こる可能性が高くなるのではないかと思います。例えば「accepted_terms」だと「規約」という意味なので、少し変えて「accepted_privacy_policy」にしておきます。英語でスペースを空けずにアンダーバーなどで処理することをお勧めします。
- EU VISITORS ONLY：GDPRなどの関係で欧州からアクセスした人だけに表示するかどうかを設定します。基本的に日本語で作っているのであれば「No」でいいのではないかと思います。この辺はご自身のビジネスに合わせてみてください。
Step3. SETTINGSタブのその他の項目を設定する
- TOP MARGIN：エレメントの上の余白を調整できます。今回は「10」ぐらいがいいと思います。
- FONT FAMILY：フォントを選択できます。
- FONT SIZE：フォントサイズを選択できます。
- TEXT COLOR：フォントの色を変更できます。
- BOLD COLOR：太字にした部分だけ色を変更できます。
- BG COLOR：色を指定することができます。元に戻したい場合は透明度を最大まで上げて透明の状態にするといいと思います。
- 「ICON COLOR」と「BORDER COLOR」：アイコンはADVANCEDタブで入れることができるのですが、そのアイコンのカラーやボーダーのカラーは「ICON COLOR」と「BORDER COLOR」で指定することができます。
- OPACITY：文字列の透明度を選択できます。今は透明度が0ですが、下に行くにつれて透明になっていきます。チェックボックスをあまり主張させたくないときは「Light Fade」ぐらいがちょうどいいと思います。
- TYPEGRAPHY TYPE：指定したフォントに合うような感じになっているのですが、「TYPEGRAPHY TYPE」はページの中の「TYPOGRAPHY」でコンテンツ用のフォントとヘッドライン用のフォントがあらかじめ指定できるので、「FONT FAMILY」でわざわざ指定しなくても「TYPEGRAPHY TYPE」を設定しておけば「FONT FAMILY」の代わりにコンテンツ内の他と同じようなフォントに合わせてくれるという機能です。「FONT FAMILY」を選択すれば「FONT FAMILY」が優先されます。これもいろいろ試してみてください。
THEMESタブは今回はありません。
Step4. ADVANCEDタブを設定する
STYLESタブからいきましょう。
- LINE HEIGHT：1行だとあまり変わらないのですが、2行以上の場合に行と行の間隔をどのくらい空けるのかを調整できます。これもデザインを見ながらいろいろ試してみてください。
- TEXT TRANSFORM：英文のときに「Uppercase」は全部大文字に、「Lowercase」は全部小文字に、「Capitalize」は先頭の文字だけ大文字にしてあとは小文字にするという機能です。日本語の場合はあまり使わないかもしれません。
- LETTER SPACING：文字と文字の間隔を空けたり狭めたりできます。
- TEXT SHADOW：テキストにドロップシャドウを付けることができます。
- ICON PICKER：アイコンを選択できます。「protect」などで検索してみてもいいかもしれません。
- PADDING：エレメントの上下左右に対して周りの余白を調整できます。この場合はもしかしたら「5px」ぐらいのほうが左がぎちぎちになっていないので気持ちいいかもしれません。
- BORDER RADIUS：下のほうの「BORDERS」「BORDER STYLE」「BORDER SIZE」でボーダーを設定することで曲率を選択できます。
- RADIUS EDGES：「BORDER RADIUS」の適用を四隅にするか、トップだけにするか、ボトムだけにするかを指定できます。
- BORDERS：どこにボーダーを設置するかをいろいろ選択できます。
- BORDER STYLE：実線、ダッシュ、ドットから選択できます。
- BORDER SIZE：ボーダーの太さを選択できます。
- SHADOW：エレメント全体に対するドロップシャドウなどを設定できるかと思うので、いろいろ試してみてください。
次はANIMATIONタブです。上下で大きく分けてあり、基本的には遅れて表示させるディレイという機能を実装することができます。上のほうは1秒以上の比較的大きなディレイを入れることができ、下のほうはミリセカンド単位の比較的小さなディレイを入れることができます。
例えば「TIMED DELAY」で「Fade In」を選択して、ウェビナーの途中でピッチが入ったところで30分15秒のところでふわっと出てくるような仕組みを作ることができます。これに関してはウェビナーの再生からではなく、そのページがロードされてから起算されるようになっています。
下のANIMATIONは「TYPE」に「On Page Load」と「On Page Scroll (becomes visible)」の2つがあります。「On Page Load」は上と同様にページの読み込みを起算点としてディレイを入れます。「On Page Scroll (becomes visible)」は長いセールスページなどをスクロールしていってこのエレメントの所に来た時点から起算して指定した時間で表示します。
まずは「On Page Load」を選択して見ていきます。「STYLE」はいろいろ選んで試してみてください。「DELAY (MS)」はデフォルトで500ミリセカンドになっています。「On Page Scroll (becomes visible)」のほうもページをスクロールしていってこのエレメントの所に来た時点から500ミリセカンドという感じでディレイを入れることができます。
うまくいけばプライバシーポリシーを確認してもらった後にチェックボックスをチェックしてもらってオプトインというふうに使えると思います。そしてちゃんと「Contact Profile」にも同意した履歴が残るという話でした。ぜひ使ってみてください。今回は以上です。
