Contributor II

Solved

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

Forum|Forum|2 years ago
November 9, 2023
7 replies
1062 views

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.

integrations

This topic has been closed for replies.

Best 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>

Brian Turcotte

Klaviyo Alum

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:

Integrate an ecommerce platform without a pre-built Klaviyo integration

If you’re still stuck after reviewing that information, feel free to follow up here!

Best,

Brian

P

PWMKTG_TeamAuthor

Contributor II

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.

J

Jakob Eriksson

Contributor I

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.

D

ddowie

Problem Solver I

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.

J

Jakob Eriksson

Contributor I

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?

P

PWMKTG_TeamAuthor

Contributor II

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.

D

ddowieAnswer

Problem Solver I

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>

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials