Hello!
We’ve been referring to the guides on tracking ‘viewed product’ and integrating with a custom integration.
It seems that the API version we have been using is outdated. It does not seem there is documentation regarding this with the ‘klaviyo object’.
We are wanting to integrate all of these items into Google Tag Manager.
Solved
What is the new way for 'viewed product' on a custom integration?
+2Best answer by ddowie
Hi, today I started implementing klaviyo to custom ecommerce.
I managed to track viewProduct events via GTM only.
In GTM I created a new custom HTML tag that hooks to an already existing GA4 trigger (view_item). In my case all data was already in the datalayer so all that was needed was a little remapping:
var _learnq = _learnq || [];
var item = {
"ProductName": {{DL - eventModel}}.items[0].item_name,
"ProductID": {{DL - eventModel}}.items[0].item_id,
"SKU": {{DL - eventModel}}.items[0].sku,
"Categories": categories,
"ImageURL": {{DL - eventModel}}.items[0].image_url,
"URL": {{DL - eventModel}}.items[0].url,
"Brand": {{DL - eventModel}}.items[0].item_brand,
"Price": parseFloat({{DL - eventModel}}.items[0].price).toFixed(2),
"CompareAtPrice": parseFloat({{DL - eventModel}}.items[0].price+{{DL - eventModel}}.items[0].discount).toFixed(2)
};
_learnq.push(["track", "Viewed Product", item]);
But it would be really nice if we could send viewProduct event to klaviyo server side - with api call.
That way data would be more realistic.
Hi ddowie,
Thank you for replying.
The code snippet you refer to is it exactly that one that you used?
No. This is GTM “Custom HTML tag” that transforms GA4 view_item data => Klaviyo “Viewed Product” event
It needs to have datalayer {{DL - eventModel}} defined.
<script type="text/javascript">
var iteration;
var categories = new Array();
//max 6 categories
for(var i=1; i<6; i++) {
if (i == 1) iteration = "";
else iteration = String(i);
if (typeof {{DL - eventModel}}.items[0]["item_category"+iteration] !== undefined) {
categories.push({{DL - eventModel}}.items[0]["item_category"+iteration]);
}
}
var _learnq = _learnq || [];
var item = {
"ProductName": {{DL - eventModel}}.items[0].item_name,
"ProductID": {{DL - eventModel}}.items[0].item_id,
"SKU": {{DL - eventModel}}.items[0].sku,
"Categories": categories,
"ImageURL": {{DL - eventModel}}.items[0].image_url,
"URL": {{DL - eventModel}}.items[0].url,
"Brand": {{DL - eventModel}}.items[0].item_brand,
"Price": parseFloat({{DL - eventModel}}.items[0].price).toFixed(2),
"CompareAtPrice": parseFloat({{DL - eventModel}}.items[0].price+{{DL - eventModel}}.items[0].discount).toFixed(2)
};
_learnq.push(["track", "Viewed Product", item]);
</script>
+37Hi
This is our most-updated developer documentation on custom integrations, which describes the klaviyo object and also contains example payloads for viewed product tracking:
If you’re still stuck after reviewing that information, feel free to follow up here!
Best,
Brian
+2Thank you Brian. No luck so far.
So far we have tried replacing item.__ values with our product item values and still no luck. Active on site is working buy we haven’t gotten ‘viewed product’ metrics to populate.
Just for reference the site is made with Next JS & Azure.
Iam having the same problem when setting up in GTM and have been searching through the guides and documentation from Klaviyo as well but still have not found a good answer. Is it possible to get help technical 1on1 support from Klaviyo for this? Would really appreciate it.
+3Hi, today I started implementing klaviyo to custom ecommerce.
I managed to track viewProduct events via GTM only.
In GTM I created a new custom HTML tag that hooks to an already existing GA4 trigger (view_item). In my case all data was already in the datalayer so all that was needed was a little remapping:
var _learnq = _learnq || [];
var item = {
"ProductName": {{DL - eventModel}}.items[0].item_name,
"ProductID": {{DL - eventModel}}.items[0].item_id,
"SKU": {{DL - eventModel}}.items[0].sku,
"Categories": categories,
"ImageURL": {{DL - eventModel}}.items[0].image_url,
"URL": {{DL - eventModel}}.items[0].url,
"Brand": {{DL - eventModel}}.items[0].item_brand,
"Price": parseFloat({{DL - eventModel}}.items[0].price).toFixed(2),
"CompareAtPrice": parseFloat({{DL - eventModel}}.items[0].price+{{DL - eventModel}}.items[0].discount).toFixed(2)
};
_learnq.push(["track", "Viewed Product", item]);
But it would be really nice if we could send viewProduct event to klaviyo server side - with api call.
That way data would be more realistic.
Hi, today I started implementing klaviyo to custom ecommerce.
I managed to track viewProduct events via GTM only.
In GTM I created a new custom HTML tag that hooks to an already existing GA4 trigger (view_item). In my case all data was already in the datalayer so all that was needed was a little remapping:
var _learnq = _learnq || [];
var item = {
"ProductName": {{DL - eventModel}}.items[0].item_name,
"ProductID": {{DL - eventModel}}.items[0].item_id,
"SKU": {{DL - eventModel}}.items[0].sku,
"Categories": categories,
"ImageURL": {{DL - eventModel}}.items[0].image_url,
"URL": {{DL - eventModel}}.items[0].url,
"Brand": {{DL - eventModel}}.items[0].item_brand,
"Price": parseFloat({{DL - eventModel}}.items[0].price).toFixed(2),
"CompareAtPrice": parseFloat({{DL - eventModel}}.items[0].price+{{DL - eventModel}}.items[0].discount).toFixed(2)
};
_learnq.push(["track", "Viewed Product", item]);
But it would be really nice if we could send viewProduct event to klaviyo server side - with api call.
That way data would be more realistic.
Hi ddowie,
Thank you for replying.
The code snippet you refer to is it exactly that one that you used?
+2Thank you Brian. No luck so far.
So far we have tried replacing item.__ values with our product item values and still no luck. Active on site is working buy we haven’t gotten ‘viewed product’ metrics to populate.
Just for reference the site is made with Next JS & Azure.
We’ve gotten ‘viewed product’ to fire in GTM Debug only. Live & published does not send out.
+3Hi, today I started implementing klaviyo to custom ecommerce.
I managed to track viewProduct events via GTM only.
In GTM I created a new custom HTML tag that hooks to an already existing GA4 trigger (view_item). In my case all data was already in the datalayer so all that was needed was a little remapping:
var _learnq = _learnq || [];
var item = {
"ProductName": {{DL - eventModel}}.items[0].item_name,
"ProductID": {{DL - eventModel}}.items[0].item_id,
"SKU": {{DL - eventModel}}.items[0].sku,
"Categories": categories,
"ImageURL": {{DL - eventModel}}.items[0].image_url,
"URL": {{DL - eventModel}}.items[0].url,
"Brand": {{DL - eventModel}}.items[0].item_brand,
"Price": parseFloat({{DL - eventModel}}.items[0].price).toFixed(2),
"CompareAtPrice": parseFloat({{DL - eventModel}}.items[0].price+{{DL - eventModel}}.items[0].discount).toFixed(2)
};
_learnq.push(["track", "Viewed Product", item]);
But it would be really nice if we could send viewProduct event to klaviyo server side - with api call.
That way data would be more realistic.
Hi ddowie,
Thank you for replying.
The code snippet you refer to is it exactly that one that you used?
No. This is GTM “Custom HTML tag” that transforms GA4 view_item data => Klaviyo “Viewed Product” event
It needs to have datalayer {{DL - eventModel}} defined.
<script type="text/javascript">
var iteration;
var categories = new Array();
//max 6 categories
for(var i=1; i<6; i++) {
if (i == 1) iteration = "";
else iteration = String(i);
if (typeof {{DL - eventModel}}.items[0]["item_category"+iteration] !== undefined) {
categories.push({{DL - eventModel}}.items[0]["item_category"+iteration]);
}
}
var _learnq = _learnq || [];
var item = {
"ProductName": {{DL - eventModel}}.items[0].item_name,
"ProductID": {{DL - eventModel}}.items[0].item_id,
"SKU": {{DL - eventModel}}.items[0].sku,
"Categories": categories,
"ImageURL": {{DL - eventModel}}.items[0].image_url,
"URL": {{DL - eventModel}}.items[0].url,
"Brand": {{DL - eventModel}}.items[0].item_brand,
"Price": parseFloat({{DL - eventModel}}.items[0].price).toFixed(2),
"CompareAtPrice": parseFloat({{DL - eventModel}}.items[0].price+{{DL - eventModel}}.items[0].discount).toFixed(2)
};
_learnq.push(["track", "Viewed Product", item]);
</script>
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.