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.
Best answer by Brian Turcotte
View original
