The Firmhouse Checkout flow comes with tracking for e-commerce conversions available. You can track your conversions via either or both of the following methods:
Trigger your conversion event if the data-trackable-payment-status attribute is present on the page and set to the value paid.
Using our dataLayer integration out of the box for additional information about the order and transaction.
Fire a conversion event when the data-trackable-payment-status attribute is present
On our payment status and order confirmation pages we load an attribute data-trackable-payment-status on one of the main elements in the page.
So the best way to fire a conversion event in your analytics setup is to trigger the event as soon as the data-trackable-payment-status attribute is present and is set to paid.
Using the dataLayer variable
Upon successful checkout of a subscription we will automatically load a dataLayer variable via JavaScript on the confirmation page. This allows you to track the conversion and it's values in your tracking tools.
For more information on E-commerce tracking with Google Analytics, you can review this page: https://support.google.com/tagmanager/answer/6107169?hl=nl
A sample of how the dataLayer is loaded in on the checkout confirmation page is shown here:
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'transactionId': 'INVOICE000001',
'transactionTotal': 12.1,
'transactionTax': 2.1,
'transactionAffiliation': 'Your Firmhouse Project Name',
'ecommerce': {
'currencyCode': 'EUR'
},
'transactionProducts': [
{
'name': 'A product or plan',
'category': 'subscription/product/shipping/discount/initial',
'price': 12.1,
'quantity': 1,
'sku': 'ABC1234'
}
]
});
Tracking conversions with Facebook Pixel
If you also added the Facebook Pixel tracking script to the Checkout, it is possible to measure conversions. The following script uses the information we expose of the transaction in to the dataLayer.
Add the following lines to the body field in the menu:
Checkout -> Preferences -> body
<script>
if (window.dataLayer != undefined) {
fb_data = {
currency: window.dataLayer[0]["ecommerce"]["currencyCode"],
value: window.dataLayer[0]["transactionTotal"]
}
fbq('track', 'Purchase', fb_data);
}
</script>