ショッピングカートやフォームから離脱したユーザーにWebプッシュ通知を配信する方法

  • このエントリーをはてなブックマークに追加
  • Pocket

2016年8月にリリースしたPushnateの新機能「カート・フォーム配信」の導入方法を紹介します。これは、ショッピングカートや入力フォームの途中から離脱したユーザー(カゴ落ち、フォーム落ちしたユーザー)に絞ってWebプッシュ通知を配信できる機能です。

設定は大きく分けて5ステップです。一部省略している箇所もありますので、管理画面内の記載も参照しながら設定してください。なお、すでに独自ドメイン配信の準備ができているWebサイトなら下記ステップの⑤のみで配信できます。

カート・フォーム配信に必要な条件

・導入するWebサイトがSSL環境にあること
・カートやフォームのドメインが別ドメインでないこと(カートやフォーム以降が別ドメインの場合配信できません)

①Pushnateにサイトを登録し、Firebase Consoleからサーバーキーを取得する

Pushnateで会員登録し、「サイト設定」ページからサイト名とURLを登録します。設置環境は「独自ドメイン型」を選択します。
次に、こちらのページを参考にFirebase Consoleからクラウドメッセージング用のサーバーキーを取得し、Google API KEY欄に入力します。Firebaseで発行される「送信者ID」は後で使うのでコピーできるようにしておいてください。

カート・フォーム配信の場合は「独自ドメイン型」を選択する

カート・フォーム配信の場合は「独自ドメイン型」を選択する

②SDKをダウンロードし、サイトに設置する

Pushnate管理画面のメニュー「設置方法(独自ドメイン型)」の中にあるボタンからSDKをダウンロードします。

管理画面内のSDKダウンロードボタン

管理画面内のSDKダウンロードボタン

管理画面内の説明にしたがって、SDKの中にある

  • manifest.json(ファイル内にFirebaseで発行された送信者IDを記載する)
  • pushnateSDK.js

の2ファイルを導入サイトのトップディレクトリにアップロードします。

③プッシュのON/OFFを設定するページを用意する

サイトに来訪したユーザーがプッシュ通知のON/OFFを設定するページを用意します。管理画面内のサンプルコードを参考にHTMLファイルを作成し、トップディレクトリにアップロードします。
サンプルコードはそのまま使うことも可能ですが、自社サイトに合わせたデザインにすると良いと思います。

プッシュON/OFF設定用のサンプルHTML

プッシュON/OFF設定用のサンプルHTML

こちらは、サンプルコードを元にしたPushnate内のプッシュON/OFFページです。

PushnateのプッシュON/OFF設定画面

PushnateのプッシュON/OFF設定画面

④プッシュ許可を取るためのテンプレートを設置する

次に、ユーザーにプッシュ許可を促すテンプレートウィンドウを設置します。管理画面の「テンプレート管理」から説明に沿って設定してください。設定できるのは以下です。

・テンプレート表示位置
・タイトル
・本文
・画像(アイコン)
・遷移先URL(先ほどアップしたプッシュON/OFF用HTMLファイルのURLを設定する)
・テンプレート名

プッシュ通知許可テンプレートの表示イメージ

プッシュ通知許可テンプレートの表示イメージ

画面内にに表示されているテンプレートタグを、テンプレートを表示したいページの</body>タグの直前に貼り付けてください。

⑤プッシュ通知配信条件を設定する

管理画面内「新規プッシュ通知登録」から「カート・フォーム配信」を選択し、通知する内容を設定します。設定できるのは

・件名(商品名を「__NAME__」に置き換えられます)
・本文(商品名を「__NAME__」に置き換えられます)
・遷移先URL(商品ページURLを「__URL__」に置き換えられます。
・アイコン画像(カート内に商品が入っている場合はその画像を表示します)
・カスタムボタン1(テキストとURL)
・カスタムボタン2(テキストとURL)

そして最後に、カートやフォームのページ、および注文や入力完了画面にタグを設定してください。タグは②種類あります。
・「カートタグ」をショッピングカートやフォームのページに設置
・「コンバージョンタグ」を注文完了や入力完了ページに設置

カートタグとコンバージョンタグをサイトに設置します

カートタグとコンバージョンタグをサイトに設置します

ユーザーから見たプッシュ配信の流れ

以上で設定は完了です。サイトに訪問したユーザーから見ると、

・テンプレートタグが設置されたページに訪問、テンプレートが表示される
・タップ/クリックするとプッシュ通知ON/OFF画面に遷移し、プッシュ通知を許可
・ショッピングカートやフォームに遷移
・注文や入力を完了せずにサイトを離脱
・カートやフォームにアクセス後、30分以内に完了していなければプッシュ通知を配信

という流れで配信されます。

コンバージョンポイントがあるサイト運営者の方はぜひ一度試してみてください。機能の要望などもこちらからお待ちしております。

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

スポンサーリンク