Your guide to connecting Klaviyo with Craft Commerce in under an hour

By Stephen Callender

Oct 10, 2021

It's no secret marketing emails play a crucial role for ecommerce business. Being able to connect with customers in a more personal manner based on their engagement can meaningfully increase a store’s revenue.

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!

Craft CMS sites traditionally handle templating with Twig, so the Klaviyo Connect documentation originally only provided instructions for Twig templates. But increasingly, developers are using Vue for Craft CMS front end templates, with Twig used simply as a data layer.

I'm going to show you how to implement Klaviyo Connect through Vue! Of course, all of the walkthrough below assumes you have a working knowledge of Craft Commerce, installing and configuring Klaviyo Connect, and Vue.

With those requirements in mind, here are the simple steps we are going to explain to make this magic happen between Klaviyo and Craft via Vue:

  • Step 1: Create a reusable function (using the Craft API)

  • Step 2: Call the function within the Vue template

  • Step 3: Add a user to a list in Klaviyo

  • Step 4: Send user events to Klaviyo

The “before we get started” stuff

To complete this project, you’ll need to install or be ready to install the following (or you can just have a look at some stuff we are 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

Step 1: Create a reusable function

At Foster Commerce, we adhere to a golden rule in software development: code once, reuse often. That doesn’t just apply to big projects. We make sure we do that even for the little things, like an API call from a Vue template to Craft. I’m sure you’ll have future needs to communicate with Craft outside Klaviyo Connect, so you can just tuck this bit of code into your personal library for future use. You can thank me later :)

Remember those packages 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 those two steps are done, installing the packages and creating the function file, we can instantiate the components we installed so that we can call the functions we need later

api.js

From here, we'll start building our call to Craft. One thing to note is that any call to Craft is going to be a POST request. Knowing that, we'll start by creating an arrow function called post, which we'll then export and be able to use as easily as api.post when it's good to go.

api.js

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: we're going to need to pass a few arguments to this which we'll use later to let Craft know exactly what we're trying to do. The args we're passing are action, params, and config. We're going to pass params and config a little differently because of how we'll be using them later.

api.js

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 instanceof 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 , let's check our params.

api.js

From here, we need to build the request which will get sent using axios. Since we're inside an arrow function and want to export this for reusability, we'll return our axios request just below where we checked our params.

api.js

Our axios request will  take 3 arguments:

  • an action so Craft knows what to do

  • our params

  • the headers of the request.

The action is going to be the endpoint we 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 where we’ll use the stringify we imported earlier.

api.js

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

api.js

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

api.js

And now our 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.

Step 2: Call the function to Klaviyo from within the Vue template

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

We’ll go ahead and give our form an action of submitForm, and then create a method to match.

NewsletterSignup.vue

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

NewsletterSignup.vue

And now we're ready to start building our request. Once completed, we’ll be sending data to Klaviyo Connect, from within Vue, via our reusable Craft API function.

Step 3: Add a user to a list in Klaviyo

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 so you’ll be able to get started using it pretty quickly (under the hood, though, it’s a lot more powerful). But like competing platforms, at its core Klaviyo is about adding users to lists. These lists can then be used to send targeted emails like newsletters.

If we look at the current Klaviyo Connect documentation, we 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, we need to pass an action to our api function. Referencing the Klaviyo Connect documentation again, we can see that the action we want to pass is /klaviyoconnect/api/track. For the list ID, you'll have to go into your Klaviyo dashboard and retrieve it.

We'll start by calling our api.post function we built, and then we’ll pass in our action.

NewsletterSignup.vue

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

NewsletterSignup.vue

Voila! Your Vue front end is now talking with Klaviyo through your Craft Klaviyo Connect plugin. Even better, it’s all done through a cool reusable function you built to communicate programmatically with Craft.

Of course this example is simple, but it works for any list, provided you give it the right ID. And, there’s a lot more you can do with Klaviyo and Klaviyo Connect, so let's cover one more use case.

Step 4: Send user events to Klaviyo

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, which can be used to better segment them for sending 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. Wouldn’t it be great to know when that user clicked the button so that if they bail on the checkout process later, you can target them with a Klaviyo communication which includes the items left in their cart?

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

In the request in Step 3, we passed a list ID and the user email. That gets the user into your Klaviyo instance. For this scenario in which we are tracking an event (a button click made by that user), we need to pass the user email and an event object which contains more information about the user’s action (the button click).

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

NewsletterSignup.vue

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 which can be attached to the user in Klaviyo, we 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 we're signing up users and tracking events!!

Now go build!

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 which 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 in a similar manner.

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