I’m trying to get Klaviyo into a custom integration. Using the new klaviyo object, it’s successfully registering Active On Site and Started Checkout, but not Viewed Product.
I’m injecting the code in NextJS on product pages using next/script (this is the same thing I’m doing for the Active On Site snippet):
<Script
id='klaviyo-viewed-product'
dangerouslySetInnerHTML={{
__html: `
!(function () {
if (window.klaviyo) {
klaviyo.trackViewedItem({
ProductName: "${data?.seminarDetails?.name}",
ProductID: "${data?.seminarDetails?.id}",
SKU: "${data?.seminarDetails?.__typename}",
URL: "${url}",
Price: ${data?.seminarDetails?.price}
})
}
})();
`
}}
/>
Since the above isn’t working, I tried wrapping it in some debug logging:
<Script
id='klaviyo-viewed-product'
dangerouslySetInnerHTML={{
__html: `
!(async function () {
if (window.klaviyo) {
const resp = await klaviyo.trackViewedItem({
ProductName: "${data?.seminarDetails?.name}",
ProductID: "${data?.seminarDetails?.id}",
SKU: "${data?.seminarDetails?.__typename}",
URL: "${url}",
Price: ${data?.seminarDetails?.price}
})
.then(() => console.log('Klaviyo back'))
.catch((error => console.log(error));
} else {
console.log('No Klaviyo yet');
}
})();
`
}}
/>
And it’s successfully logging ‘Klaviyo back’, so the core klaviyo object is successfully loading, and it’s making the call without throwing an error, but … nothing is happening on the back end. Any ideas?