カートプッシュマニュアル
Update: 2023/12/15
カートプッシュの設定
【目次】
- 概要
- 設定方法
- 設置例
└ 【パターン1⃣カート訪問で開始：実装難易度★】
└ 【パターン2⃣ボタン押下で開始：実装難易度★★】
└ 【パターン3⃣要素の有無で開始：実装難易度★★】
└ 【パターン4⃣ボタン押下で開始v2：実装難易度★★★】
└ 【パターン5⃣複数の同じボタンがあり、いずれかを押下で開始：実装難易度★★★】
└ 【オプション1⃣商品画像をプッシュ通知に反映する：実装難易度★★★】
概要
PUSH ONEカートプッシュはカート離脱したユーザーへの自動リターゲティングツールです。
※ECサイトのカート離脱だけでなく、各種Web申し込みのフォーム離脱にも利用可能です。
カートプッシュの特徴
・1オプトインユーザにつき最大3通までプッシュメッセージを設定できます。
・タイマーで自動配信します。
・深夜帯などプッシュ通知開封の少ない時間帯を外して配信することができます。
設定方法
カートプッシュの利用には「カートプッシュ追加関数」「カートプッシュクリア関数」の2つを実行する必要があります。
また、PUSHONEのブラウザプッシュタグを同ページに実装している必要があります。
設定完了後は、カートプッシュメッセージを作成し、かご落ち・フォーム落ちユーザーへのアプローチを行いましょう。
①カートプッシュ追加関数
<script>
coinsCart.addCart();
</script>
※カートに商品が追加された時に「カートプッシュ追加関数」を実行してください。
※通知許諾済みの該当ユーザーがカートプッシュ配信対象になります。
②カートプッシュクリア関数
<script>
coinsCart.clearCart();
</script>
※カートが空になった時や商品購入完了時に「カートプッシュクリア関数」を実行してください。
※該当ユーザーがカートプッシュ配信対象から外れます。
設置例
※各々を目的に沿ったページに設置します。
※パターン2⃣以降は、サイトに合わせたカスタマイズを要します。
【パターン1⃣カート訪問で開始：実装難易度★】
商品を購入検討している方は基本的にカートページに訪れるであろうと仮定し、
カートページに訪れた場合にカートプッシュのタイマーを作動。
任意の時間後にWEBプッシュ通知でのリマインドが行われる場合の実装例。
①カートプッシュ追加関数
⇒カートページにデフォルト記載のまま設置
■カートページの設置例)
カートページに訪問した時に、カートプッシュ追加関数を実行する。
<body>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
coinsCart.addCart();
})();
</script>
</body>
②カートプッシュクリア関数
⇒商品購入完了ページにデフォルトのまま設置。
■購入完了ページの設置例)
購入完了ページに訪問した時に、カートプッシュクリア関数を実行する。
<body>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
coinsCart.clearCart();
})();
</script>
</body>
【パターン2⃣ボタン押下で開始：実装難易度★★】
特定のボタン「カートに追加する」などをクリックした場合に、カートプッシュのタイマーを作動。
任意の時間後にWEBプッシュ通知でのリマインドが行われる場合の実装例。
①カートプッシュ追加関数
⇒商品ページなどに、カスタマイズを加えたスクリプトを設置。
■商品ページの設置例)
cartButtonが押された時（特定のボタン「カートに追加する」などが押されたとき）に、カートプッシュ追加関数を実行する。
<body>
<button id="cartButton">カートに追加する</button>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
var cartButton = document.getElementById('cartButton');
cartButton.addEventListener('click', function () {
coinsCart.addCart();
}, false);
})();
</script>
</body>
②カートプッシュクリア関数
⇒購入完了ページにデフォルトのまま設置。
■購入完了ページの設置例)
購入完了ページに訪問した時に、カートプッシュクリア関数を実行する。
<body>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
coinsCart.clearCart();
})();
</script>
</body>
【パターン3⃣要素の有無で開始：実装難易度★★】
特定の表示「カートに商品がありません」などの表記があるかないかを識別して、
カートプッシュのタイマーを作動し、任意の時間後にWEBプッシュ通知でのリマインドや
カートを削除などした際にリマインドを停止したりする場合の実装例。
①カートプッシュ追加関数
⇒カートページに、別途カスタマイズしたスクリプトを設置。
（カートページに特定の表示「カートに商品がありません」などの表記がなければ作動する条件でスクリプトを作成）
②カートプッシュクリア関数
⇒購入完了ページにデフォルトのまま設置。
⇒カートページに、別途カスタマイズしたスクリプトを設置。
（カートページに特定の表示「カートに商品がありません」などの表記があれば作動する条件でスクリプトを作成）
■カートページの設置例)
messageEmpty（特定の表示「カートに商品がありません」の表示が）がカートページにない場合に、カートプッシュ追加関数を実行する。
ある場合に、カースプッシュクリア関数を実行する。
<body>
<div id="messageEmpty">カートに商品がありません</div>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
var messageEmpty = document.getElementById('messageEmpty');
if (!messageEmpty) {
coinsCart.addCart();
} else {
coinsCart.clearCart();
}
})();
</script>
</body>
■購入完了ページの設置例)
購入完了ページに訪問した時に、カートプッシュクリア関数を実行する。
<body>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
coinsCart.clearCart();
})();
</script>
</body>
【パターン4⃣ボタン押下で開始v2：実装難易度★★★】
特定のボタン「カートに追加する」などをクリックした場合に、カートプッシュのタイマーが作動し、
任意の時間後にウェブプッシュ通知でのリマインドが行われ、カートを削除などした際にリマインドを停止したりする場合の実装例。
①カートプッシュ追加関数
⇒商品ページなどに、カスタマイズを加えたスクリプトを設置。
（特定のボタン「カートに追加する」などをクリックした場合に、発火する条件でスクリプトを作成）
■商品ページの設置例)
cartButtonが押された時（特定のボタン「カートに追加する」などが押されたとき）に、カートプッシュ追加関数を実行する。
<body>
<button id="cartButton">カートに追加する</button>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
var cartButton = document.getElementById('cartButton');
cartButton.addEventListener('click', function () {
coinsCart.addCart();
}, false);
})();
</script>
</body>
②カートプッシュクリア関数
⇒購入完了ページにデフォルトのまま設置。
⇒カートページに、別途カスタマイズしたスクリプトを設置。
（カートページに特定の表示「カートに商品がありません」などの表記があれば作動する条件でスクリプトを作成）
■カートページの設置例)
messageEmpty（特定の表示「カートに商品がありません」の表示が）がカートページにある場合に、カースプッシュクリア関数を実行する。
<body>
<div id="messageEmpty">カートに商品がありません</div>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
var messageEmpty = document.getElementById('messageEmpty');
if (messageEmpty) {
coinsCart.clearCart();
}
})();
</script>
</body>
■購入完了ページの設置例)
購入完了ページに訪問した時に、カートプッシュクリア関数を実行する。
<body>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
coinsCart.clearCart();
})();
</script>
</body>
【パターン5⃣複数の同じボタンがあり、いずれかを押下で開始：実装難易度★★★】
特定のボタン「カートに追加する」などがページ内に複数個あり、そのいずれかをクリックした場合に、カートプッシュのタイマーを作動。
任意の時間後にWEBプッシュ通知でのリマインドが行われる場合の実装例。
①カートプッシュ追加関数
⇒商品ページなどに、カスタマイズを加えたスクリプトを設置。
■カートに追加するボタンが複数存在する商品ページの設置例
同じページ内に「カートに追加する」ボタンが複数あり、いずれかのボタンが押された時に、カートプッシュ追加関数を実行する。
※下記の例はcartButtonがclassによって指定されている点に留意。
<body>
<button class="cartButton">カートに追加する</button>
<button class="cartButton">カートに追加する</button>
<button class="cartButton">カートに追加する</button>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
var cartButtons = document.getElementsByClassName('cartButton')
Array.from(cartButtons).forEach(function (cartButton) {
cartButton.addEventListener('click',function () {
coinsCart.addCart();
}, false);
});
})();
</script>
</body>
②カートプッシュクリア関数
⇒購入完了ページにデフォルトのまま設置。
■購入完了ページの設置例
購入完了ページに訪問した時に、カートプッシュクリア関数を実行する。
<body>
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="XXXXX"></script>
<script>
(function () {
coinsCart.clearCart();
})();
</script>
</body>
【オプション1⃣商品画像をプッシュ通知に反映する：実装難易度★★★】
以下はカートプッシュをよりリッチなものにするためのオプションとなります。
大型画像の切り替え用のサンプルスクリプトは以下のようになります。
カートのオプションに対して “CART_LARGE_IMAGE_URL” というキーを指定してあげるという形になります。
この"CART_LARGE_IMAGE_URL"は システム側で予約されているキーになります。
<script>
document.querySelectorAll('.cart-button').forEach(button => {
button.addEventListener('click', () => {
var image = button.parentElement.querySelector('img');
coinsCart.addCart({option: {
CART_LARGE_IMAGE_URL: image.src
}});
});
});
</script>
</body>
このサンプルスクリプトは、ウェブサイトの「カートに入れる」ボタンがクリックされた際に、商品の画像をカートに追加し、カート内でその画像を大きく表示するためのものです。
要点:
■ボタンのクリックを検知:
ウェブページ内の全ての「カートに入れる」ボタンを監視し、クリックされた時の動作を定義。
■画像情報の取得:
クリックされたボタンに関連付けられた商品の画像URLを取得。
■カートへの画像追加と大画像表示:
「CART_LARGE_IMAGE_URL」という特別なキーを使って、画像のURLをカートシステムに送信。
「CART_LARGE_IMAGE_URL」というキーはカートシステム側で、予め定義されている特別なキーです。
これにより、通知内で商品画像が表示されます。