How to track ecommerce (setEcommerceView)?

Hi,

I want to set setEcommerceView parameters, but stuck with variabiles, how to input paramteres?

_paq.push(['setEcommerceView',
    "1234", // (Required) Product identifier (SKU)
    "Percy Jackson", // (Optional) Product name
    ["Books", "Adventure"], // (Optional) Product category or an array of up to 5 categories.
    9.99 // (Optional) Product price
]);

_paq.push(['addEcommerceItem',
    "1234", // (Required) Product identifier (SKU)
    "Percy Jackson", // (Optional) Product name
    ["Books", "Adventure"], // (Optional) Product category or an array of up to 5 categories.
    9.99, // (Optional) Product price
    5 // (Optional) Product quantity (default is 1)
]);

Best regards

What scope and script are you in? The product page?

https://www.litecart.net/en/wiki/products

Thanks for reply!

I want to track product views, carts and conversions. I read "readme" and says I need just to add following code, but where?

matomo::doTrackEvent(
      $category, // (string) — The Event Category (Videos, Music, Games...)
      $action,  // (string) — The Event's Action (Play, Pause, Duration, Add Playlist, Downloaded, Clicked...)
      $name,    // (string|bool) — (optional) The Event's object Name (a particular Movie name, or Song name, or File name...)
      $value    // (float|bool) — (optional) The Event's value
    );

Your code _paq.push looks like it could be the javascript library. This is the PHP library with the current implementation being matomo::setEcommerceView().

https://developer.matomo.org/api-reference/PHP-Matomo-Tracker

The tracking commands can be inserted to the files in the pages/ folder e.g. product.inc.php for product page loads. For impressions you might want to add tracking commands to func_draw.inc.php in draw_listing_product().

Oh thanks, yes, seems I confuse those modules, thanks.

I'm making js tracking :)

For JS tracking (not covered by this addon) you can do something similar to how Google Analytics events are done.
Mainly reference elements on the page and wrap them around conditions.

// Banners: promoView
  $('.banner').each(function(){
    gtag('event', 'view_promotion', {
      'promotions': [{
        'id': $(this).data('id'),
        'name': $(this).data('name'),
      }]
    });
  });

// Begin Checkout - Needs to fire after ajax load
  if (window.location.pathname.match(/\/checkout$/)) {
    $(document).ajaxSuccess(function(e, xhr, settings) {
      if (!settings.url.match(/checkout_cart.html$/)) return;
      $(xhr.responseText).find('.item').each(function(){
        gtag('event', 'begin_checkout', {
          'items': [
            {
              'id': $(this).data('sku'),
              'name': $(this).data('name'),
              'list_name': 'Shopping Cart',
              'price': $(this).data('price'),
              //'brand': '',
              //'category': '',
              //'variant': '',
              //'list_position': 1,
              'quantity': 1,
            }
          ],
          'coupon': ''
        });
      });
    });
  }

Thanks tim!

Maybe we should move to other module theme (js)?

Yes, I also get solution for product view (setEcommerceView) and order (trackEcommerceOrder), but can't get work add to cart (addEcommerceItem), I know I need to add "trackEcommerceCartUpdate" to send request to matomo, but when add on product page matomo shows every product view as abandoned cart... On where page should I add cart tracking? On product page or checkout?

However, here is code for product view and ecommerce tracking if anyone need:

//Item detail variabiles
  var check_brand = !!document.querySelector('.manufacturer');
  var product_id = $('#box-product').data("sku");
  var product_name = $('#box-product').data("name");
  var product_category = $('title').text().match(/^([^\|]+)\s|/)[1];

  if(check_price){
    price = document.querySelector('.campaign-price').innerText.replace("$","");
  } else {
    price = $('#box-product').data("price");
  }

_paq.push(['setEcommerceView',
    product_id, // (Required) Product identifier (SKU)
    product_name, // (Optional) Product name
    false, // (Optional) Product category or an array of up to 5 categories.
    price // (Optional) Product price
]);

// You need to call the trackPageView function to send the request to Matomo
_paq.push(['trackPageView']);

//Order ID variabiles
var order_data = document.getElementById('box-order-success');
var order_id = order_data.getAttribute('data-id');
var order_total = order_data.getAttribute('data-payment-due');

//Ordered items
var ordered_items = $(".item").map(function() {
	const item_list = [];
	var item_id = $(this).data("id");
	var item_name = $(this).data("name");
	var item_price = $(this).data("price");
	var item_quantity = $(this).data("quantity");
	var items = {'id': item_id, 'content_name':  item_name, 'value': item_price, 'quantity': item_quantity};
	item_list.push(items);

	return item_list;
	}).get();

_paq.push(['trackEcommerceOrder',
    order_id, // (Required) Order id
    order_total // (Required) Total (revenue)
]);

You could do a buy now button click event for cart tracking.

$('button[name="add_cart_product"]').click(function(){
  ...
});

Thanks,

like this?

$('button[name="add_cart_product"]').click(function(){
_paq.push(['addEcommerceItem',
    product_id, // (Required) Product identifier (SKU)
    product_name, // (Optional) Product name
    false, // (Optional) Product category or an array of up to 5 categories.
    price, // (Optional) Product price
    false// (Optional) Product quantity (default is 1)
]);
});

Where is best to put this code? Default, checkout, all?

You have to address the elements on the page

$('button[name="add_cart_product"]').click(function(){
  _paq.push(['addEcommerceItem',
      $('#box-product').data('sku'), // (Required) Product identifier (SKU)
      $('#box-product').data('name'), // (Optional) Product name
      false, // (Optional) Product category or an array of up to 5 categories.
      $('#box-product').data('final-price'), // (Optional) Product price
      $('#box-product input[name="quantity"]').val() // (Optional) Product quantity (default is 1)
  ]);
});

Double check to see that the referenced elements and properties are on the page.

@tim thanks! I add to default, blank and checkout.

Also need to add:

_paq.push(['trackEcommerceCartUpdate', $('#box-cart').data('total')]);

This function enables Matomo’s abandoned cart feature. It sends a request to Matomo specifying the current cart value. This value is not dynamically calculated from the prices and quantities of the products you’ve added via addEcommerceItems(). To solve this problem, you must either have access to this data in the Data Layer or use the getMatomoTotalCartValue() function.

Looks like you are making progress 👍
If other users wants this too you could always add it to the add-ons store.

@tim yes, I like to understand how to make something myself.I'm not developer, but little by little I try understand and make more and more things myself with your's, dodo's and help of others forum members, so thanks :)

Yes, I plan to add module for matomo in add-ons store, but still need to figure out carts tracking and some other minor bugs :)