Piwik Pro Integration with Shopify for Ecommerce

I set up ecommerce tracking as described in the support description (How to set up ecommerce tracking? - #2 by pp.support) but I do not get any data in the dashboard. I’m running a shopify shop, Piwik analytics is working but no ecommerce tracking! Help appreciated, thanks!

FYI the snippets in the article you mentioned need to be parametrised with dynamically acquired data from shop engine, Shopify in your case. If you haven’t done that yourself, we have codes for integrating with Shopify that you may use. They are sending information to dataLayer, and then information from dataLayer is picked up by yet other tags. So in whole you need to set up 4 tags.

  1. For pulling ecommerce cart from Shopify to dataLayer
  2. For pulling order contents from Shopify to dataLayer on order confirmation page - as far as I know, order confirmation page can be supplied with additional JS code only in selected Shopify plans, make sure that it is possible in your case.
  3. For taking cart from dataLayer and sending to Piwik PRO
  4. For taking order confirmation from dataLayer and sending to Piwik PRO.

  1. Run this on every page view in the shop:
//cart update event

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var shopifyCartData = JSON.parse(this.responseText);
    var cartUpdateEvent = {};
    cartUpdateEvent.event="cart_update";
    cartUpdateEvent.cart_amount=shopifyCartData.total_price/100;
    cartUpdateEvent.products=[];

    shopifyCartData.items.forEach(function(product){
        console.log(product);
        var formattedProduct={};
        formattedProduct.sku = product.sku;
        formattedProduct.name = product.title;
        formattedProduct.price = product.price/100;
        formattedProduct.quantity = product.quantity;
        formattedProduct.category = product.product_type;
        cartUpdateEvent.products.push(formattedProduct);
    });
    dataLayer.push(cartUpdateEvent);

  }
};
xhttp.open("GET", "/cart.js", true);
xhttp.send();
  1. Run this on order-confirmation page
//order confirmation dataLayer event
//to be executed on shopify "thank_you" URL e.g. https://piwik-pro-dev-shop.myshopify.com/47523889308/checkouts/60754f95a148f9f82c36c80ab0c2af35/thank_you

var ShopifyOrderData = Shopify.checkout;
var orderConfirmationEvent = {};

orderConfirmationEvent.event="order_confirmation";
orderConfirmationEvent.order_id=ShopifyOrderData.order_id;
orderConfirmationEvent.grand_total=ShopifyOrderData.total_price;
orderConfirmationEvent.subtotal=ShopifyOrderData.subtotal_price;
orderConfirmationEvent.tax=ShopifyOrderData.total_tax;
orderConfirmationEvent.shipping=ShopifyOrderData.shipping_rate.price;
orderConfirmationEvent.discount=ShopifyOrderData.discount;
orderConfirmationEvent.products=[];

Shopify.checkout.line_items.forEach(function(product){
    console.log(product);
    var formattedProduct={};
    formattedProduct.sku = product.sku;
    formattedProduct.name = product.title;
    formattedProduct.price = product.price;
    formattedProduct.quantity = product.quantity;
    formattedProduct.category = ""
    orderConfirmationEvent.products.push(formattedProduct);
});
dataLayer.push(orderConfirmationEvent);

Important: to use dataLayer variables coming from above tags in the tags below, you need to configure each variable as dataLayer variable in Piwik PRO Tag Manager. You can see their names being included in double curly braces ( {{ }} ) in the tags below:

  1. Run this on dataLayer “cart_update” event - you need to configure such trigger
//tag to be fired on dataLayer "cart_update" event
<script>
  var _paq = _paq || [];
  var cart_amount = {{ cart_amount }};
  var products = {{ products }};
  products.forEach(function(product){
    _paq.push(["addEcommerceItem",product.sku, product.name,product.category, product.price, product.quantity])
});
_paq.push(["trackEcommerceCartUpdate",cart_amount]);  
</script>
  1. Run this on dataLayer “order_confirmation” event
//tag to be fired on "order_confirmation" event
<script>
  var _paq = _paq || [];
  var products = {{ products }};
  products.forEach(function(product){
    _paq.push(["addEcommerceItem",product.sku, product.name,product.category, product.price, product.quantity])
});
_paq.push(["trackEcommerceOrder",{{ order_id }}, {{ grand_total }}, {{ subtotal }}, {{ tax }}, {{ shipping }}, {{ discount }}]);
</script>

I hope this information will be helpful for you. Let us know if you were able to run your eCommerce tracking! :slight_smile:

3 Likes

Hi Michael, thanks very much for the help. The abandoned cart tracking is working and generating data, unfortunately not so the order confirmation script. The Piwik eCommerce Dashboard does not show my purchases. In Shopify there is no specific “Thank you” or confirmation page, you have to integrate individual scripts in the settings of the checkout in the admin panel. I added your script as suggested, I also have the google conversion tracking script running, which is working properly.

Any suggestions what I was missing? Thank you very much!

@Joachim As far as I can tell from the screenshot you included that script directly in the page. Is Piwik PRO code also embedded there? It needs to be to be able to pick up that information. What I’d rather suggest (if possible) is to embed Piwik PRO container there. Then that script would be just one of the tags.

If that is not possible for some reason - Piwik PRO tag has to be executed before that script, so it can pick up what you’re providing to dataLayer with script no. 4 that I shared.

Let me know if that helps!
Cheers

That was it! Thanks! I added the Piwik PRO script and it worked. Thank you!

1 Like

@Joachim that’s great to hear, thanks for the feedback! Feel free to create other topics here on the forum if you have any questions :slight_smile:

1 Like

I used the same method as before, but I’m still not getting any results.

Hi @musa_copyleft - what exactly are you having trouble with? Have you for sure embedded all the codes and Piwik PRO container in the checkout process?

Actually now i can see e-commerce data Thanks you

1 Like