How To Add Klaviyo To Your Gatsby Project

Adding Klaviyo to your Gatsby project enables you to leverage powerful email marketing tools to engage with your audience.

GatsbyFramework
KlaviyoEmail Marketing

Tom McCulloch

Read Time: 3 min

Step 1: Sign Up for Klaviyo

If you haven't already, sign up for a Klaviyo account at Klaviyo. Klaviyo offers a free plan that includes basic features, which is sufficient for most small to medium-sized projects.

Step 2: Create a Public API Key

Once you've signed up and logged into your Klaviyo account, you need to create a public API key. This key will be used to identify your account and send data to Klaviyo.

  1. Navigate to the Account section.
  2. Select Settings and then API Keys.
  3. Click on Create API Key and copy the public API key.

Step 3: Install Klaviyo Script in Gatsby

To install Klaviyo's script on your Gatsby site, you'll need to add it to your site's <head> tag. This can be done by modifying the gatsby-ssr.js file.

  1. Create or edit the gatsby-ssr.js file at the root of your Gatsby project.
  2. Add the following code to include the Klaviyo script:
import React from "react";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="klaviyo"
      type="text/javascript"
      async
      src={`https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_PUBLIC_API_KEY`}
    />,
  ]);
};

Replace YOUR_PUBLIC_API_KEY with the public API key you copied from Klaviyo.

Step 4: Set Up Event Tracking

Klaviyo can track various events on your website, such as page views, button clicks, and form submissions. To set up event tracking, use the newer Klaviyo API in your components.

For example, to track a button click event:

import React from "react";

const TrackButtonClick = () => {
  const handleClick = () => {
    window.KlaviyoAPI.track('Button Clicked', {
      button_name: "Subscribe Button"
    });
  };

  return (
    <button onClick={handleClick}>
      Subscribe
    </button>
  );
};

export default TrackButtonClick;

Step 5: Integrate Signup Forms

Integrating signup forms is crucial for building your email list. Klaviyo provides easy-to-use signup forms that you can customize and embed on your Gatsby site.

  1. In your Klaviyo account, navigate to Signup Forms and create a new form.
  2. Customize the form to your liking and save it.
  3. Get the embed code for your form.
  4. Add the embed code to your Gatsby component where you want the form to appear.
import React from "react";

const SignupForm = () => (
  <div>
    <!-- Copy and paste your Klaviyo embed code here -->
  </div>
);

export default SignupForm;

Step 6: Verify the Integration

After setting up Klaviyo on your Gatsby site, verify that the integration works correctly:

  1. Visit your site and perform the actions you want to track (e.g., button clicks, form submissions).
  2. Check your Klaviyo dashboard to ensure that the events are being recorded correctly.

Conclusion

Integrating Klaviyo with your Gatsby project can significantly enhance your email marketing efforts. By following these steps, you can set up Klaviyo, track events, and embed signup forms on your site, allowing you to engage more effectively with your audience.

Related Resources