Skip to main content
Solved

What is the new way for 'viewed product' on a custom integration?


Forum|alt.badge.img+1

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.

Best answer by ddowie

Jakob Eriksson wrote:
ddowie wrote:

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>

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

7 replies

Brian Turcotte
Forum|alt.badge.img+37

Hi @PWMKTG_Team!

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


Forum|alt.badge.img+1
  • Author
  • Contributor II
  • 3 replies
  • November 9, 2023

Thank 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.


Forum|alt.badge.img

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. 


Forum|alt.badge.img+3
  • Problem Solver I
  • 8 replies
  • November 21, 2023

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.

 


Forum|alt.badge.img
ddowie wrote:

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? 


Forum|alt.badge.img+1
  • Author
  • Contributor II
  • 3 replies
  • November 28, 2023
PWMKTG_Team wrote:

Thank 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.


Forum|alt.badge.img+3
  • Problem Solver I
  • 8 replies
  • Answer
  • November 29, 2023
Jakob Eriksson wrote:
ddowie wrote:

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>

 


Reply