# Piwik Pro Integration with Shopify for Ecommerce

**URL:** <https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237>\
**Category:** Data collection and tags\
**Created:** [August 20, 2021, 5:21pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237 "2021-08-20T17:21:14Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joachim](https://avatars.discourse-cdn.com/v4/letter/j/a87d85/32.png) [@Joachim](https://community.piwik.pro/u/Joachim)\
**Post date:** [August 20, 2021, 5:21pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/1 "2021-08-20T17:21:14Z")

</div>

I set up ecommerce tracking as described in the support description ([How to set up ecommerce tracking? - #2 by pp.support](https://community.piwik.pro/t/how-to-set-up-ecommerce-tracking/79/2)) 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!

---

<div class="post-metadata">

**Author:** ![Michael](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/michael/32/27_2.png) [@Michael](https://community.piwik.pro/u/Michael)\
**Post date:** [August 23, 2021, 2:59pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/2 "2021-08-23T14:59:11Z")

</div>

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:

```auto
//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

```auto
//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

```auto
//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

```auto
//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! 🙂

---

<div class="post-metadata">

**Author:** ![Joachim](https://avatars.discourse-cdn.com/v4/letter/j/a87d85/32.png) [@Joachim](https://community.piwik.pro/u/Joachim)\
**Post date:** [August 26, 2021, 2:16pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/3 "2021-08-26T14:16:24Z")

</div>

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.

 ![Bildschirmfoto 2021-08-26 um 16.15.39](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/324ef3a12309cb5384bddbebbf0ca17217897c4a.png)

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

---

<div class="post-metadata">

**Author:** ![Michael](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/michael/32/27_2.png) [@Michael](https://community.piwik.pro/u/Michael)\
**Post date:** [August 26, 2021, 2:40pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/4 "2021-08-26T14:40:15Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![Joachim](https://avatars.discourse-cdn.com/v4/letter/j/a87d85/32.png) [@Joachim](https://community.piwik.pro/u/Joachim)\
**Post date:** [August 27, 2021, 6:35pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/5 "2021-08-27T18:35:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Michael](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/michael/32/27_2.png) [@Michael](https://community.piwik.pro/u/Michael)\
**Post date:** [August 27, 2021, 7:59pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/6 "2021-08-27T19:59:58Z")

</div>

@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 🙂

---

<div class="post-metadata">

**Author:** ![musa\_copyleft](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/musa_copyleft/32/120_2.png) [@musa\_copyleft](https://community.piwik.pro/u/musa_copyleft)\
**Post date:** [September 20, 2021, 5:39am UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/7 "2021-09-20T05:39:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Michael](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/michael/32/27_2.png) [@Michael](https://community.piwik.pro/u/Michael)\
**Post date:** [September 20, 2021, 12:05pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/8 "2021-09-20T12:05:28Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![musa\_copyleft](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/musa_copyleft/32/120_2.png) [@musa\_copyleft](https://community.piwik.pro/u/musa_copyleft)\
**Post date:** [September 27, 2021, 1:31am UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/9 "2021-09-27T01:31:32Z")

</div>

Actually now i can see e-commerce data Thanks you

---

<div class="post-metadata">

**Author:** ![Dexville](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/dexville/32/1636_2.png) [@Dexville](https://community.piwik.pro/u/Dexville)\
**Post date:** [November 9, 2023, 9:00am UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/10 "2023-11-09T09:00:42Z")

</div>

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:

 ![Shopify_purchase](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/5/5913d9f7b672d0dc7b8e10b521fb14bf513b74fa.png)

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

```auto
           ....
            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.

 ![EcommerceOrderTag](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/b/bfe46864ca4452dcd834fddc133db694adff0faf.png)

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

---

<div class="post-metadata">

**Author:** ![anthonybartczak](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/anthonybartczak/32/2430_2.png) [@anthonybartczak](https://community.piwik.pro/u/anthonybartczak)\
**Post date:** [November 10, 2023, 7:46am UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/11 "2023-11-10T07:46:29Z")

</div>

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`).

 ![obraz](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/6/6f998c40a92b90bd2526e9f0d5438b72a4a77e52.png)

---

<div class="post-metadata">

**Author:** ![Dexville](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/dexville/32/1636_2.png) [@Dexville](https://community.piwik.pro/u/Dexville)\
**Post date:** [November 10, 2023, 9:35am UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/12 "2023-11-10T09:35:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![anthonybartczak](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/anthonybartczak/32/2430_2.png) [@anthonybartczak](https://community.piwik.pro/u/anthonybartczak)\
**Post date:** [November 10, 2023, 9:59am UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/13 "2023-11-10T09:59:44Z")

</div>

> [@Dexville](#):
>
> How can I change the value to a string? I suppose this requires some custom JavaScript variables?

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.

---

<div class="post-metadata">

**Author:** ![Dexville](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/dexville/32/1636_2.png) [@Dexville](https://community.piwik.pro/u/Dexville)\
**Post date:** [November 15, 2023, 12:23pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/14 "2023-11-15T12:23:21Z")

</div>

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

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

One dataLayer variable capturing transaction\_id (dataLayer\_transaction\_id)

 ![datalayer_variable](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/9/9ed4885d2ce8558e25ad1ba5fc531b3eaeab3c78.png)

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.

 ![CustomJS_variable](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/e/efb4b81343d05cbcb2d43eaabb4f35edd5cf5f6e.png)

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

 ![OrderInformation_EcommerceTag](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/e/e4b59e222a6020ae505a855303ea1edb6fa046be.png)

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?

 ![dataLayer_purchase_2](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/a/acb1fd3062f2b0cfd748c1b8051e8f354ed24f0d.png)

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.

 ![variables_purchase2](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/4/45298b62d0d14d8be78f798d82e56de0c00612a8.png)

So is there something wrong with the script (sorry, no JS-guru 🙂) 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.

---

<div class="post-metadata">

**Author:** ![anthonybartczak](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/anthonybartczak/32/2430_2.png) [@anthonybartczak](https://community.piwik.pro/u/anthonybartczak)\
**Post date:** [November 15, 2023, 12:28pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/15 "2023-11-15T12:28:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dexville](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/dexville/32/1636_2.png) [@Dexville](https://community.piwik.pro/u/Dexville)\
**Post date:** [November 15, 2023, 12:44pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/16 "2023-11-15T12:44:14Z")

</div>

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 🙃

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

---

<div class="post-metadata">

**Author:** ![anthonybartczak](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/anthonybartczak/32/2430_2.png) [@anthonybartczak](https://community.piwik.pro/u/anthonybartczak)\
**Post date:** [November 15, 2023, 1:17pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/17 "2023-11-15T13:17:30Z")

</div>

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

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 😉. 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):

 ![obraz](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/7/7f48ed3ad572ec60b05a2cde30ba7cade7dbea78.png)

---

<div class="post-metadata">

**Author:** ![Dexville](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/dexville/32/1636_2.png) [@Dexville](https://community.piwik.pro/u/Dexville)\
**Post date:** [November 15, 2023, 1:37pm UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/18 "2023-11-15T13:37:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dexville](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/dexville/32/1636_2.png) [@Dexville](https://community.piwik.pro/u/Dexville)\
**Post date:** [November 16, 2023, 9:59am UTC](https://community.piwik.pro/t/piwik-pro-integration-with-shopify-for-ecommerce/237/19 "2023-11-16T09:59:35Z")

</div>

Dear Anthony,

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

 ![Capture_order](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/7/7a97b13e861045380c0e78b92703ca4a968266b9.png)

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