How to set up abandoned cart push notifications with OneSignal and Gumroad

Lee Munroe
6 min readMar 24, 2021

I recently set this up for one of my websites and wanted to share the process of hooking up abandoned cart notifications for a Gumroad store using OneSignal and Zapier so other store owners could take advantage.

Why abandoned cart messaging?

Looking at the numbers, the average cart abandonment rate is just under 70%. Abandoned cart emails have an average CTR of 21%. 50% of those go on to buy. That is pretty substantial.

What exactly is abandoned cart messaging?

A user indicates intent to buy an item you’re selling. But for whatever reason they didn’t complete the purchase. Maybe they changed their mind. Maybe they didn’t realize the total cost. Maybe they got distracted by something. Maybe your tab got lost in their sea of browser tabs.

With abandoned cart messaging, you can reengage that user and remind them to make the purchase.

Why abandoned cart push notifications?

While abandoned cart emails are the more traditional technique, push has its advantages. Push can increase CTR by 50% compared to email. It also means users don’t have to provide their personal info (email) to subscribe, and they receive the message instantly on their device.

Prerequisites and assumptions

  • You have a Gumroad store where you sell a product
  • You have a separate landing page (not Gumroad) where you promote your product e.g. htmlemail.io
  • You have a OneSignal account to send push notifications
  • You have a Zapier account to connect them all together

My website — HTML Email Templates

I sell HTML email templates. It’s a static Jekyll site hosted on Netlify. When a user clicks purchase they are taken to Gumroad where they complete the purchase.

htmlemail.io

I implemented abandoned cart push recently and so far have sent out 25 abandoned cart messages, 3 of which clicked (12% CTR), and converted to a purchase.

Automated messages in OneSignal

Selling email templates is very niche. 3 conversions isn’t a huge amount but if you’re a larger site that has hundreds or thousands of transactions daily, the ROI here could be huge!

How abandoned cart will work with Gumroad

  1. We want the user to subscribe to push notifications on the landing page
  2. If they click to purchase your product then we want to track that click and associate it with the user
  3. If they complete the purchase then we want to track that event and associate it with the user so we know not to send them abandoned cart messages after they purchased
  4. If they don’t complete the purchase then we want to send them a follow up message after a certain amount of time that reminds them to complete the purchase

1. Subscribe to push

Add OneSignal Web SDK to your website. I used the slide down prompt and timed it so it appears after 10 seconds with a few categories users can opt in to. I also follow up with an immediate welcome push message with a 20% discount code.

OneSignal slide down prompt

2. Track click events

I use Google Tag Manager (GTM) to manage event tracking and other scripts.

In GTM add an event that is triggered by your purchase buttons being clicked. Mine looks like this.

OneSignal tags in Tag Manager

We’re using the OneSignal SDK to tag any user that clicks these purchase buttons and the time they clicked.

<script>
var timestamp = Math.floor(Date.now() / 1000);
OneSignal.push(function() {
OneSignal.sendTags({
buyAttempt: ‘True’,
buyAttemptTime: timestamp
});
});
</script>

How subscribers and tags look on the OneSignal side.

OneSignal subscribers with tag values

3. Track purchase event

This is where it gets a bit tricky as we’re tracking between 2 systems. My landing page and Gumroad.

We want to pass the push subscriber’s ID (aka player ID) to Gumroad. To do that, I added the ID to the purchase button URLs as a query param when the user subscribes to push.

So the purchase URLs go from this:
https://gum.co/EpDjtx?wanted=true

To this:
https://gum.co/EpDjtx?wanted=true&pushUserId=12345

Gumroad will see this pushUserId param and remember it for me. Then we can configure a Gumroad webhook to trigger after purchase, and the pushUserId will be sent along with it.

Gumroad ping URL in settings

Now we’re going to set up Zapier. We’ll use Zapier to catch the webhook sent by Gumroad and look for pushUserId.

Zapier flow

We’re going to catch the hook and look for pushUserId.

Then we only want to continue if pushUserId exists.

If it does exist, we’re going to make a custom API request to OneSignal.

The API request will add a tag for this push subscriber “purchased:True”.

4. Send abandoned cart push

Now back in OneSignal we’ll create an automated message. Create a segment. The segment should be users who clicked the purchase button, but do not have the purchase:True tag. And we’ll wait for 1 hour after they left the website (last session).

OneSignal segment filters

Then create a push template that will entice users to make the purchase. Consider offering a discount at this point.

OneSignal message template

Then create an automated message that is triggered by the segment you created and uses the template you created.

OneSignal automated push notification

That’s it. Now you have abandoned cart push notifications for your Gumroad store. If someone clicks “Buy” but they don’t complete the purchase, 1 hour later they’ll receive a follow up push notification.

Don’t have a Gumroad store? Great, it should be even easier to implement abandoned cart push notifications as you don’t have to work across 2 systems and you can easily tag your users when they successfully complete a purchase. Follow this handy abandoned cart guide.

p.s. if you’d like to learn more about how push notifications look on different systems, check out this guide to push notification design and anatomy

--

--

Lee Munroe

Designer Developer in San Francisco. Head of Design @ OneSignal.