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

I’m facing a similar issue but my approach is different.
Website is a Shopify.
In Piwik PRO Tag Manager, I’ve set up the default ‘Ecommerce add to cart’ and ‘Ecommerce product detail view’ tags.
In those tags I completed the Product mapping (SKU, Name, Price, Quantity, Brand, Variant, Category) and these work as they should, show up in the debugger and the e-commerce reports, no issues there.

However, the default ‘Ecommerce order tag’ poses issues.
I completed the Product mapping there too the same way as the ‘Ecommerce add to cart’ and ‘Ecommerce product detail view’ tags.
But I am confused now what to complete for the Order Information mapping.

Now, the tag does fire!
And it fires on an arguments.purchase custom event:

But nothing appears in the debugger or the e-commerce reports.
When I dive deeper, I do see an error message:

           ....
            window._paq = window._paq || [];
            _paq.push(["ecommerceOrder", products, paymentInformation]);
        } catch (e) {
            e.message = 'The ecommerce order tag failed to generate an analytics request due to misconfiguration. ' +
                'Click the link on the right to identify the problem line. ' +
                'For assistance, refer to the help center for proper ecommerce tracking setup: ' +
                'https://help.piwik.pro/support/tag-manager/ecommerce-order-tag/' + '\n' +
                'Original error message: ' + e.message;
            throw e;
        }
    })();

So there is clearly some kind of misconfiguration in the mapping.
I’ve already tried different values in the Tag Manager for the Order Information Mapping but nothing seems to work:
Order ID: OrderIdValue, OrderId, order_id, …
And so on for all the field in the Order Information Mapping.

I haven’t tried Michaels solution yet because I would prefer to solve it through the off-the-shelf tags in Piwik PRO tag Manager.

My first guess is I’m using the wrong properties of the Shopify transaction details but I can’t figure out what they should be instead.

Kind regards

Hi @Dexville,

I would “blame” the transaction ID field. It looks to me like it’s value is an integer and not a string. As you can see below, the orderId field is a string.

When it comes to mapping these values inside the tag - you have to use the names that your dataLayer provides (e.g. transcation_id, value).

Dear Anthony,

Thx for your reply.
I think you could be right: the transaction_id is not between double quotes and therefore not a string, contrary to all the other values.

Now I have 2 other questions:

  • How can I change the value to a string? I suppose this requires some custom JavaScript variables?
  • I’m sill confused about the names in the dataLayer I have to use in the tag for the Order information mapping (not the Product mapping). I’m missing some things in the dataLayer there (like grand total, sub total and discount).

I’m beginning to think these things aren’t even pushed into the dataLayer.

I think you should be able to handle this with 2 custom JS variables:

  1. Capture the order/transaction ID from the dataLayer
  2. Change the value of this dataLayer variable to a string (e.g. toString)

And then use the second variable inside the order tag template.

I’m sill confused about the names in the dataLayer I have to use in the tag for the Order information mapping (not the Product mapping). I’m missing some things in the dataLayer there (like grand total, sub total and discount).

It’s possible that some dataLayer values are not pushed from your site. Note that not all order parameters are required in this case. You can skip the optional parameters if you want.

Coming back to this cause I’m still at square one :frowning:

To walk through it:
I’ve added 2 variables.

One dataLayer variable capturing transaction_id (dataLayer_transaction_id)

One Custom JS variable (Custom_JS_ValueToString) with a script to capture the transaction_id (value) and turn it into a string.
This should only work when there is a transaction_id on the thank_you page.

And this Custom JS variable is filled out in the Order Information of the Ecommerce order tag:

But a new test is still negative.
When I check the dataLayer the transaction_id is still not between double quotes, hence still a value and not a string?

When I check the variables, I do see them both. So I’d say the transaction_id is retrieved from the dataLayer but it seems it’s still a value in the Custom JS variable and not a string.

So is there something wrong with the script (sorry, no JS-guru :slightly_smiling_face:) but it seems pretty straightforward.

And obviously still nothing in the debugger.
Again: the other two Ecommerce tags (Add to Cart and Product Detail) work perfectly.

Would it be possible for me to make a test transaction of some sorts to check the setup? If the answer is yes - you can send me the details via a private message.

Dear Anthony,

That’s the other annoying thing: it’s a 3rd party website (not ours).
A live website and the only way to ‘test’ it is to actually order something and pay for it, hehe :upside_down_face:

I do have a bunch of screenshots of the entire process (but I was limited to 5 in the post). I can share these.

That’s fine, I think we can handle this without direct access :slight_smile:.

In general, the dataLayer variable (arguments.purchase) won’t change as we are not really modyfing it at that point. What we are doing is taking a part of that (transaction_id) and parsing it to string in a new variable.

The script looks fine to me and it should be fine as long as it doesn’t throw any errors :wink:. I think this might be an issue with how the tag manager debugger displays values. It seems to me that in reality the Custom_JS_ValueToString variable is indeed a string and the debugger window doesn’t tell us the truth. You can always check the real variable type by adding a console.log before the transaction ID is returned. E.g. console.log(typeof(transactionIdString));. TL;DR the custom JS variable looks fine.

Back to the issue - I think you should include all of the order information (not the product mapping) in double curly braces. Like this (replace the transaction ID with your custom variable):

Dear Anthony,

Thx for the follow-up and the quick responses.
Brainwave?
I was just playing around with the Ecommerce Order Tag.
I know for sure the site uses the Google Analytics 4 tag (because of the arguments.xxx events).
And when I presetted it (again), I saw indeed the Order information between {{ }}, wich wasn’t the case before.
So I modified that now, I’ll wait for a new order and keep you posted.

Dear Anthony,

Working! :grinning:
New order in the shop and it pops up in the debugger and the e-commerce reports

Thank you so much for the guidance and follow-up!
Very useful for future projects.

2 Likes