メールマーケティングアプリ Klaviyo での登録フォーム作成方法
ECサイト運営者にとってメールマーケティングサービスは必需品とも言えるツールなのではないでしょうか。
外部のメールマーケティングサービスをサイトへ導入する際は「DBとの顧客情報連携、配信方法、登録フォームの設置」など検討すべき点は数多くあります。
本記事では Shopify で人気を集めるメールマーケティングサービス Klaviyo の登録フォーム作成機能について深掘りして行きたいと思います。
Klaviyo はメール配信機能だけでなく、メールマーケティングサービス導入時に負担となる作業を軽減してくれる機能を豊富に持ち合わせています。他の機能や全体のサポート機能など詳しく知りたい方は以下リンクをご確認ください。
Klaviyo で登録フォームを設置する場合、以下２通りの方法があります。
- Klaviyo で作成されるフォームを利用する方法
- Shopify テーマで用意されたフォームを利用する方法
利用中の Shopify テーマに “newsletter.liquid” といったテンプレートがあればそのテンプレートを流用することができます。ただし、この場合は利用テーマの機能に依存する為、任意の場所へ表示させるにはコーディングによる開発コストを必要とします。以下 input タグが記述されている箇所を起点に探すと見つけやすいかもしれません。
<input type="hidden" name="contact[tags]" value="newsletter">Shopify テーマのフォームを利用する場合はテーマ毎に仕様が異なる為、テーマ開発者へご相談いただくのが一番かと思います。
本記事では「Klaviyo で作成されるフォームを利用する方法」を中心に紹介して行きます。
登録フォーム作成手順
1. 登録フォーム作成の準備
Klaviyo では事前に作成した顧客リストへ顧客情報を登録できるフォームをGUI (コーディング作業を必要としない画面操作) で簡単に作成することができます。
まずは左サイドバーより “Signup Forms” を選択します。 “Signup Forms” では作成した登録フォームの一覧を見ることができます。
初めて Klaviyo を利用される方は ”Install Code Snippet” のボタンを押下して Klaviyo とサイトの連携をする為に利用される JavaScript のコードが正しく設置されているか確認してみましょう。
”Verify your installation” のフォームに利用サイトのURLを貼り付けて “Check my Install” ボタンを押下します。
問題なければ次のステップに進みましょう。基本的にShopify管理画面からアプリをインストールしていれば自動で設置されているはずですので問題なく場バリデーションが通るはずです。
もしエラーが表示された場合、”Alternatively, manually install signup forms” を選択すると JavaScript の読み込みコードが表示されるのでそのコードを </body> タグの前に手動で設置してみてください。
次に “Create Signup Form” ボタンを押下してフォームの新規作成を行います。
2. 登録フォームの種類選択
Klaviyo で作成できる登録フォームは大きく以下３種類に分けられます。
- Popup (ポップアップ表示)
- Flyout (フライアウト表示)
- Embed (埋め込み表示)
＊フライアウトとは画面横から飛び出す表現のことです。
一からフォームを作成することもできますが、フォームデザインの雛形が豊富に用意されています。チェックボックスでデザインや機能の絞り込みが可能ですので、理想に近いフォームを選択してカスタマイズすることも可能です。
“Device” という項目では PC とスマホ両方対応させるのかそれとも PC のみ、スマホのみにするのかを絞りこむことができます。
“Goal” では表示させるポップアップの目的をメルマガ登録フォーム用、お知らせ用で絞りこむことができます。
なんとフォームだけではなく、ストアからのお知らせ用途で表示させるポップアップもここで作成することができます。
3. 登録フォームの要素追加・編集
ここでは既存の雛形を使った例をみていきたいと思います。一から作成したい場合は ”Create From Scratch” を選択してください。
気に入ったフォームを選択したらフォーム名とこれから作成するフォームで登録される情報がどのリストに登録させるのかを指定します。
“Name”、”Subscribe List” とも設定ができたら “Create Form” ボタンを押下してください。以下のような画面が表示されればフォーム作成準備は完了です。
【Blocks】
“Blocks” ではフォームを作成する為に必要な部品群が用意されています。追加したい要素があればドラッグアンドドロップで追加と配置調整をすることができます。
デフォルトの雛形では表示テキストが英語になっているのでテキストを日本語に編集してみましょう。運営者が操作する管理画面は英語になりますがユーザーの目に触れる部分は基本的に手動でローカライズすることができます。
編集したい要素をクリックすると左サイドバーに要素内で修正できる項目が表示されます。
文字サイズや文字色、要素間の余白など細かく調整することができます。
ボタン要素の設定ではボタンクリック時のアクションなどを設定することができます。
“Action” にある選択肢の一つ “Submit Form” (登録フォーム) では登録完了時のメッセージ表示方法を設定することができます。
“List to Submit” では連携するリスト先を選択することができます。”After Submit” では登録完了時の処理方法を選択することができます。
【Styles】
“Styles” ではフォームの全体的な体裁を整える為に必要な項目が用意されています。
例えば “FORM SIZE” ではフォームの横幅、中央寄せ、左寄せ、右寄せなどを調整できます。 他にもフォントや文字サイズなど細かく設定できるので好みのデザインになるよう調整してみてください。
【Behaviors】
“Behaviors” ではどのようなタイミングや条件でフォームが表示させるようにしたいのかを設定することができます。
例えば ”TARGETING” の項目では次のような条件を設定することができます。
By Visitor (サイト訪問者ごとの条件)
- Show to all visitors (全ての訪問者に表示)
- Don’t show to existing Klaviyo profiles (Klaviyoに登録されていない人にのみ表示)
- Target visitors in a list or segment (リストもしくはセグメントに登録されている人にのみ表示)
By URL (URLごとの条件)
- Only show on certain URLs (特定のURLでのみ表示)
- Don’t show on certain URLs (特定のURLでのみ非表示)
By Location (ロケーションごとの条件)
- Show to visitors in certain locations (特定の地域でのみ表示)
- Don’t show to visitors in certain locations (特定の地域でのみ非表示)
4. 登録フォームの発行
一通りフォームの調整が完了したら作成したフォームを公開できるようにしていきます。右上に “Publish” ボタンが用意されているので押下します。
Popup (ポップアップ表示)、Flyout (フライアウト表示) であればこの時点でサイトに反映されます。
Embed (埋め込み表示) を選択した場合はここで発行される埋め込み用コードをサイト内で表示させたい箇所に設置する必要があります。
【Shopify 利用の場合】
Shopify利用サイトで登録ページを用意するのであれば、Shopify管理画面より以下の階層まで移動して固定ページを作成します。
Shopify管理画面 ＞ オンラインストア ＞ ページ
固定ページの準備ができたら、埋め込み用コードをコンテンツへ貼り付けましょう。貼り付ける際にHTMLタグを記述できるエディタ設定に切り替えるのを忘れないようにしましょう。
5. 登録フォーム表示の確認
登録フォームの公開まで作業が終わったら実際にサイトへアクセスして表示確認をしてみましょう。
まとめ
Klaviyo での登録フォーム作成方法は本記事で解説したようにほぼコーディングなしで作成することができます。管理画面がまだローカライズされていないのが難点ですが、使いこなせばマーケティング活動において非常に強力なツールとなるでしょう。
ECサイトの立ち上げ、改修でお悩みの方
メーカーのEC立ち上げから大型ECサイトリプレイスまで御社の売り上げ規模、予算、業務フローにあわせたカートをご提案いたします。以下サイトよりお気軽にお問い合わせください。
【参考リンク】
