Our BigCommerce Tag Rocket subscribers can now start tracking with Piwik Pro via our Piwik Pro Custom Script. I noticed that we could gather more data than Piwik Pro officially documents for their ecommerce tracking, so I decided to add some custom events that would enable more detailed ecommerce reporting. This article is about adding a checkout flow custom report for your site.

Piwik Pro Checkout flow custom report.

This solution uses the JavaScript Tracking Client, which is a way to manually add the tracking code to your pages. Alternatively, you could use the Tag Manager. Note that you can mix between the two; just make sure you only add the base code and events using one method and that the base code runs before you send events.

The Checkout Custom Events

For BigCommerce, the useful events during checkout are:

  1. Cart Viewed
  2. Checkout Started
  3. Shipping Completed
  4. Billing Completed
  5. Ordered

Our script implements all this for you, so our Tag Rocket users can skip this section.

For each step, you need to implement the correct tracking code to indicate that the step has been completed. The funnel custom reports can only have 5 steps, so pick them wisely. Here are some examples based on what our solution sends:

Cart Viewed

Technically it’s not a checkout step, but it is of value for this report. This should be run on the cart page. This is a custom event designated by “trackEvent”. The parameters after that represent the events category, action, name and value. The code must run after the base tracking code that establishes _paq is run or when the Tag Manager is added.

_paq.push(["trackEvent", 'checkout', 'cartView', 'Cart Viewed']);

I decided that all the checkout related events would be in the ‘checkout’ category. The action would be a formal code for the step, and the name would be human readable text.

If you are unsure if the base code will run before an event. Adding this line of code before your events should keep things working:

var _paq = _paq || [];

If you prefer to use the Tag Manager, you can add a tag of type “Custom Event”, enter the parameters and have it run on a trigger that fires on your cart page.

Checkout Steps

In the BigCommerce case, all the checkout steps are on a single page. Our Tag Rocket app detects each step in the checkout, and our Piwik Pro script reacts to each step by sending an event. For your solution, you will need to work out the significant steps, then how to detect those steps and send the appropriate events. The following lines of code represent what our solution sends for each step.

_paq.push(["trackEvent", 'checkout', 'checkoutStep1', 'Started']);

_paq.push(["trackEvent", 'checkout', 'checkoutStep2', 'Shipping Completed']);

_paq.push(["trackEvent", 'checkout', 'checkoutStep3', 'Billing Completed']);

Your system may have different steps. Again, the category is ‘checkout’, the action is a formal code, and the name is for humans. These could also be added via the Tag Manager with triggers that fire on each step.

Order Completion

This is a standard ecommerce event called ecommerceOrder. You can send a lot of data in this event, and I recommend you send what you can. Our solution sends everything that BigCommerce supports.

var orderData = {};
var orderItems = [];
// TODO: fill in the details for the order and each item in the order
_paq.push([‘ecommerceOrder’, orderItems, orderData);

The Tag Manager has an “Ecommerce Order” tag, and if you have GA4 ecommerce implemented, you can have it pull the data from that.

Creating the Custom Report

In the admin, navigate to Analytics->Custom Reports, then Click Add Report and select Funnel.

Report name: “Checkout flow”.

These are the steps we generate events for. You may want to vary this according to the steps in your checkout.

Step 1

  • Optional: Yes
  • Step name: “Cart viewed”
  • Event type: “Custom event” where “Custom event action” is “cartView”

Step 2

  • Optional: No
  • Step name: “Checkout started”
  • Event type: “Custom event” where “Custom event action” is “checkoutStep1”

Step 3

  • Optional: No
  • Step name: “Shipping Completed”
  • Event type: “Custom event” where “Custom event action” is “checkoutStep2”

Step 4

  • Optional: No
  • Step name: “Billing Completed”
  • Event type: “Custom event” where “Custom event action” is “checkoutStep3”

Step 5

  • Step name: “Ordered”
  • Event type: “Order” where “Unique product count” is greater than “0”

Then Save your new report. Wait a few days for the data to accumulate, then enjoy the report:

Piwik Pro Checkout flow custom report.