How to integrate Shopify headless hydrogen theme with the Klaviyo?

Generally they are two main steps to integrate the Klaviyo’s into the Shopify headless hydrogen app.
1. Connect Shopify store to Klaviyo’s native integration.
2. Manually Added the code snippets for tracking the website.

Connect Shopify store to Klaviyo’s native integration.

1. Navigate to the Integration Tab.

2. Click to Add Integration on the Integration view, and search for the Shopify.

3. Fill out the Shopify Integration Setting Form.

4. Clicked to shopify connect , it’ll be taken to you to shopify account.
5. Check the permission and reviewed it , and install the app.

A successfull green callout indicate that your data is synced with the Klaviyo App.

Manually Added the code snippets for tracking the website.

In the headless setup we need to install manually the Klaviyo’s “Active on Site” JavaScript , popularly known as  Klaviyo.js. which detect the user activity and also support the klaviyo forms.
As soon as you connect your headless shopify to klaviyo , onsite metrics will be synced with the Klaviyo’s native Shopify integration.
In Shopify Klaviyo integration , some onsite metrices of tracking will be provided automatically , and for some you need to manage manually in your headless App.

Add Subscribe Email functionality using Klaviyo.

To achieve this functionality we need two things , first is your Klaviyo ListId and second is your Klaviyo Apikey, and here’s the code.

export const subscribedUser = async (email) => {
  const apikey = "your-klaviyo-api-key";
  const listId = "your -klaviyo-listId";

  const url = `https://a.klaviyo.com/api/v2/list/${listId}/subscribe?api_key=${apiKey}`;

  const options = {
    method: 'POST',
    headers: {Accept: 'application/json', 'Content-Type': 'application/json'},
    body: JSON.stringify({
      profiles: [{email}],
    }),
  };

Now you can used this code whenever you want for subscribed the user emails.

Apart from that these are the onsite metrices which will be already synced as soon as connect with the Klaviyo’s native Shopify integration :

• Checkout
  When customers start a checkout and provide their contact information
• Order Place
  When an order successfully placed.
• Ordered Product
  An event for each item in a processed order
• Order Fulfilled
  When an order is sent to the customer
• Order Partial Fulfilled
  When an order that has been placed is partially fulfilled
• Order Canceled
  When an order is canceled
• Refunded Order
  

These onsite metrices we will need to add manually for the tracking:

• Active User
  When someone visits your website
• Viewed Product
  When someone views a product 
• Recently Viewed Items
  Recently viewed items for a specific profile
• Added to Cart
  When someone adds an item to their cart
• Logged in user tracking
  Identify and track the activity of logged in users

Code Snippets of the manually added onsite metrices.

Code snippets of the manually added onsite metrices , In this I give few examples, if you want to known more about manual code snippets of onsite metrices , you can visit on this connect Klaviyo’s to Shopify Hydrogen.

Add Viewed Product tracking :

var _learnq = window._learnq || [];
  var product = {
    Name: payload.title,
    ProductID: payload.product.id.substring(payload.product.id.lastIndexOf('/') + 1),
    Categories:
      payload.product.collections == undefined
        ? null
        : payload.product.collections.edges.map((a) => a.node.title),
    ImageURL: payload.selectedVariant.image.url,
    URL: payload.url,
    Brand: payload.vendor,
    Price: payload.selectedVariant.priceV2.amount,
    CompareAtPrice: payload.selectedVariant.compareAtPriceV2.amount,
  };
  _learnq.push(['track', 'Viewed Product', product]);

Add Added to Cart tracking :

var _learnq = window._learnq || []; var cart = { total_price: payload.cart.cost.totalAmount.amount, $value: payload.cart.cost.totalAmount.amount, original_total_price: payload.cart.cost.subtotalAmount.amount, items: payload.cart.lines, }; _learnq.push(['track', 'Added to Cart', cart]);

Track logged-in users :

var _learnq = window._learnq || [];
_learnq.push([
  'identify',
  {
    $email: customer.customer.email,
    $first_name: customer.customer.firstName,
    $last_name: customer.customer.lastName,
  },
]);

Thansk for reading !! , If you like this blog pls check my another blog on
Guide-for-the-hooks-in-the-Shopify Hydrogen. If you need headless commerce development services, we deliver tailored, scalable solutions to boost your online store!
Happy Coding !!