Piwik Integration with WordPress for ECommerce

[Mihir_Jadi]

We are integrating Piwik Pro Plugin with WordPress for ECommerce Tracking.

Flow:

1. We want to collect data dynamically from WordPress and fed it to Piwik Pro.
2. Secondly, the data should be displayed on our WordPress site:
   i. On Order-Recieved page: Screenshot
   Sample static code which we got from Piwik Documentation, this needs to be
   implemented dynamically in Piwik Tag Manager:

   window.dataLayer.push({
       event: "order_confirmation",
       products: [{
            sku: "9",
            name: "Clitheroe Golf Club",
            category: [
                "GBT Events 2021",
            ],
            price: 85.00,
            quantity: 1,
        },
        {
            sku: "7",
            name: "Reddish Vale Golf Club",
            category: [
                "GBT Events 2021",
            ],
            price: 65.00,
            quantity: 1,
        },
    ],
    order_id: "9231",
    grand_total: 0.00,
    subtotal: 150.00,
    tax: 0.00,
    shipping: 0.00,
    discount: 150,
});

ii. On Checkout page: Screenshot
Sample static code which we got from Piwik Documentation,this needs to be
implemented dynamically in Piwik Tag Manager:
```
window.dataLayer.push({
event: “cart_update”,
products: [{
sku: “7”,
name: “Reddish Vale Golf Club”,
category: [
“GBT Events 2021”,
],
price: 65.00,
quantity: 1,
},
{
sku: “9”,
name: “Clitheroe Golf Club”,
category: [
“GBT Events 2021”,
],
price: 85.00,
quantity: 2,
},
],
cart_amount: 235.00,
});

iii. On Product Detail Page: [Screenshot](https://prnt.sc/1e9moyx)
    Sample static code which we got from Piwik Documentation, this needs to be 
    implemented dynamically in Piwik Tag Manager:

window.dataLayer.push({
event: “add_item”,
products: [{
sku: “7”,
name: “Reddish Vale Golf Club”,
category: [
“GBT Events 2021”,
],
price: 65.00,
quantity: 1,
},
],
});

We want to fed dynamic data to Piwik and change according to each specific order and display the data as above screenshots on our WordPress site. 

So, for these features ,do we need create a Custom WordPress plugin which can send data dynamically to Piwik ? Or is there any Piwik Pro feature which can do these ?

Please provide me if any other solution. Or if we are following long documentation then please suggest how to apply it shortly. 

Thank You.

[pslonina]

Hi @Mihir_Jadi, thanks for reaching out!

The logic behind communicating e-commerce events through the data layer needs to be covered on the website itself. Therefore - creating a custom WordPress plugin for that seems to be a viable solution.

Another way to go - providing that you are using WooCommerce - would be using one of the existing WordPress plugins which communicate e-commerce events to the data layer. That said - the data layer objects structure would probably be a bit different than the one described in the documentation, therefore - the e-commerce configuration would have to be adjusted a bit too.

I hope the above helps. Please don’t hesitate to follow up on this thread if you need more details.

Thanks!

[Mihir_Jadi]

Hi @pslonina, thanks for your reply.

Can you please suggest WordPress plugin which can communicate e-commerce events to data layer ?

[pslonina]

@Mihir_Jadi - sure, let me run a quick research on it. I’ll get back to you with answers tomorrow

[Mihir_Jadi]

@Mihir_Jadi

events

Thanks @pslonina

I’m also doing the same here. Please let me know if you get anything first.

[Mihir_Jadi]

Hi @pslonina

I want to send dynamic data to piwik server.
I followed the documentation regarding it, but didn’t get clear idea, here is the documentation which I am following:

How to set up ecommerce tracking?

The recommended solution for ecommerce is to use dataLayer along with custom tags in the Tag Manager module. Data layer requirements Create a data layer. We strongly recommend pasting the data layer snippet before the Piwik PRO container code (in section). <script>window.dataLayer = window.dataLayer || [];</script> Make sure that the object describing the cart is posted within a single data layer event every time an ecommerce cart is being updated. The object should contain the following se…

Here are my few queries on it:

1. Which type of Tag and Trigger should be made on Piwik Pro → Tag Manager, and how can I define action event on it.
2. After creating the Tag how can we pass dynamic data from our Website to Piwik Pro for analytics.

So, can you please give a clear flow on it ?

Regards,
Mihir

[pslonina]

Hi @Mihir_Jadi ,
Thank you for your patience. I’ve been looking into different plugins and scenarios and I think we could take a different approach. Please install the free version of CoCart to enable cart API. Once that’s done - I’ll provide you with a script (or scripts) for tracking ecommerce events.

Thanks,
Piotr

[Mihir_Jadi]

Hi @pslonina

I have fetched all required data from WooCommerce and built custom script and added it to page footer.

Will it work with Piwik or not ?

[pslonina]

Hi @Mihir_Jadi,
Please let me know where can I see the result of your work.

Thanks,
Piotr

[Mihir_Jadi]

Hi @pslonina

Here is the link of pages:

1. Single product page:https: //lxt.gbtevents.com/product/prestbury-golf-club-thurs-7th-oct-2021/
   2.Cart page: https://lxt.gbtevents.com/basket/

[Mihir_Jadi]

3.Order received page: https://lxt.gbtevents.com/checkout/order-received/9342/?key=wc_order_g0FmtJWKriV0K

[Mihir_Jadi]

Here is the screenshots of the script which we have added inside footer:

1. On Order Confirmation Page: https://i.imgur.com/fKe1aQ4.png

2. On Cart Page : https://i.imgur.com/4EpRWsg.png

[Mihir_Jadi]

3. On Single Product Page : https://i.imgur.com/G3ZHuee.png

[pslonina]

Hello @Mihir_Jadi,
I’ve reviewed your setup and it seems we are almost there, yet there are still some bits and pieces that require a slight touch-up. Please see more details below:

1. General observations

• There is an additional condition defined for the All page views trigger (it fires only on /checkout/order-received page path). Please note that Piwik PRO tag relies on this trigger, and therefore - the Piwik PRO tag doesn’t work correctly at the moment.

2. The Product page

Single product page: https://lxt.gbtevents.com/product/prestbury-golf-club-thurs-7th-oct-2021/

• Currently, the Add to Basket tag is fired on page view on the product page (the Product View trigger). You might want to reconsider this.
• The _paq.push(["trackEcommerceCartUpdate",cart_amount]); line is missing in the Add to Basket tag, please see the example in this article.
• Ideally - the data layer event should be pushed once a user clicks on the Add to basked button. It should represent the whole cart (not only the product the user is currently looking at)
• The cart_amount key-value pair is missing in the data layer object (please see the example in this article)
• Please note that the SKU should be a string (you can either change it in the data layer object or use .toString() method in your tags.

3. The cart

Cart page: https://lxt.gbtevents.com/basket/

• Please note that the SKU should be a string (you can either change it in the data layer object or use .toString() method in your tags.
• The Cart Update tag and the cart_update data layer both look good, but the cart_update object should be pushed to the data layer every time something is added to the cart (or removed from the cart).

4. Order confirmation

Order received page: https://lxt.gbtevents.com/checkout/order-received/9342/?key=wc_order_g0FmtJWKriV0K

• The Test order confirmation tag is being executed by 2 triggers - order_confirmation and All page views (the one with the condition described above). That makes the tag to fire twice.
• Please note that the SKU should be a string (you can either change it in the data layer object or use .toString() method in your tags.

To summarize what should be done in order for this implementation to work correctly:

1. Please fix the All page views trigger and make sure the Piwik PRO tag works correctly. If the Piwik PRO tag doesn’t fire - other tracker methods won’t work either (It’s one of the reasons behind the issues described in the other post.
2. You only need 2 tags/2 data layer objects:

• Cart update - anytime anything is added/removed to/from the cart.
• Order confirmation - anytime an order is confirmed/

3. Please make sure that the SKU is a string (you can either change it in the data layer object or use .toString() method in your tags. This is one of the reasons behind the issues described in the other post.

I hope the above helps. Please don’t hesitate to submit additional questions under this thread

[Mihir_Jadi]

Okay @pslonina

Thank you

So, basically I need to make these 2 changes:

1. To remove additional event condition from All page views trigger.
2. To make SKU a string.

Right ?

[pslonina]

There is one more thing to do - please make sure that the cart update tag is being fired anytime anything is added/removed to/from the cart. Please note that it needs to iterate through the whole cart (not only the last added product).

[Mihir_Jadi]

Thank You @pslonina

Now everything is working fine !

[pslonina]

I’m more than happy to hear that - thanks for the update @Mihir_Jadi

[Mihir_Jadi]

Hi @pslonina

My Piwik Pro tag is fired 2 times on page load. Due to which the Analytics is not getting data. Website Link: https://gbt.events/

I checked everything but still it’s firing 2 times: Screenshot by Lightshot.

So, can you please suggest me what could be the issue ?

[pslonina]

Hi @Mihir_Jadi,
I’ve checked it on my end and it seems that everything is working fine. Can you confirm that the issue still occurs?