Shopify store ecommerce tracking

Hi Community? I want to track e-commerce orders from Shopify store. I have seen the articles which say e-commerce order tracking can not be implemented using Javascript on checkout page. The reason is Shopify does not allow to execute third party Javascript code. So, I did this using image beacon.

Here is the sample code.

{% capture products_list %}
{% for line_item in line_items %}
[item{{forloop.index}} {{ line_item.sku }},"","",{{line_item.price}},{{line_item.quantity}}]
{% if forloop.last == false %}::{% endif%}
{% endfor %}
{% endcapture %}
{% assign products_array = products_list , split: '::'%}	
{{ products_array }}

<img src="https://shopsustainably.matomo.cloud/matomo.php?idsite=1&rec=1&bots=1&action_name=ecommerceTracking&idgoal=0&ec_id={{ order_number }}&revenue={{total_price}}&ec_items=[{{products_array}}]" style="border:0;" alt="" />

However, I am facing following issue through this code.
1: Product SKU is empty string.
2: Product name is empty string.
3: On checkout page I set the product quantity 1 but on Matomo dashboard it is being displayed as zero.
4: The tracking of this checkout page make a new visitor entry on Matomo dashboard page. Please have a look at attached file.

Hi Naser

I just came to post the same thing, did you ever get this working?

Thanks
Adham

1 Like

Have a look at: E-commerce order quantity is zero - Support & Bugs - Matomo forums

@adsham yes, everything is working fine.

Great - I have tried using your code above (we are implementing on Shopify site but I am having a problem with everything being empty. Do you have any ideas?

Any guidance you can provide would be most helpful. Many thanks in advance!

Ad

@Naser_Aslam I would like to ask, where was this code snippet injected in the shopify code editor? Did you add it in the cart.liquid page? because as I am aware, we aren’t allowed to edit the checkout page unless we are in the shopify plus account, so I was wondering how this could be implemented in other shopify plans

@itsbinay @adsham
First of all, my plan at Shopify is basic plan.
Secondly, Go to Setting, checkout and the Additional Script section of the checkout page. The screenshots are also attached below.

Add the default tracking code which you are already using at theme.liquid page and then add following additional code for e-commerce order tracking.


//Tracking Product Views in Matomo
var items={{ order.line_items | json}};
console.log(items);
for (var i = 0; i < items.length; ++i) {
_paq.push(['setEcommerceView',
    "", // (Required) productSKU
    items[i].title, // (Optional) productName
    "Accessories", // (Optional) categoryName
   items[i].price // (Optional) price
]);
}
//Tracking Category Views in Matomo
_paq.push(['setEcommerceView',
    false, // Product name is not applicable for a category view.
    false, // Product SKU is not applicable for a category view.
    "",
]);

//Adding a Product to the order
var i;
for (i = 0; i < items.length; ++i) {
_paq.push(['addEcommerceItem',
  "123456789", // (required) SKU: Product unique identifier
  items[i].title, // (optional) Product name
  [""], 
  items[i].price, // (Recommended) Product Price
  1 // (Optional - Defaults to 1)
]);
}
//Tracking the Ecommerce Order
_paq.push(['trackEcommerceOrder',
    {{order.order_number}} , // (Required) orderId
    {{order.total_price}}, // (Required) grandTotal (revenue)
    {{order.total_price}}, // (Optional) subTotal
    '', // (optional) tax
    '', // (optional) shipping
    false // (optional) discount
]);



If still have any question please DM me. hafiznaseraslam92@gmail.com

Thanks!

@Naser_Aslam hey I am trying to do the same, what exactly is the additional script doing?

Hi is this working for you guys,
I’ve put the code in the checkout but dont get any data.

Hi @seiya!
Yes, this code is working for me, but as you can see in the following line that I am using some variables so they can be different in your case.
var items={{ order.line_items | json}};

Please cross check variable items, it should not be empty. And if you are not a developer then please contact me at hafiznaseraslam92@gmail.com

Hi,
i see some results, but my total revenu is wrong
Usually I have 6897$ instead of 68.97$ Do you know why ?

Hi @seiya!
I think you need to divide price by 100. Please replace items[i].price with items[i].price/100, also replace {{order.total_price}} with {{order.total_price}}/100. I hope it will work for you.

@Naser_Aslam I added the script mentioned above to my additional scripts in the checkout section and it is appearing on my thank you page and is not sending to Matomo… Any idea on how to have it not appear on the thank you page and send the data back to Matomo?

I put a tag around it and it seems to have disappeared from the thank you page, but still not seeing any of the ecom data showing up in Matomo. Any thoughts? :slight_smile:

Hi everyone.

We’ve just published an updated guide for setting up ecommerce tracking in Shopify sites here: https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-my-shopify-store/

This includes tracking Tags as “Category” views, Product Views, Cart Updates as well as Ecommerce Orders.

1 Like

Hi @rstark
Thanks for updating me. You just saved our lives by sharing this!

1 Like

As for the new visitor entry on the Matomo dashboard, it’s possible that the image beacon implementation is triggering a separate tracking session

Please check the console tab while visiting thank-you/confirmation page of your website. There will be some error message so please share screenshot of those messages. Thanks!

1 Like

So, after getting the ecommerce tracking for shopify added and working, i can only see the results in the all visits. There is no summary. Where can i find, or create a report for the ecommerce purchases and revenue?

Hi @renthemighty
You can in the e-commerce section of Matomo: