4 simple steps to connect Craft Commerce to Klaviyo using Vue

It's no secret marketing emails play a crucial role for ecommerce businesses. Connecting with customers in a more personal way based on their engagement can meaningfully increase a store’s revenue.

That's why Klaviyo is our preferred email marketing platform here at Foster Commerce. A competitor to Mailchimp and Constant Contact, Klaviyo allows you to listen, analyze, and act on your customer data.

We're such big fans, in fact, that we built and maintain the Klaviyo Connect plugin for Craft CMS!

Our 4 easy steps to connect Craft to Klaviyo using Vue will save you time and let you get to the good stuff — giving more value to your customers and clients.

If you’ve seen Klaviyo’s documentation to connect to Craft, you’ve seen their instructions for Twig templates. This is because Craft CMS sites traditionally handle templating with Twig.

But I’m going to show you how to implement Klaviyo using Vue. In this scenario, I use Twig simply as a data layer.

Here are 4 simple steps to connect Craft Commerce to Klaviyo using Vue:

To complete this project, you’ll need to have a working knowledge of Craft Commerce, installing and configuring Klaviyo Connect, and Vue.

You’ll also need to install the following (or you can just have a look at some stuff I am going to ask you to install so you can be sure you want to install it; was that too many uses of install?):

• Craft CMS (installed)

• Klaviyo account (you need to sign up for this)

• Klaviyo Connect Plugin for Craft CMS (installed)

• axios - for sending requests

• qs - for string parsing

• lodash - for merging objects

At Foster Commerce, we adhere to the internal metric of Reused and Reusable when writing Vue components.

I’m sure you’ll have future needs to communicate with Craft outside Klaviyo Connect, so you can tuck this bit of code into your personal library for future use. You can thank me later. :)

Remember those components we mentioned? Yup, you are going to install them now. Just to refresh, you’ll need:

1. axios - for sending requests

2. qs - for string parsing

3. lodash - for merging objects

Boom! We’re on our way.

Where this function lives is completely up to you, but I’m going to put mine in the root of my src folder and I'm going to title it api.js.

Once you’ve installed the packages and created the function file, you can instantiate the components you installed. This makes it possible for you to call the functions you need later.

From here, you'll start building your call to Craft.

One thing to note is that any call to Craft is going to be a POST request.

Because of this, you'll start by creating an arrow function called post, which you'll then export and be able to use as easily as api.post when it's good to go.

Before explaining this next part, I'm going to be honest --  I only know what to do because a senior Foster Commerce developer explained what was going on.

The gist: you're going to need to pass a few arguments to this which you'll use later to let Craft know exactly what you're trying to do. 

The args you're passing are action, params, and config. You're going to pass params and config a little differently because of how you'll be using them later.

Form requests to Craft are slightly different from regular API requests. Because of that, we need to first check the params coming into our function to see if they're an instance of FormData- which is something that comes from Craft when you're using a Twig form.

The difference is that when the request comes as a form, the TokenName and TokenValue are passed as two different properties. However, when it is not from a form, the TokenValue is passed as the TokenName.

I don't know exactly why this is, other than that it's just how Craft does things. Each CMS to its own, I guess.

With that explained, go ahead and check your params.

From here, you need to build the request which will get sent using axios. 

Since you're inside an arrow function and want to export this for reusability, you'll return your axios request just below where you checked your params.

Your axios request will take 3 arguments:

• an action so Craft knows what to do

• your params

• the headers of the request

The action is going to be the endpoint you want to interact with. Craft has a lot of these that you're probably familiar with, such as updateUser, deleteUser, updateCart, etc.

It’s in this action that you’ll use the stringify you imported earlier.

Now you want to pass your params, and after that, you'll use the merge from lodash to append your headers and config to the request.

Your full api.js file should look like this now.

And now your function for talking with Craft is complete! 

Trust me when I say that doing this one time in a reusable fashion will make working with Craft so much simpler going forward.

But you didn’t just do that for nothing! Let’s put our communication channel to use with Klaviyo.

For the sake of simplicity, let's say you have a newsletter signup component which is just a single input form.

Go ahead and give your form an action of submitForm, and then create a method to match.

Next is to import the reusable function you created earlier in the script tag of your Vue component.

And now you're ready to start building your request. 

Once completed, you’ll be sending data to Klaviyo Connect, from within Vue, via your reusable Craft API function.

If you aren’t totally familiar with Klaviyo yet, just know that on the surface it’s like a lot of other email marketing platforms. Under the hood, though, it’s a lot more powerful. 

At its core, Klaviyo is about adding users to lists. These lists can then be used to send targeted emails, like newsletters.

If you look at the current Klaviyo Connect documentation,  you can see the values needed to add a user to a list in Klaviyo are a list ID and the user’s email.

To send Klaviyo Connect this data, you need to pass an action to your api function. 

Referencing the Klaviyo Connect documentation again, you can see that the action you want to pass is /klaviyoconnect/api/track. 

For the list ID, you'll have to go into your Klaviyo dashboard and retrieve it. Start by calling the api.post function you built, and then you’ll pass in your action.

All that's left is to pass in your args pertaining to the list ID and the user email. That looks something like this.

Voila! Your Vue front end is now talking with Klaviyo through your Craft Klaviyo Connect plugin. 

Of course, this example is simple, but it works for any list, provided you give it the right ID. Even better, it’s all done through a cool reusable function you built to communicate programmatically with Craft.

And, there’s a lot more you can do with Klaviyo and Klaviyo Connect, so I’ll cover one more use case.

Like most marketing email platforms, Klaviyo is actually pretty powerful. You can capture a lot more data about how users interact with your web pages and forms. This data can be used to better segment customers and send more targeted marketing communications. 

Consider the following scenario

1. A user within your Klaviyo lists visits a Vue page which shows items in their cart;

2. The user enters their email address into a form field;

3. The user clicks on a button labeled “continue checkout.”

This is a pretty common scenario. 

However, if they bail on the checkout process, wouldn’t it be great to be able to target them later with a Klaviyo communication that includes the items left in their cart?

The great thing about implementing this is that it's almost identical to what you've done already, with just a slight tweak to the request.

In the request in Step 3, you passed a list ID and the user email. That gets the user into your Klaviyo instance. 

For this scenario in which you are tracking an event, (a button click made by that user), you need to pass the user email and an event object. The event object contains more information about the user’s action (the button click).

Below, I’ve changed up the NewsletterSignup code just a bit to show how this would be done.

This is a simplified version of a page with a button that continues the user on to the checkout flow.

To make this track a click that can be attached to the user in Klaviyo, you need to remove the list property and pass an event object instead.

Here's what that would look like.

You could also easily pass more information such as the page the user was on, product information, items in their cart, etc... The sky's the limit!

Now you're signing up users and tracking events!

Klaviyo Connect can handle much more than just these two types of user interactions. You can identify users, update profiles, restore carts, and more. It's an extremely powerful tool that keeps you connected and engaged with your customers through your Klaviyo subscription. 

But to make it happen easily, you need to create a function to communicate with Klaviyo Connect through the Craft API. 

And by making the function reusable, you can communicate to other services, (that have established plugins like Klaviyo Connect), through your Vue templates.

Enjoyed this article? Stay tuned for some future posts where we detail how to extend Klaviyo Connect to use Freeform!