By embedding the Flowbox checkout script on your ecommerce site, you will be able to track and measure KPIs including your conversion rate, assisted order share and your sales directly attributable to Flowbox. You can read more about our Commerce insights and analytics here.
Before you begin
The first step is making sure that you fulfill these requirements:
You have the Commerce product enabled and a Product Catalog uploaded to Flowbox.
You have collected posts with products connected in Moderate.
You have your individual Checkout Script API Key. Ask your Client Success Manager about this.
How to create a new Custom Pixel
1. Log in to your Shopify account. Note: make sure you have full permission levels to access the admin settings.
2. First, from the 'Home' menu navigate to 'Settings' by clicking on the cogwheel button in the bottom left-hand side.
3. In 'Settings', click on 'Customer Events', and then 'Add custom pixel'.
4. Input an easily identifiable title for your custom pixel such as "flowboxTracking" and paste the following script snippet.
Please make sure to change 'YOUR API KEY' in the code snippet using your own unique API key. You will need to get it from your Flowbox Client Success Manager.
analytics.subscribe('checkout_completed', event => {
const fbxCheckout = event.data.checkout;
!(function (e, t) {
var o = document.createElement("script");
(o.type = "text/javascript"),
o.readyState ? (o.onreadystatechange = function () {
("loaded" === o.readyState || "complete" === o.readyState) &&
((o.onreadystatechange = null), t());
})
: (o.onload = function () {
t();
}),
(o.src = e),
document.getElementsByTagName("head")[0].appendChild(o);
})("//connect.getflowbox.com/bzfy-checkout.js", function () {
let fbxProducts = []
for (i=0; i<fbxCheckout.lineItems.length; i++){
fbxProducts.push({
id: fbxCheckout.lineItems[i].variant.sku,
quantity: fbxCheckout.lineItems[i].quantity,
price: fbxCheckout.lineItems[i].variant.price.amount,
currency: fbxCheckout.lineItems[i].variant.price.currencyCode
})
}
window.flowboxCheckout.checkout({
apiKey: 'INSERT HERE YOUR API KEY',
products: fbxProducts,
orderId: fbxCheckout.order.id,
locale: event.context.navigator.language.split("-")[0] + "-" + fbxCheckout.shippingAddress.countryCode,
customerData: {
name: fbxCheckout.shippingAddress.firstName,
lastName: fbxCheckout.shippingAddress.lastName,
email: fbxCheckout.email,
},
});
});
});
Depending on your Flowbox Catalog configuration, you might need to adapt the code by modifying the values for the product's id property (i.e: id: fbxCheckout.lineItems[i].variant.product.id, ) as the code above retrieves the product variant's SKU by default. You can also modify the locale property so it matches your available Catalog's locales.
In order for the tracking to work properly, all data must match the data in your Catalog, which is provided by your product feed.
5. Click on the top 'Save' button to save the changes, and then click on the 'Connect' button to enable the Pixel.
How to make sure that your Checkout Script is working
Once embedded, we strongly recommend that you carry out a test order to verify the connection. Once the test order has been placed, you will need to wait for 24hrs to see if the purchase has been registered in Flowbox. You should see data registered in your Commerce Insights menu.
If it doesn't seem to work, please perform the troubleshooting process detailed in the following guide to confirm that it's working:
More resources