【Shopifyアプリ解説：11】アプリ「Klaviyo」を使って再入荷通知メールを設定する方法
Shopifyでメールマーケティングをするアプリとして有名なものに「Klaviyo」があります。こちらのアプリではテンプレートを使ったメールの作成と送信はもちろん、「Flows」という機能を使って自動でメール送信を行うことも可能です。
今回はそのKlaviyoの「Flows」機能を利用して、再入荷通知ボタンを実装する方法をご紹介します。
この記事で解決できること
・再入荷通知を設定したい
・在庫復活時に自動でメールが送信されるようにしたい
再入荷通知メールとは
再入荷通知メールとは、お客様に在庫切れの商品を登録していただくことで在庫復活時にお客様宛にメール通知を送信する機能のことです。
商品の在庫切れが発生した際に、「売り切れ」表示だけでなく再入荷通知ボタンを設置しておくことで、再入荷後に再度購入を促すことができます。
メール配信アプリKlaviyo
KlaviyoはShopifyの中でも特に人気の高いメール配信アプリです。
メルマガの作成や配信、また顧客情報のセグメント化なども自動で行うためセグメントを絞った配信や、より効果の高いマーケティングができます。
月間のメール配信数250件/月であれば無料で利用できるため、お試しでインストールしてみるのもおすすめです。
設定方法
では実際に再入荷通知の設定を行なっていきます。
アプリの埋め込み
最初にKlaviyoアプリを利用する際は、アプリの埋め込みが必要です。
カスタマイズ画面から「アプリを埋め込む」>Klaviyoアプリの埋め込みをオンにし、保存します。
Flowの作成
次に再入荷登録〜メール配信への流れを登録していきます。
「Flows」の画面に移動し、「View All Ideas」を選択します。
「BACK IN STOCK FLOW」を探して選択します。「Create Flow」でフローの作成に進みます。
作成されたフローが以下になります。
これが「Back in Stock」ボタンをクリックすると、顧客のメールアドレスがリストに登録され該当の商品の在庫が復活した際にメールが送信されるというフローになります。
再度の「メールを送る」が最初はマニュアル状態（手動送信）になっているので、自動で送信するために「LIVE」に変更します。
コードの挿入を行う
次に、商品詳細画面に再入荷通知の登録ボタンを実装するコードを挿入していきます。Klaviyoアプリヘルプに記載の手順に沿って実施します。
https://help.klaviyo.com/hc/en-us/articles/360001895651-Install-Back-in-Stock-in-for-Shopify
まずは、「コードを編集」から該当スニペットのインストールを行います。以下、klaviyoヘルプに記載のコードをtheme.liquidにコピー&ペーストします。
コピーしたスニペットは、theme.liquidファイルの</body>直前にペーストします。
その後、APIキーの入力が必要です。
入力箇所は以下です。
APIキーは、Klaviyoの管理画面「アカウント名」＞「Account&billing」
Settings>API Keys で表示される「Public API Key」を入力します。
実際に売り切れ商品を登録し確認すると、「SOLD OUT」ボタンの下に再入荷通知ボタンが表示されていることを確認できました。
テスト操作
実装が完了したら、実際の動作について確認します。
再入荷通知ボタンをクリックすると、モーダルでメールアドレスの入力を求められます。任意のアドレスを入力して再入荷登録をします。
正常に登録された旨の表示となります。
klaviyo側で、登録確認をします。
Flows>先ほど作成した「Back in stock」のフローを選択します。
中央の待機項目を選択すると、「Waiting」に1名ユーザーが登録されていることを確認できます。
選択すると、登録しているユーザーのアドレスが表示されます。
実際に在庫の復活をさせると、先ほど登録したアドレス宛に以下のメールが配信されました。
このメールで、お客様は在庫の復活を確認することができます。
Flowのメール項目をクリックすると、「Delivered」にユーザーが1名移動していることが確認できます。
以上で、再入荷通知ボタンの実装が完了しました！
その他の設定
配信メールの編集
配信されるメールについては、Flowsの画面で設定が可能です。
メール項目を選択し、「Edit」をクリックします。
こちらがメールの編集画面です。内容やタイトルなど自由に変更できます。
右上の「EditEmail」を選択すると、画像の挿入や色なども変更することが可能です。
再入荷通知送信のしきい値
再入荷通知送信のしきい値を設定することも可能です。（●個以上在庫が入荷した際にメールを送信する）
左下のアカウントより「Settings」を選択します。
「Email」を選択し、下までスクロールします。
以下の項目で、再入荷通知を送信するしきい値を設定可能です。
（キャプチャでは、在庫が1以上となった場合にメールを送信）
まとめ
以上で、再入荷通知メールのボタン設置と配信が完了します。
コードの知識がなくても、コピー&ペーストで実施できる内容となっていますので、ぜひ実装してみてください！