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.
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.
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!
@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
]);
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 @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?
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!
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?
