AfterShip Review: Automated Order Tracking for E-Commerce

Developers dealing with e-commerce should always be aiming at two crucial goals.

  1. Providing merchants the tools they need to run their business smoothly.
  2. Creating unique and seamless shopping experience for customers.

This applies to every step of the buying process.

And I know that shipping can be a hassle for merchants & customers alike.

For my own e-commerce business, Neon Popsicle, I decided to act on it and offer a better client experience when it comes to delivery, using AfterShip.

This automated tracking tool came with a lot of benefits for me as the merchant as well.

Disclaimer: the author & Snipcart do not have any kind of affiliate referral revenue or partnerships with AfterShip. We genuinely think it's a cool tool to add to your e-commerce stack.

Here I want to review AfterShip, presenting its benefits, and showcase my AfterShip integration on a Metalsmith static site. I'll cover these simple steps:

  • Create webhooks in Snipcart.
  • Handle the webhooks callback with Google Cloud Functions.
  • Query AfterShip's API.

AfterShip review: what is it exactly?

AfterShip is an e-commerce tracking solution that offers advanced package tracking features.

aftership review

Some of its main features include:

  • Automated shipment tracking
  • Analytics for delivery performance
  • Proactive updates through notifications
  • Custom tracking page for customers

It's particularly useful if you use multiple couriers for shipping as they automatically detect the courier from the tracking number.

It's also convenient if you're building your own app and want an easy way to get tracking data from couriers into your app or site. Plus, it's great if you ship via EMS or your local postal service across borders.

AfterShip will track 100 packages per month for free, and for just $0.10 per package you get the full-service offering, added notifications and a custom domain tracking page that you can link your customers to in your shipment notification email.

It automatically merges tracking data from both the departure country (ex. EMS, China Post) and destination country (ex. USPS, Canada Post, Swiss Post etc.) onto one page.

Aftership Dashboard

Personal AfterShip use case

With my use case, Snipcart sends a tracking number first, then AfterShip sends notifications for tracking it the rest of the way. Users who buy on my Snipcart shop are constantly updated at every step of the shipping process. Perfect for building trust and managing expectations!

I wanted to get an idea of the average delivery time from oversea shipping so I could provide better shipping estimates. AfterShip analytics provides this kind of insightful data.

I also wanted to offer better tracking services to my customers than what my courier (EMS) offers. It's nice to be able to check the delivery status of all my customer deliveries in one place, and get notifications if any fails to be delivered or gets lost in transit.

Integrating AfterShip into my Snipcart store only took about 30 minutes. My workflow for shipping is that after I receive a tracking number from my courier, I paste it into the appropriate Snipcart "shipped" tracking number field.

AfterShip integration

Automated tracking with Snipcart webhooks

Let's see how we can create a webhook that will automatically send that tracking number to AfterShip.

The first thing to do is sign up for a free or paid account at AfterShip.

Once your account is created, log into the dashboard and go to Dashboard > Settings > API and note your API key for later.

Next, create a webhook to handle the Snipcart's order tracking number changed event.

If you aren't familiar with webhooks, you can think of them as event callbacks that Snipcart sends to your server when an event happens.

Neon Popsicle is a Metalsmith static site. We can, therefore, use Google Cloud Functions to handle the Snipcart webhook callback.

The idea is similar if you are running your own server.

Serverless tools like Google Cloud Functions or AWS Lambda pair well with static websites as an affordable way to enhance functionality.

If you haven't set up a webhook URL yet in Snipcart you'll need to do that next.

Go to the Snipcart Settings > Webhooks and enter the URL where your webhook function will be accessible.

snipcart-webhooks

Next, create the handler on your server for this webhook.

The code below assumes you are using Node or Google Cloud Functions for your handler and the Axios library for sending post requests, but you can apply the logic to the language/server of your choosing.

const axios = require ('axios');

exports.webhook = functions.https.onRequest((req, res) => {  
    
    let data = req.body; //JSON object from snipcart.

    //Convert ISO2 from Snipcart to ISO3 for aftership for countries that you ship too
    let country = convertISO2toISO3(data.content.shippingAddressCountry);

    //check webhook event type for tracking number being changed
    if (data.eventName && data.eventName == "order.trackingNumber.changed") {
        //Post the data to the after ship api (ex. using axios library)
        axios({
            method:'post',
            url:'https://api.aftership.com/v4/trackings',
            headers: {
                'aftership-api-key': 'API-KEY-HERE', //your Aftership API goes here
                'Content-Type': 'application/json'
            },
            data: {
                'tracking': {
                    //recommend fields, see Aftership for what else you can send
                    'tracking_number': data.trackingNumber,
                    'customer_name': data.content.shippingAddress.fullName,
                    'emails': [data.content.email],
                    'title': data.content.invoiceNumber,
                    'destination_country_iso3': country,
                    'order_id': data.content.invoiceNumber
                }
            }
        }).then(function(response) {
            //Aftership accepted our message, send Snipcart webhook an OK.
            res.sendStatus(200);
        })
        .catch(function (error) {
            //Uh oh, send the error status with the Aftership error meta data
            //So that you can debug the error on the Snipcart webhook dashboard
            res.status(400).send(error.response.data.meta);
        });
    }
    else {
        //all other events get an OK.
        res.sendStatus(200);
    }
});

Let's walk through that.

When you enter or change the tracking number for an order on your Snipcart dashboard, Snipcart will send a request to your webhook URL with a JSON payload detailing that event.

See API docs here for details of what's in that events payload.

First, we set up a request handler for the webhook function.

Then we get a reference to the JSON data that Snipcart has sent us that contains the order information. Snipcart uses one webhook for all events, so we check if the eventName from Snipcart is of the type order.trackingNumber.changed.

This is just one type of event that Snipcart sends you; check out the documentation to explore all the other events you can handle in your webhook. If you are only handling this one event, simply return an HTTP status code of 200 for all other requests.

Post request to the AfterShip API

Once we receive the order data object, we make a post request to the AfterShip API with our AfterShip API key in the header.

Here I've used the Axios library for an easier time posting data, but you can use whatever library you are comfortable with.

In your request to the AfterShip API, you'll also want to send them in the JSON body of your request at least these info:

  • Tracking number
  • Customer name
  • Customer email
  • Order ID

Depending on your courier, you may also need to send the postal code or other delivery information that is available via Snipcart.

Note: if you are sending country information, you'll have to convert it from 2-letter codes to 3-letter codes. Read more about what data AfterShip accepts and about courier data requirements in their API documentation.

If you get a positive response back from the AfterShip API server, close out the request with a 200 status message back to the Snipcart webhook.

You'll also want to handle any error message you get from them so that you can debug what went wrong. Keep an eye open for stupid mistakes like pasting an existing tracking number into a different order number that is already being tracked—yep, it happens.

Snipcart will send an email when a webhook fails, so providing proper error messaging will make your life easier if that occurs.

Aftership Dashboard

Enjoy your order tracking system

Now that you've set up automatic sending of tracking data from Snipcart to AfterShip, sit back and enjoy tracking your packages from the comfort of the AfterShip dashboard.

You can view stats such as delivery time, top destinations & couriers, or see when exceptions or failed deliveries happen.

With a paid account you can then configure what notifications get sent to your customers when a package is out for delivery, when it's delivered, etc. You might also want to set up and customize your tracking page which you can send as the URL for tracking to your customers.

I personally use this URL in my initial Snipcart tracking notification email for a greater customer experience. You can of course reach Snipcart's devs on Intercom for any help.


If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!

Suggested posts: