Solved

Integrate Klaviyo with Shopify's Hydrogen as of 01-2024

  • 18 January 2024
  • 4 replies
  • 124 views

Badge

I have been through all of the responses to how to integrate Klaviyo with Shopify Hydrogen but to no avail, since all answers seem to just refer back to the code provided at https://developers.klaviyo.com/en/v1-2/docs/integrate-with-a-shopify-hydrogen-store...
This page is entirely out of date and does not easily integrate with Hydrogen’s current version. to get the Active onsite tracking working I was able to utilize the standard loadscript as described, but problems immediately arise for the viewed product and recently viewed item tracking. I managed to get them working as such within my products.$handle.tsx file, but it is drastically different than what was described:
 

  useEffect(() => {

    if (typeof window !== 'undefined') {

      window._learnq = window._learnq || [];

 

      const viewedProduct = {

        Name: product.title,

        ProductID: product.id.substring(product.id.lastIndexOf('/') + 1),

        Categories: product.collections

          ? product.collections.edges.map(

              (a: {node: {title: any}}) => a.node.title,

            )

          : null,

        ImageURL: selectedVariant?.image?.url || '',

        URL: window.location.href,

        Brand: product.vendor,

        Price: selectedVariant?.priceV2?.amount || '0', // Provide default value

        CompareAtPrice: selectedVariant?.compareAtPriceV2?.amount || '0', // Provide default value

      };

 

      window._learnq.push(['track', 'Viewed Product', viewedProduct]);

 

      const recentlyViewedItem = {

        Title: product.title,

        ItemId: product.id.substring(product.id.lastIndexOf('/') + 1),

        Categories: product.collections

          ? product.collections.edges.map(

              (a: {node: {title: any}}) => a.node.title,

            )

          : null,

        ImageUrl: selectedVariant?.image?.url || '',

        Url: window.location.href,

        Metadata: {

          Brand: product.vendor,

          Price: selectedVariant?.priceV2?.amount || '0', // Provide default value

          CompareAtPrice: selectedVariant?.compareAtPriceV2?.amount || '0', // Provide default value

        },

      };

 

      window._learnq.push(['trackViewedItem', recentlyViewedItem]);

 

      console.log('Track Recently Viewed Item:', recentlyViewedItem);

      console.log('Track Viewed Product:', viewedProduct);

    }

  }, [product, selectedVariant]);


I have not been able to get the added to cart functionality integrated despite my best efforts, and have not attempted to track logged-in users as of yet. Please inform me if there is any way that the Klaviyo developers have managed to integrate the service with Hydrogen, as documentation is desperately needed due to Hydrogen’s overhaul in 2023.

icon

Best answer by Brian Turcotte 25 January 2024, 18:45

View original

4 replies

Userlevel 7
Badge +36

Hi @Krees!

I’m going to check on this internally and I’ll update the thread ASAP!

Best,

Brian

I’m also trying to integrate Klaviyo into my Hydrogen 2.0 site. Any help appreciated!

Userlevel 7
Badge +36

Hi @Krees & @amandajfm!

While there’s no official updates regarding the Hydrogen integration, I have forwarded this to the Product team and it’s definitely on their radar.

 

I will update the thread with any changes in the future.

 

Best,

Brian

@Brian Turcotte Any update on this? Would be awesome to get some updated docs around this integration.

Reply