メインコンテンツへスキップ

概要

このガイドでは、OneSignalでカート放棄リマインダーを実現する複数の方法を説明します。ユーザーがアイテムを残して離脱したときに、カートデータを同期し、メールやプッシュ通知をパーソナライズする方法を学びます。 カート放棄テンプレートは次の方法で実現できます:
  1. API custom_data — メッセージリクエストにカートの詳細をインラインで渡します。
  2. タグ — キーと値のペアを保存してメッセージをパーソナライズします。
  3. カスタムイベントcart_updatedのようなユーザーイベントからJourneysをトリガーします。
  4. データフィード — メッセージ送信時にAPIから直接リアルタイムのカートデータを取得します。
各アプローチはLiquidパーソナライゼーションをサポートし、メールテンプレートとプッシュテンプレートの両方で機能します。

セットアップの例

  • API: custom_data
  • タグ
  • カスタムイベント
  • データフィード
メッセージ作成APIcustom_dataプロパティを使用して、サーバーに保存されているカートデータを挿入します。サーバー側で制御されるカートデータに最適です。custom_dataペイロードの例:
JSON
{
  "custom_data": {
    "cart_url": "https://yourdomain.com/cart",
    "cart": [
      {
        "cartImageURL": "https://i.imgur.com/ssPCfbC.png",
        "cartProductName": "24 Pack of Acorns",
        "cartQuantity": "1",
        "cartPrice": "$12.99"
      },
      {
        "cartImageURL": "https://i.imgur.com/8QWTfV4.png",
        "cartProductName": "Fancy Sweater",
        "cartQuantity": "1",
        "cartPrice": "$9.99"
      }
    ]
  }
}

カート放棄メールテンプレート

このメールテンプレートの例は、Liquid構文を使用してcartアイテムを表示する方法を示しています:
  • カート内のアイテムの合計数
  • ユーザーのカート内のアイテム(以下を含む):
    • 商品画像
    • 商品名
    • 商品数量
    • 商品価格
  • 顧客のパーソナライズされたカートURLへのリンク

カート放棄メールテンプレートの例

メールテンプレートのセットアップ

1

新しいメールテンプレートを作成する

メッセージ > テンプレート > 新規メールテンプレートに移動します。
2

ドラッグ&ドロップエディターを使用する

3

次のように5つの行を作成します:

  • 行1、2、4には、テキストブロックを含む1列があります。
  • 行3には、HTMLブロック | テキストブロック | テキストブロック | テキストブロックの4列があります
  • 行5には、ボタンブロックを含む1列があります

カート放棄メールテンプレートのセットアップ

メールでアイテム数を表示する

Liquid構文を使用して、sizeプロパティを使用して商品数を表示します。 テンプレートの行1のテキストブロック内に、必要に応じてコピーを設定します。例:
We're holding onto {{message.custom_data.cart.size}} items in your cart, but don't wait too long, other squirrels are getting ahead!

メールでアイテムを表示する

Liquid forループを使用して、custom_dataカート配列を反復処理します。テンプレートの行2のテキストブロック内に、{% for product in message.custom_data.cart %}を設定します。これによりforループが開始されます。4列を含む行3では、1列目のHTMLブロックに次のように設定します:
<img src="{{product.cartImageURL}}" alt="Image" style="max-width:100%;" />
2、3、4列目のテキストブロックには、次のテキストを設定します:
  • {{product.cartProductName}}
  • {{product.cartQuantity}}
  • {{product.cartPrice}}
行5のテキストブロックに、{% endfor %}を設定します。forループは、custom_dataに渡すcart配列内の各productをチェックし、列内の各商品の値を表示します。

アイテムを表示するカート放棄メールテンプレートの例

メールにカスタムカートURLを追加する

これはオプションであり、カートが顧客ごとに特定のURLにカスタマイズされている場合にのみ必要です。カートURLを設定する方法はいくつかあります。この例では、custom_data内のカートへの完全なURLを渡します:"cart_url": "https://yourdomain.com/cart"詳細については、動的URLを参照してください。ボタンブロック > コンテンツプロパティ > アクション > URLで、{{message.custom_data.cart_url}}を設定します。

カスタムURL用のカート放棄メールテンプレートの例

メールテンプレートを完成させる

テンプレートのカスタマイズの詳細については、ドラッグ&ドロップでメールをデザインするを参照してください。
準備ができたら、custom_dataプロパティを使用してメッセージ作成 APIリクエスト内でtemplate_idを使用できます。

カート放棄プッシュテンプレート

このプッシュテンプレートの例は、画像と名前を含むユーザーのカート内のアイテムを表示する方法を示しています。また、カート内のアイテムの合計数を表示し、顧客のパーソナライズされたカートURLにリンクします。

カート放棄プッシュテンプレートの例

プッシュテンプレートのセットアップ

プッシュ通知は限られた量のデータでのみ送信できます。カート内のすべてのアイテムをリストする代わりに、最初のアイテムを表示し、合計でいくつのアイテムがあるかを言及します。メッセージ > テンプレート > 新規プッシュテンプレートに移動します

プッシュでアイテムとアイテム数を表示する

Liquid構文は、custom_dataオブジェクトのcart配列内のアイテム数に応じてメッセージの内容を変更するために使用できるif文を提供します。In the template Message field, add the following copy:
{% assign cart = message.custom_data.cart %}
{% assign item_count = cart.size | plus: 0 %}
{% if item_count == 1 %}
You left {{cart.first.cartProductName}} in your cart.
{% endif %}
{% if item_count == 2 %}
You left {{cart.first.cartProductName}} and {{item_count | minus: 1}} more item in your cart.
{% endif %}
{% if item_count > 2 %}
You left {{cart.first.cartProductName}} and {{item_count | minus: 1}} more items in your cart.
{% endif %}
この例では、最初に変数cartcustom_data.cartに割り当て、次に変数item_countcart.sizeに割り当てます。そして、そのカウントが1、2、または2より多い場合、異なるコンテンツを表示します。カートに複数のアイテムがある可能性があるため、firstプロパティを使用してカート内の最初のアイテムを取得します。すでに言及しているため、minus機能を使用してカートアイテムの合計数を1減らします。

プッシュでアイテム画像を表示する

テンプレートの画像フィールドに、Liquid構文を使用して画像URLプロパティを追加します。画像が存在しない場合、画像は表示されません。default画像も設定できます。例:
{{message.custom_data.cart.first.cartImageURL | default: "https://i.imgur.com/ssPCfbC.png"}}

プッシュにカスタムカートURLを追加する

テンプレートの起動URLフィールドに、Liquid構文を使用してカートURLプロパティを追加します。カートが存在しない場合、プッシュはサイトまたはアプリのホームページに誘導されます。テンプレート内の起動URLに関する注意:https://またはx://の形式の他のスキーマを設定する必要があります。データ内でこれを設定する場合は、次のようにLiquid構文のremove機能を使用できます:
  • https://{{message.custom_data.cart_url | remove: "https://"}}

プッシュテンプレートを更新してメッセージを送信する

プッシュテンプレート内で提供されるオプションの詳細については、メッセージの送信を参照してください。
準備ができたら、custom_dataプロパティを使用してメッセージ作成 APIリクエスト内でtemplate_idを使用できます。
Need help?Chat with our Support team or email support@onesignal.comPlease include:
  • Details of the issue you’re experiencing and steps to reproduce if available
  • Your OneSignal App ID
  • The External ID or Subscription ID if applicable
  • The URL to the message you tested in the OneSignal Dashboard if applicable
  • Any relevant logs or error messages
We’re happy to help!