今回はClickFunnelsのショートコードを使ってボタンやテキストにアクションを設定していきます。
今回お届けするノウハウはこちら
ClickFunnelsのショートコードとは
ClickFunnelsにはショートコードがあって、アクションの設定のところとは別にテキストを挿入することによって、ボタンやテキストにアクションを設定することができます。ショートコードの種類は3つです。
- どこでも使えるもの
- オーダーフォーム、OTOページ・オンリーのもの
- メンバーシップエリア・オンリーのもの
どこでも使えるショートコード
- #submit-form
- #open-popup
- #close-popup
- tel:+123456789
- mailto:email@domain.com
オーダーフォーム、OTOページ・オンリーのショートコード
- #yes-link
- #no-link
メンバーシップエリア・オンリーのショートコード
- /members/sign_out
Step1. サブミットフォーム
- サブミットフォーム
まず、「どこでも使えるもの」のサブミットフォームの例です。例えばウェビナーの「registration」のページはこのような感じになっていると思います。ここにサブミットフォームのポップアップの中にEメールアドレスと名前を入れてフォームをサブミットするところがありますが、普通にボタンで設定すると「SUBMIT ORDER / SUBMIT FORM」が設定できます。
これをテキストでやりたい場合は、テキストを作ってこの中にリンクとして「#submit-form」というショートコードを入れればいいわけです。これでボタンと同じ機能を持たせることができます。
ボタンの場合は「SUBMIT ORDER / SUBMIT FORM」で設定することもできますが、「GO TO WEBSITE URL」に先ほどの「#submit-form」をペーストして確定すると、「SUBMITS THE PAGE」という同じ表示が出ていると思います。もう一度確認してみると、自動的に「SUBMIT ORDER / SUBMIT FORM」の項目が選択されています。
Step2. オープンポップアップ・クローズポップアップ
- オープンポップアップ
次はオープンポップアップです。本来はボタンがポップアップのオープンのボタンになっていますが、これをテキストでやりたい場合は、ここにショートコードをリンクとして挿入するとオープンポップアップにすることもできます。
- クローズポップアップ
クローズポップアップも同様です。ポップアップを出して、ここでももちろんユーザーがバツボタンでクローズできますが、さらにテキストまたはボタンでポップアップをクローズしたい場合は、このテキストに同じく「#close-popup」のショートコードを入れて代替することができます。
Step3. スクロールタイトル
- スクロールタイトル
次はスクロールタイトルです。例えばセールスページか何かで「Section1」「Section2」「Section3」というふうに長いセクションが並んでいて、「Section2へ移動する」というボタンを押して「Section2」に移動したいという場合があります。
もしショートコードを使わずにやるとすると、アクションの設定の「SCROLL TO ROW / SECTION ON PAGE」にRawがいろいろと表示されていて、正直どれがどれだかわからなくなることがあります。なので、ここでショートコードを使うと飛ぶ先のセクションを指定しやすくなります。
これを使う場合は、「#scroll-title」の後ろの「title」の部分をセクションの名前に替えてペーストすることによって移動するショートコードを作ることができます。
セクションのタイトルを設定していきましょう。セクションのセッティングから「GET CSS INFO」を選択すると「CSS Info:」で「Title:」が出てきます。
これを今回は「section2」としてアップデートしていきましょう。タイトルはそれぞれ個別に違うタイトルを付けなければいけないので、重複するタイトル名は付けられません。
では、これをコピーしておきましょう。そして、ボタンのところに「SET ACTION」から「GO TO WEBSITE URL」でショートコードを設定していきましょう。今回は「#scroll-」の後ろに先ほどコピーした「section2」を入れて「#scroll-section2」と設定し、戻ってセーブします。
プレビューしてみます。ボタンを押すと先ほどの「Section2」のところに飛びます。
Step4. 電話リンクとメールリンク
「どこでも使えるもの」のあとの2つは比較的わかりやすいと思います。「tel:」は電話です。「+」なので、国番号と「0」を抜いた電話番号です。メールのほうはなじみがあると思います。「mailto:」でEメールアドレスを入力します。
Step5. 「Yesリンク」と「Noリンク」
次はオーダーフォーム、OTOページです。ClickFunnelsにはワンクリックアップセルがあって、1つ商品を購入した後にワンクリックでアップセルを購入できるOTOページを作ることができます。
そのときに「Yesリンク」「Noリンク」というものがあります。「Yesリンク」を押すとアップセルを購入することができます。「Noリンク」は「アップセルを購入しない」というボタンを作ることができ、ダウンセルにつなげることができます。
- 「Yesリンク」
ボタンを見てみると、「YES LINK FOR OTO」となっています。同じリンク機能をテキストに付けたい場合は、ここのテキストに挿入されている「#yes-link」というショートコードで実現することができます。
- 「Noリンク」
同じく「いいえ」というテキストががリンクになっています。ダウンセル用の「Noリンク」のショートコード「#no-link」でテキストにその機能を持たせることができます。
Step6. メンバーシップエリアのサインアウト
- メンバーシップエリアのサインアウト
最後にメンバーシップエリアのサインアウトです。例えばある商品のメンバーシップエリアを作ったとします。そこからログアウトしたいという場合は、テキストに同じくショートコードを付ける場合と、ボタンにショートコードを付ける場合の2つができます。
- テキストにショートコードを付ける場合
- ボタンにショートコードを付ける場合
この挙動を見てみましょう。「ログアウト」を押すとちゃんとログアウトできています。以上です。
