When we first start working together, many of our new customers with bespoke platforms want us to integrate their eCommerce platform, but it’s not something we offer. Still, we provide directions to their developers about this aspect of the job.
The essential step is to integrate your platform with Klaviyo, as explained in this post.
What Is eCommerce Integration and Why Is It Necessary?
Simply stated, eCommerce connectors provide a link between your eCommerce platform and other company processes. Finance, accounting, inventory management, order fulfillment, and shipping are all examples of these systems. When linked to eCommerce, back-office operations such as marketing, sales, and customer service may better coordinate front-office activities such as marketing, sales, and customer support.
Essential Steps to Integrating a Standard Ecommerce Platform
You can integrate with Klaviyo using our JavaScript API, server-side API, and Custom Catalog integration.
The key components of integrating a custom eCommerce cart are:
- Customer data
- Subscribers
- Website activity
- Order activity
This tutorial will show you how to sync critical metrics or essential customer actions to Klaviyo. While our JavaScript and server-side Track and Identify APIs may be used interchangeably, for eCommerce companies, we suggest the following configuration. When configuring your integration, use the following as a checklist:
Use our JavaScript Track API for the following:
- Active on Site – When someone visits your website
- Viewed Product – When someone views a product
- Added to Cart – When someone adds an item to their cart
- Started Checkout – When someone lands on the checkout page
Use our server-side Track API for the following:
- Placed Order – When an order successfully processes on your system
- Ordered Product – An event for each item in a processed order
- Fulfilled Order – When an order is sent to the customer
- Cancelled Order – When a customer cancels their order
- Refunded Order – When a customer’s order is refunded
Use our Custom Catalog Feed integration for the following:
- Catalog Feed – An XML feed or JSON feed of your product catalog
The amount of information you provide to us inside these website, purchase, and checkout events determines how you may filter, and segment based on these events in Klaviyo.
It should be noted that the snippets in this tutorial make use of sample data. You must change the values of the JSON properties in these snippets so that they dynamically draw from the appropriate information for that property.
If you have any queries regarding custom integrations, please contact our Support Team.
On-Site Behaviors (JavaScript Track API)
Add the following snippet to every page of your website to activate our JavaScript API and the ability to publish forms straight from Klaviyo (often the end of the footer is a good place to add this). Make sure to change PUBLIC API KEY with the 6-character Public API Key from your Klaviyo account:
<script type=”application/javascript” async
src=”https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=PUBLIC_API_KEY”></script>
Active on Site
After you’ve inserted the snippet above, Active on-Site activity will now trigger for every user who is cookied:
- Through a Javascript Identify API request
- By filling out a Klaviyo form
- By visiting your website after clicking on a Klaviyo email.
Product Viewed
You’ll need to add JavaScript event monitoring for a Viewed Product metric if you want to set up a browse abandonment flow or create segments based on product browsing data. Insert the following code into your product page template:
<script type=”text/javascript”>
var _learnq = _learnq || [];
var item = {
“ProductName”: “Winnie the Pooh”,
“ProductID”: “1111”,
“SKU”: “WINNIEPOOH”,
“Categories”: [“Fiction”, “Children”],
“ImageURL”: “http://www.example.com/path/to/product/image.png”,
“URL”: “http://www.example.com/path/to/product”,
“Brand”: “Kids Books”,
“Price”: 9.99,
“CompareAtPrice”: 14.99
};
_learnq.push([“track”, “Viewed Product”, item]);
</script>
Additionally, you may associate the recently seen item with a person’s profile through a “Recently Viewed Items” section by including the following snippet immediately below the Viewed Product snippet above.
<script type=”text/javascript”>
_learnq.push([“trackViewedItem”, {
“Title”: item.ProductName,
“ItemId”: item.ProductID,
“Categories”: item.Categories,
“ImageUrl”: item.ImageURL,
“Url”: item.URL,
“Metadata”: {
“Brand”: item.Brand,
“Price”: item.Price,
“CompareAtPrice”: item.CompareAtPrice
}
}]);
</script>
Included in Cart
If you want to send abandoned cart emails before a visitor reaches the checkout page, you must monitor information about the cart when a visitor does a certain action. To do this, we suggest delivering an Added to Cart event whenever an item is added to a cart. To monitor this occurrence, a person must still be “identified,” or cookied. You should also include cart information (such as Started Checkout below) and information about the product that was recently placed in the payload (such as, Viewed Product above). Here is a specimen of a Track request in which the cart already included one item (Winnie the Pooh) and another item (A Tale of Two Cities) was just added to the cart:
<script type=”text/javascript”>
_learnq.push([“track”, “Added to Cart”, {
“$value”: 29.98,
“AddedItemProductName”: “A Tale of Two Cities”,
“AddedItemProductID”: “1112”,
“AddedItemSKU”: “TALEOFTWO”,
“AddedItemCategories”: [“Fiction”, “Classics”],
“AddedItemImageURL”: “http://www.example.com/path/to/product/image2.png”,
“AddedItemURL”: “http://www.example.com/path/to/product2”,
“AddedItemPrice”: 19.99,
“AddedItemQuantity”: 1,
“ItemNames”: [“Winnie the Pooh”, “A Tale of Two Cities”],
“CheckoutURL”: “http://www.example.com/path/to/checkout”,
“Items”: [{
“ProductID”: “1111”,
“SKU”: “WINNIEPOOH”,
“ProductName”: “Winnie the Pooh”,
“Quantity”: 1,
“ItemPrice”: 9.99,
“RowTotal”: 9.99,
“ProductURL”: “http://www.example.com/path/to/product”,
“ImageURL”: “http://www.example.com/path/to/product/image.png”,
“ProductCategories”: [“Fiction”, “Children”]
},
{
“ProductID”: “1112”,
“SKU”: “TALEOFTWO”,
“ProductName”: “A Tale of Two Cities”,
“Quantity”: 1,
“ItemPrice”: 19.99,
“RowTotal”: 19.99,
“ProductURL”: “http://www.example.com/path/to/product2”,
“ImageURL”: “http://www.example.com/path/to/product/image2.png”,
“ProductCategories”: [“Fiction”, “Classics”]
}
]
}]);
</script>
When the Checkout Has Begun
If you want to send abandoned checkout emails, checkout data is critical. When someone begins the checkout process, you’ll submit an event to Klaviyo notifying that they’ve begun the checkout process. The ideal location to trigger this event is when a visitor enters the checkout page after being “recognized” or when they input their email address on the checkout page assuming they have not been identified before.
You’ll want to provide all of the line items’ data so that your abandoned checkout emails may be modified to include images, links, and other information about the goods in someone’s cart. Here is an example. Follow-up on request:
<script type=”text/javascript”>
_learnq.push([“track”, “Started Checkout”, {
“$event_id”: “1000123_1387299423”,
“$value”: 29.98,
“ItemNames”: [“Winnie the Pooh”, “A Tale of Two Cities”],
“CheckoutURL”: “http://www.example.com/path/to/checkout”,
“Categories”: [“Fiction”, “Children”, “Classics”],
“Items”: [{
“ProductID”: “1111”,
“SKU”: “WINNIEPOOH”,
“ProductName”: “Winnie the Pooh”,
“Quantity”: 1,
“ItemPrice”: 9.99,
“RowTotal”: 9.99,
“ProductURL”: “http://www.example.com/path/to/product”,
“ImageURL”: “http://www.example.com/path/to/product/image.png”,
“ProductCategories”: [“Fiction”, “Children”]
},
{
“ProductID”: “1112”,
“SKU”: “TALEOFTWO”,
“ProductName”: “A Tale of Two Cities”,
“Quantity”: 1,
“ItemPrice”: 19.99,
“RowTotal”: 19.99,
“ProductURL”: “http://www.example.com/path/to/product2”,
“ImageURL”: “http://www.example.com/path/to/product/image2.png”,
“ProductCategories”: [“Fiction”, “Classics”]
}
]
}]);
</script>
The $event id field should include a unique identity for the cart, as well as the UNIX-formatted time when the event occurred. This enables others to re-trigger the Started Checkout process after adding new goods.
Metrics on the Server
We suggest monitoring some metrics on the server-side owing to possible restrictions in frontend coding, security issues, and the general availability of data on the server-side vs the front end. For instance, if a user has a sluggish connection/computer or a JavaScript-blocking plugin installed in their browser, JavaScript requests may fail to execute. Use our server-side Track API for more critical metrics (such as those for orders and other transactional events and attributes) or those that include sensitive data.
We have Python, Ruby, and PHP libraries available, but in general, the API involves performing an HTTP GET call with a base64-encoded JSON payload. You may get more information about our Track and Identify APIs here.
Order Placed
Following the placement of an order, you should send a Track request to our server-side API.
Additionally, it is a good habit to provide your previous order data. This increases your capacity to segment that data and improves historical revenue tracking accuracy. By iterating over your previous orders and producing Placed Order and Ordered Product Track API calls for each, you can provide us historical data. The special “time” attribute for these events should be set to the UNIX timestamp of the event. Additional information about these measures is provided below.
You have two options for sending order data to Klaviyo: real-time or batch.
- Real-time – You’ll be able to make requests immediately after an order is made.
- Batch – You’ll create a script that runs at least once an hour and sends a list of all events that happened during the previous hour.
If you want to send abandoned cart/checkout emails, you must transmit order data at a frequency that fits inside your email delay in order to avoid sending the email to customers who have already finished their purchase. For instance, if there is a one-hour wait between when someone initiates the abandoned cart flow and when they get the first email, you must ensure that data is sent at least once per hour.
We suggest that you send two kinds of events with each order:
One event named Placed Order for the entire order
This contains a $value field that reflects the order’s total worth, including shipping, tax, and discounts.
One event for each line item named Ordered Product
This contains a $value property that indicates the entire cost of an item in an order before to any modifications, as well as more specific information about the item at the SKU level.
Important points to keep in mind while monitoring server-side events:
- Ensure that PUBLIC API KEY is replaced with your public API key.
- The $event id parameter should be an order-specific identifier (eg. Order ID).
- If the same event and $event id combination is provided more than once, we will skip any subsequent recorded events with the same combination.
- $value is a unique attribute that enables Klaviyo to monitor income; it should include the event’s entire numerical, monetary worth.
- Each line item should have its own dictionary in the “Items” array.
- time is a unique field that should include the order’s date and time as a UNIX timestamp.
Here is an example of the payload for a Track request for a Placed Order:
{
“token”: “PUBLIC_API_KEY”,
“event”: “Placed Order”,
“customer_properties”: {
“$email”: “john.smith@test.com”,
“$first_name”: “John”,
“$last_name”: “Smith”,
“$phone_number”: “5551234567”,
“$address1”: “123 Abc st”,
“$address2”: “Suite 1”,
“$city”: “Boston”,
“$zip”: “02110”,
“$region”: “MA”,
“$country”: “USA”
},
“properties”: {
“$event_id”: “1234”,
“$value”: 29.98,
“OrderId”: “1234”,
“Categories”: [“Fiction”, “Classics”, “Children”],
“ItemNames”: [“Winnie the Pooh”, “A Tale of Two Cities”],
“Brands”: [“Kids Books”, “Harcourt Classics”],
“DiscountCode”: “Free Shipping”,
“DiscountValue”: 5,
“Items”: [{
“ProductID”: “1111”,
“SKU”: “WINNIEPOOH”,
“ProductName”: “Winnie the Pooh”,
“Quantity”: 1,
“ItemPrice”: 9.99,
“RowTotal”: 9.99,
“ProductURL”: “http://www.example.com/path/to/product”,
“ImageURL”: “http://www.example.com/path/to/product/image.png”,
“Categories”: [“Fiction”, “Children”],
“Brand”: “Kids Books”
},
{
“ProductID”: “1112”,
“SKU”: “TALEOFTWO”,
“ProductName”: “A Tale of Two Cities”,
“Quantity”: 1,
“ItemPrice”: 19.99,
“RowTotal”: 19.99,
“ProductURL”: “http://www.example.com/path/to/product2”,
“ImageURL”: “http://www.example.com/path/to/product/image2.png”,
“Categories”: [“Fiction”, “Classics”],
“Brand”: “Harcourt Classics”
}
],
“BillingAddress”: {
“FirstName”: “John”,
“LastName”: “Smith”,
“Company”: “”,
“Address1”: “123 abc street”,
“Address2”: “apt 1”,
“City”: “Boston”,
“Region”: “Massachusetts”,
“RegionCode”: “MA”,
“Country”: “United States”,
“CountryCode”: “US”,
“Zip”: “02110”,
“Phone”: “5551234567”
},
“ShippingAddress”: {
“FirstName”: “John”,
“LastName”: “Smith”,
“Company”: “”,
“Address1”: “123 abc street”,
“Address2”: “apt 1”,
“City”: “Boston”,
“Region”: “Massachusetts”,
“RegionCode”: “MA”,
“Country”: “United States”,
“CountryCode”: “US”,
“Zip”: “02110”,
“Phone”: “5551234567”
}
},
“time”: 1387302423
}
Ordered Product
Additionally, you should create a Track request payload for an Ordered Product event for each line item. This event comes helpful if you want to build any filters or triggers that are not “top-level” on the Placed Order event and are dependent on product-specific information (as opposed to order as a whole). Additionally, this event is utilized in combination with your Catalog Feed to allow for customized recommendations:
{
“token”: “PUBLIC_API_KEY”,
“event”: “Ordered Product”,
“customer_properties”: {
“$email”: “john.smith@test.com”,
“$first_name”: “John”,
“$last_name”: “Smith”
},
“properties”: {
“$event_id”: “1234_WINNIEPOOH”,
“$value”: 9.99,
“OrderId”: “1234”,
“ProductID”: “1111”,
“SKU”: “WINNIEPOOH”,
“ProductName”: “Winnie the Pooh”,
“Quantity”: 1,
“ProductURL”: “http://www.example.com/path/to/product”,
“ImageURL”: “http://www.example.com/path/to/product/image.png”,
“Categories”: [
“Fiction”,
“Children”
],
“ProductBrand”: “Kids Books”
},
“time”: 1387302423
}
Fulfilled Order, Cancelled Order, and Refunded Order
Considering how your goods are delivered to the client and if they may be canceled or reimbursed, you may want to send extra events indicating these activities. Each of these order-related events will have a payload that is almost identical to that of a Placed Order.
To be included in CLV computations, Cancelled Order and Refunded Order must have $event ids that relate to a previously recorded Placed Order event.
The only information that has to be updated for a Fulfilled Order is the event’s name and the time the fulfillment occurred:
{
“token”: “PUBLIC_API_KEY”,
“event”: “Fulfilled Order”,
“customer_properties”: {
“$email”: “john.smith@test.com”,
“$first_name”: “John”,
“$last_name”: “Smith”,
“$phone_number”: “5551234567”,
“$address1”: “123 Abc st”,
“$address2”: “Suite 1”,
“$city”: “Boston”,
“$zip”: “02110”,
“$region”: “MA”,
“$country”: “USA”
},
“properties”: {
“$event_id”: “1234”,
“$value”: 29.98,
“OrderId”: “1234”,
“Categories”: [
“Fiction”,
“Classics”,
“Children”
],
“ItemNames”: [
“Winnie the Pooh”,
“A Tale of Two Cities”
],
“Brands”: [
“Kids Books”,
“Harcourt Classics”
],
“Discount Code”: “Free Shipping”,
“Discount Value”: 5,
“Items”: [
{
“ProductID”: “1111”,
“SKU”: “WINNIEPOOH”,
“ProductName”: “Winnie the Pooh”,
“Quantity”: 1,
“ItemPrice”: 9.99,
“RowTotal”: 9.99,
“ProductURL”: “http://www.example.com/path/to/product”,
“ImageURL”: “http://www.example.com/path/to/product/image.png”,
“Categories”: [
“Fiction”,
“Children”
],
“Brand”: “Kids Books”
},
{
“ProductID”: “1112”,
“SKU”: “TALEOFTWO”,
“ProductName”: “A Tale of Two Cities”,
“Quantity”: 1,
“ItemPrice”: 19.99,
“RowTotal”: 19.99,
“ProductURL”: “http://www.example.com/path/to/product2”,
“ImageURL”: “http://www.example.com/path/to/product/image2.png”,
“Categories”: [
“Fiction”,
“Classics”
],
“Brand”: “Harcourt Classics”
}
],
“BillingAddress”: {
“FirstName”: “John”,
“LastName”: “Smith”,
“Company”: “”,
“Address1”: “123 abc street”,
“Address2”: “apt 1”,
“City”: “Boston”,
“Region”: “Massachusetts”,
“RegionCode”: “MA”,
“Country”: “United States”,
“CountryCode”: “US”,
“Zip”: “02110”,
“Phone”: “5551234567”
},
“ShippingAddress”: {
“FirstName”: “John”,
“LastName”: “Smith”,
“Company”: “”,
“Address1”: “123 abc street”,
“Address2”: “apt 1”,
“City”: “Boston”,
“Region”: “Massachusetts”,
“RegionCode”: “MA”,
“Country”: “United States”,
“CountryCode”: “US”,
“Zip”: “02110”,
“Phone”: “5551234567”
}
},
“time”: 1387312956
}
Cancelled Order
Update the event name and timestamp for Cancelled Orders and Refunded Orders, and add a new property for the cancellation or refund reason:
{
“token”: “PUBLIC_API_KEY”,
“event”: “Cancelled Order”,
“customer_properties”: {
“$email”: “john.smith@test.com”,
“$first_name”: “John”,
“$last_name”: “Smith”,
“$phone_number”: “5551234567”,
“$address1”: “123 Abc st”,
“$address2”: “Suite 1”,
“$city”: “Boston”,
“$zip”: “02110”,
“$region”: “MA”,
“$country”: “USA”
},
“properties”: {
“$event_id”: “1234”,
“$value”: 29.98,
“OrderId”: “1234”,
“Reason”: “No longer needed”,
“Categories”: [
“Fiction”,
“Classics”,
“Children”
],
“ItemNames”: [
“Winnie the Pooh”,
“A Tale of Two Cities”
],
“Brands”: [
“Kids Books”,
“Harcourt Classics”
],
“Discount Code”: “Free Shipping”,
“Discount Value”: 5,
“Items”: [
{
“ProductID”: “1111”,
“SKU”: “WINNIEPOOH”,
“ProductName”: “Winnie the Pooh”,
“Quantity”: 1,
“ItemPrice”: 9.99,
“RowTotal”: 9.99,
“ProductURL”: “http://www.example.com/path/to/product”,
“ImageURL”: “http://www.example.com/path/to/product/image.png”,
“Categories”: [
“Fiction”,
“Children”
],
“Brand”: “Kids Books”
},
{
“ProductID”: “1112”,
“SKU”: “TALEOFTWO”,
“ProductName”: “A Tale of Two Cities”,
“Quantity”: 1,
“ItemPrice”: 19.99,
“RowTotal”: 19.99,
“ProductURL”: “http://www.example.com/path/to/product2”,
“ImageURL”: “http://www.example.com/path/to/product/image2.png”,
“Categories”: [
“Fiction”,
“Classics”
],
“Brand”: “Harcourt Classics”
}
],
“BillingAddress”: {
“FirstName”: “John”,
“LastName”: “Smith”,
“Company”: “”,
“Address1”: “123 abc street”,
“Address2”: “apt 1”,
“City”: “Boston”,
“Region”: “Massachusetts”,
“RegionCode”: “MA”,
“Country”: “United States”,
“CountryCode”: “US”,
“Zip”: “02110”,
“Phone”: “5551234567”
},
“ShippingAddress”: {
“FirstName”: “John”,
“LastName”: “Smith”,
“Company”: “”,
“Address1”: “123 abc street”,
“Address2”: “apt 1”,
“City”: “Boston”,
“Region”: “Massachusetts”,
“RegionCode”: “MA”,
“Country”: “United States”,
“CountryCode”: “US”,
“Zip”: “02110”,
“Phone”: “5551234567”
}
},
“time”: 1387312956
}
Refunded Order
{
“token”: “PUBLIC_API_KEY”,
“event”: “Refunded Order”,
“customer_properties”: {
“$email”: “john.smith@test.com”,
“$first_name”: “John”,
“$last_name”: “Smith”,
“$phone_number”: “5551234567”,
“$address1”: “123 Abc st”,
“$address2”: “Suite 1”,
“$city”: “Boston”,
“$zip”: “02110”,
“$region”: “MA”,
“$country”: “USA”
},
“properties”: {
“$event_id”: “1234”,
“$value”: 29.98,
“OrderId”: “1234”,
“Reason”: “No longer needed”,
“Categories”: [
“Fiction”,
“Classics”,
“Children”
],
“ItemNames”: [
“Winnie the Pooh”,
“A Tale of Two Cities”
],
“Brands”: [
“Kids Books”,
“Harcourt Classics”
],
“Discount Code”: “Free Shipping”,
“Discount Value”: 5,
“Items”: [
{
“ProductID”: “1111”,
“SKU”: “WINNIEPOOH”,
“ProductName”: “Winnie the Pooh”,
“Quantity”: 1,
“ItemPrice”: 9.99,
“RowTotal”: 9.99,
“ProductURL”: “http://www.example.com/path/to/product”,
“ImageURL”: “http://www.example.com/path/to/product/image.png”,
“Categories”: [
“Fiction”,
“Children”
],
“Brand”: “Kids Books”
},
{
“ProductID”: “1112”,
“SKU”: “TALEOFTWO”,
“ProductName”: “A Tale of Two Cities”,
“Quantity”: 1,
“ItemPrice”: 19.99,
“RowTotal”: 19.99,
“ProductURL”: “http://www.example.com/path/to/product2”,
“ImageURL”: “http://www.example.com/path/to/product/image2.png”,
“Categories”: [
“Fiction”,
“Classics”
],
“Brand”: “Harcourt Classics”
}
],
“BillingAddress”: {
“FirstName”: “John”,
“LastName”: “Smith”,
“Company”: “”,
“Address1”: “123 abc street”,
“Address2”: “apt 1”,
“City”: “Boston”,
“Region”: “Massachusetts”,
“RegionCode”: “MA”,
“Country”: “United States”,
“CountryCode”: “US”,
“Zip”: “02110”,
“Phone”: “5551234567”
},
“ShippingAddress”: {
“FirstName”: “John”,
“LastName”: “Smith”,
“Company”: “”,
“Address1”: “123 abc street”,
“Address2”: “apt 1”,
“City”: “Boston”,
“Region”: “Massachusetts”,
“RegionCode”: “MA”,
“Country”: “United States”,
“CountryCode”: “US”,
“Zip”: “02110”,
“Phone”: “5551234567”
} 1387312956
},
“time”: 1387312956
}
Integration of Catalog Feeds
Embedding your catalog enables you to send emails that include our Product Feeds and Product Blocks. Please contact our Support Team to build up a custom catalog integration. They will provide instructions and examples for this configuration and will need notification once the configuration is complete in order to trigger the feed on your account.
Synchronization of Historical Data
Likewise, it is a good habit to give us your previous order information. This increases your capacity to segment that data and improves historical revenue tracking accuracy. This information may be provided to us by iterating over your previous orders and producing Placed Order and Ordered Product Track API calls for each.
EndNote
If you utilize API integration and the appropriate technology, e-commerce shipping and order fulfillment may be significantly simplified.
At the end of the day, every choice you make about your E-commerce company should assist you in accomplishing your objectives. In terms of shipping and order fulfillment, using E-commerce integration accomplishes both of these goals.
So, what are you waiting for? Begin using E-commerce APIs straightaway!
