跳转到主要内容
MuteSix通过购物车弃置通知收入增长182%。Princeton Review转化率提升400%案例研究Evino收入增长12%案例研究。

​
概述

提醒用户他们在购物车中留下的商品是推动转化和恢复丢失收入最有效的方法之一。正确实施后，购物车弃置活动能够带来经证实的结果，如我们的案例研究所示。 本分步指南展示了如何使用OneSignal强大的标记、细分和消息传递工具，通过示例代码实现购物车弃置通知。

​
设置

​
1. 使用标签跟踪购物车活动

使用标签来跟踪用户何时向购物车添加商品。这些标签可以包括产品名称、图片和时间戳：
  • cart_update: 购物车更新时的Unix时间戳
  • product_name: 用于个性化的可读产品名称
  • product_image: 产品图片的直接URL，用于视觉吸引
以下是标记添加到购物车商品的基本示例： 
let productName = "Name of the Product"; // Replace with the name of item
let productImageURL = "https://yoursiteurl.com/image-file.jpg"; // Replace with the url to the image

// Use this example method when user adds item to cart
async function addTagsUponCartUpdate(productName, productImageURL) {
await OneSignalDeferred.push(async function (OneSignal) {
let timestamp = Math.floor(Date.now() / 1000);
await OneSignal.User.addTags({
cart_update: timestamp,
product_name: productName,
product_image: productImageURL,
});
// Call getTags after adding tags
const tags = await OneSignal.User.getTags();
console.log(tags);
});
}

// Call the function, or attach to add to cart button
addTagsUponCartUpdate(productName, productImageURL);
如果用户结账或移除商品，请务必移除标签以避免误报。 购买完成时移除标签： 
//移除购物车标签，在用户购买或从购物车移除商品时调用
async function removeCartTags() {
  await OneSignalDeferred.push(async function (OneSignal) {
    let timestamp = Math.floor(Date.now() / 1000);
    await OneSignal.User.addTags({
      cart_update: "",
      product_name: "",
      product_image: "",
    });
    // Call getTags after removing tags
    const tags = await OneSignal.User.getTags();
    console.log(tags);
  });
}
如果用户在未结账的情况下离开您的网站（弃置购物车），您现在已有足够信息通过个性化的购物车弃置通知来定位他们。

​
2. 创建购物车弃置细分

标签设置完成后，我们需要定位这些用户，并在一段时间后向他们发送消息。在您的OneSignal控制台中，转到受众 > 细分。 细分允许基于收集的数据对订阅进行分组：1 - 他们的购物车中是否有商品，2 - 自从这些商品被留在购物车中已经过了多长时间。
  • 使用最后会话过滤器
  • 使用时间操作符
此细分将包括购物车中有商品且离开网站或移动应用超过1小时的用户。用户向购物车添加商品，然后离开应用或网站，1小时后他们将出现在此细分中。
  1. 选择”用户标签”过滤器
  2. 将cart_update设置为”存在”
  3. 选择”添加过滤器”以创建”AND”关系。
  4. 选择”最后会话”过滤器并设置”大于”1。
  5. 再次选择”添加过滤器”，设置另一个”最后会话”过滤器为”小于”24。（用户将在24小时后离开该细分）。
  6. 将细分命名为购物车弃置1小时（不是必需的，但有助于记忆）。

购物车弃置细分示例

当用户从购物车中添加/移除商品并离开/返回网站时，他们将自动进出此细分。如果您想将时间框架从1小时更改为更长的时间框架，您总是可以稍后回到此细分。如果您想在更长的时间框架后发送不同的消息，细分可以被复制以创建更多并设置不同的时间框架。

​
3. 创建购物车弃置消息

这是我们可以发挥创意的地方！如果您的网站/应用有特定的短语、语言或表情符号，那就使用它们！这些都有助于品牌识别，让用户点击，并促使他们结账。 另外，使用product_name和product_image标签，我们可以将这些数据包含在消息中进行消息个性化。 例如，我们可以说：“嘿，酷猫😸！您的新黄色猫咪水碗正在等着您！“。并在消息中包含商品的图片。 在OneSignal控制台中，转到消息 > 模板，选择”新推送模板”。 模板是创建可重用消息并监控发送和点击次数的方法。
  1. 为模板命名：购物车弃置1小时或您为细分命名的任何名称。
  2. 添加您的标题，例如：嘿，酷猫😸！
  3. 添加您的消息，例如：您的新{{product_name | default: "商品"}}正在等着您！
  • 这里{{product_name | default: "商品"}}将被该标签设置的任何值替换。如果没有设置标签，则使用”商品”。
  1. 将图片设置为：{{product_image}}
  • 这里{{product_image}}将被产品图片的URL替换。如果标签值不是图片的直接链接，则不会显示。
  1. 将启动URL设置为您结账页面的URL
  • 如果结账页面对每个用户是唯一的，我们需要链接到购物车页面（如果不是唯一的）或使用更多标签替换。例如，如果您的结账页面是：https://yoursite.com/username/checkout，我们需要为用户标记user_name标签，这样如果我们使用：https://yoursite.com/{{user_name}}/checkout，他们的用户名就可以被替换

购物车弃置消息示例

**重要提示：**您可以在这些字段中使用任何语言（不必是英语），如果您想添加超过1种语言，只需选择”添加语言”为消息添加您自己的翻译。
  1. 在预览下方，点击”发送测试消息”来测试它的外观！
  2. 完成后点击底部的”保存”。
现在我们的可重用模板已设置完成，我们可以返回消息 > 模板页面来关注此消息的发送和打开次数。您可以创建任意数量的模板，并跨越所有您想要发送的不同渠道。

​
4. 设置购物车弃置旅程

导航到旅程 > 新旅程。

​
旅程设置

  1. 为旅程命名：购物车弃置或任何您喜欢的名称来识别此旅程的作用。
  2. 进入规则：包含细分购物车弃置1小时细分。
  3. 退出规则：勾选当用户不再匹配受众条件时退出。
  4. 重新进入规则：选择是，在一定时间后并设置为1天。

旅程设置示例

  1. 点击保存。

​
旅程步骤

目前进入细分的用户将开始流经旅程。如果他们离开细分，他们将离开旅程，并且在1天过去之前无法重新进入。
  1. 添加推送通知消息步骤，选择购物车弃置1小时模板并保存。

旅程步骤示例

  1. 添加等待步骤，选择1周并保存。
  2. 选择保存并关闭。
您的用户将每8天收到一次个性化的购物车弃置模板（1周等待节点 + 1天重新进入规则），直到他们更新购物车或结账。
您已成功完成最基本的购物车弃置设置！现在您可以创建更多模板，添加更多旅程步骤，消息，并根据需要进行更新！准备就绪时，只需点击设为有效。

​
5. 可选设置购物车弃置性能跟踪

购物车弃置消息设置完成后，您可以通过转到模板查看打开率和点击率来跟踪其表现。 如果您有付费OneSignal账户，您还可以使用结果来跟踪实际带来的收入。 当客户完成付款，在选择”提交付款”按钮时调用以下方法。 
//Example to get the price and total items in cart
// replace ".checkout-price-total" with the class name the element containing the cart's total price
const checkoutPriceTotal = document.querySelector(".checkout-price-total").innerText;
// optional replace ".checkout-items-total" with the class name the element containing the total items in cart to be purchased
const checkoutItemsTotal = document.querySelector(".checkout-items-total").innerText;
//Call this method in the click event for the final button to submit payment
function updateOSOnCartPurchase(checkoutPriceTotal, checkoutItemsTotal) {
  let purchasePriceTotal = parseFloat(checkoutPriceTotal);
  let purchasedItemCount = parseInt(checkoutItemsTotal);
  OneSignalDeferred.push(function (OneSignal) {
    OneSignal.sendOutcome("Purchase", purchasePriceTotal);
    OneSignal.sendOutcome("Purchased Item Count", purchasedItemCount);
  });
}
//example of adding this method to the "submit-payment" button
const submitPurchaseButton = document.querySelector(".submit-payment");
if (submitPurchaseButton) {
  submitPurchaseButton.addEventListener("click", () => {
    updateOSOnCartPurchase(checkoutPriceTotal, checkoutItemsTotal);
  });
}
  • OneSignal.sendOutcome("Purchase", purchasePriceTotal); - 将向OneSignal发送总购买金额，并为在特定时间框架内点击推送或接收推送（受影响）并进行购买的所有客户累积该收入。
  • OneSignal.sendOutcome("Purchased Item Count", purchasedItemCount); - 将向OneSignal发送与直接点击推送进行购买或购买”受推送影响”的客户相关联的购买商品总数。
您现在是OneSignal专家了！您实现了OneSignal产品的深度实现，并准备做更多事情！继续添加我们使用案例中概述的更多最佳实践，或点击以下链接深入了解这些个别功能。
需要帮助？与我们的支持团队聊天或发送邮件至 support@onesignal.com请包含以下信息：
  • 您遇到的问题详情以及复现步骤（如有）
  • 您的 OneSignal 应用 ID
  • 外部 ID 或订阅 ID（如适用）
  • 您在 OneSignal 控制台中测试的消息 URL（如适用）
  • 任何相关的日志或错误信息
我们很乐意为您提供帮助！
⌘I