Reading list Switch to dark mode

    How to integrate Shopify headless hydrogen theme with the Klaviyo?

    Updated 2 September 2023

    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.

    screenshot_1692599889637


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

    screenshot_1692600080232


    screenshot_1692600168821


    3. Fill out the Shopify Integration Setting Form.

    Searching for a Shopify
    Headless solution ?
    Find out More
    screenshot_1692600365456


    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
    Happy Coding !!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home