v0 and Klaviyo integration: Step-by-Step Guide 2025

 

Step 1: Create a New File for Klaviyo Integration

 

Create a new file named klaviyoIntegration.ts in your project’s source directory. This file will contain the TypeScript code that handles sending data to Klaviyo.

 

Step 2: Add the Klaviyo Integration Code

 

Copy the following code into klaviyoIntegration.ts. This code defines a KlaviyoIntegration class that sends tracking events to Klaviyo using the fetch API. No external dependencies are required since we use the built‑in fetch function.

export class KlaviyoIntegration {
  private apiKey: string;

  constructor(apiKey: string) {
    this.apiKey = apiKey;
  }

  /**
- Sends an event to Klaviyo.
- 
- @param eventName - The name of the event you want to track.
- @param customerProperties - An object containing customer properties (e.g., email, id).
- @param eventProperties - An object with additional properties for the event.
- @returns A promise resolving to the server response.
   */
  public trackEvent(
    eventName: string,
    customerProperties: { [key: string]: any },
    eventProperties: { [key: string]: any }
  ): Promise {
    // Construct the payload to be sent to Klaviyo
    const payload = {
      token: this.apiKey,
      event: eventName,
      customer_properties: customerProperties,
      properties: eventProperties,
      // Optionally you can add a timestamp or other data here
    };

    // Encode the payload in base64 as required by Klaviyo's API
    const encodedData = btoa(JSON.stringify(payload));
    const url = https://a.klaviyo.com/api/track?data=${encodedData};

    // Use fetch to send a GET request to Klaviyo's tracking endpoint
    return fetch(url, {
      method: 'GET'
    }).then(response => response.json());
  }
}

 

Step 3: Configure Your API Key and Import the Integration

 

In your main TypeScript file (for example, main.ts or app.ts), import the KlaviyoIntegration class and create an instance by passing your Klaviyo API key. Add your API key where indicated.

// Import the KlaviyoIntegration class from the file you created
import { KlaviyoIntegration } from './klaviyoIntegration';

// Replace 'YOURKLAVIYOAPI_KEY' with your actual Klaviyo Public API Key
const klaviyo = new KlaviyoIntegration('YOURKLAVIYOAPI_KEY');

// Example customer properties and event properties
const customerProps = {
  email: '[email protected]',
  id: '12345'
};

const eventProps = {
  item: 'Subscription',
  value: 'Premium Plan'
};

// Example function to track a user event
function trackUserEvent() {
  klaviyo.trackEvent('User Signed Up', customerProps, eventProps)
    .then(response => {
      console.log('Klaviyo event tracked successfully:', response);
    })
    .catch(error => {
      console.error('Error tracking event with Klaviyo:', error);
    });
}

// Call the function whenever appropriate in your app
trackUserEvent();

 

Step 4: Insert Integration Code into Your Application Flow

 

Locate the part of your code where you handle user actions or where an event is triggered. Insert a call to the trackUserEvent function (or similar custom function) to record the relevant Klaviyo event. This ensures that when a user performs an action (like signing up or making a purchase), the information is sent to Klaviyo.

For example, if you have a function that runs after a successful signup, add the following line inside that function:

// After successful signup process
trackUserEvent();

 

Step 5: Save and Test

 

Since your v0 project does not include a terminal, all changes are made directly in the code. After saving your files, run your project using its built-in method. Use your browser’s console or the built-in logging in your project to confirm that events are being sent to Klaviyo successfully.

 

Following these steps, you have integrated Klaviyo into your v0 project using TypeScript. Adjust the event names and the payload content according to your requirements.