For example, you can track when a prospect starts the checkout process, so that if they don't finish it, you can run retargeting ads to bring them back.
In order to set up advanced tracking, you'll need to write (or copy-and-paste!) a bit of basic JavaScript 🤓
Of course, if you'd like some help, just shoot us an email or reach out via chat, we'd be happy to answer any questions or give you a hand getting setup.
Podia's Dispatched Checkout Events
The following events are dispatched during checkout and can be used to call custom code, like Google Analytics or Facebook Pixel tracking calls:
-
podia:checkout:start- fires once a new order is started -
podia:checkout:purchase- fires when an order is purchased -
podia:checkout:upsell- fires if upsell items are purchased -
podia:checkout:subscribe- fires when a customer subscribes to a membership plan
You can use JavaScript to listen for the dispatched events.
A basic example looks like:
<script>
document.addEventListener('podia:checkout:purchase', function (event) {
// Your tracking code here
});
</script>
What's happening?
Inside a <script> tag we set up a JavaScript event listener that will execute when Podia dispatches the podia:checkout:purchase event.
How it is useful?
The listener accepts a callback function where other actions can be executed, like a Facebook Pixel standard event.
Example: How to add conversion code to your Podia store
Let's look at how we can use the events Podia dispatches to make Facebook Standard event calls. The same principles can be applied to other platforms like Google Analytics or Pinterest Pixel.
Using values from the details object (more on that below), let's create an event listener for the standard event Purchase with Facebook Pixel.
<script>
document.addEventListener('podia:checkout:purchase', function (event) {
var podiaCart = event.detail,
ids = [],
contents = [];
// Format price in cents to XX.XX
function formatPrice(cents) {
return (cents/100).toFixed(2)
}
// Add item data to `ids` and `contents` array's
podiaCart.items.forEach(function(item) {
ids.push(item.id);
contents.push({
id: item.id,
quantity: item.quantity,
item_price: formatPrice(item.price),
});
});
// Call Pixel track event
fbq('track', 'Purchase', {
currency: podiaCart.currency,
value: formatPrice(podiaCart.total),
content_name: podiaCart.name,
content_type: podiaCart.type,
content_ids: ids,
contents: contents
});
});
</script>
This example is usually all most people need to add for conversion tracking. You can copy/paste that code into the "Website tracking code" box right after your Facebook Pixel code.
Here's another example for tracking the Start standard event:
<script>
document.addEventListener('podia:checkout:start', function (event) {
var podiaCart = event.detail,
ids = [],
contents = [];
// Format price in cents to XX.XX
function formatPrice(cents) {
return (cents/100).toFixed(2)
}
// Add item data to `ids` and `contents` array's
podiaCart.items.forEach(function(item) {
ids.push(item.id);
contents.push({
id: item.id,
quantity: item.quantity,
item_price: formatPrice(item.price),
});
});
// Call Pixel track event
fbq('track', 'Start', {
currency: podiaCart.currency,
value: formatPrice(podiaCart.total),
content_name: podiaCart.name,
content_type: podiaCart.type,
content_ids: ids,
contents: contents
});
});
</script>
And here's an example showing how upsells could be tracked:
<script>
document.addEventListener('podia:checkout:upsell', function (event) {
var podiaCart = event.detail,
ids = [],
contents = [];
// Format price in cents to XX.XX
function formatPrice(cents) {
return (cents/100).toFixed(2)
}
// Add item data to `ids` and `contents` array's
podiaCart.items.forEach(function(item) {
ids.push(item.id);
contents.push({
id: item.id,
quantity: item.quantity,
item_price: formatPrice(item.price),
});
});
// Call Pixel track event
fbq('track', 'Upsell', {
currency: podiaCart.currency,
value: formatPrice(podiaCart.total),
content_name: podiaCart.name,
content_type: podiaCart.type,
content_ids: ids,
contents: contents
});
});
</script>
You can map the events Podia dispatches to other Facebook standard events if they are more applicable to you. So, instead of Start , you could enter InitiateCheckout or AddtoCart if you'd like.
Add the event listener code into the Website tracking code box after the Facebook Pixel code in your Settings.
If you want to get even more customized, here's some background info on how we're tracking these events:
Dispatched Event Properties
These dispatched Podia events contains a detail property. The detail property is an object with data for the item a customer is purchasing.
For courses and digital downloads
With the podia:checkout:start , podia:checkout:purchase and podia:checkout:upsell events, a product's detail property contains the following:
- name - name of the product
- currency - ISO code of the product's currency
- total - total price of item(s) in cents
- type - type of item sold (product, upsell)
- coupon - coupon code, if applicable
- items - an array of items purchased
And the items property of a product is an array of item objects with the following properties:
- id - id of item
- name - name of item
- price - item price in cents
- quantity - quantity of item
- type - type of product (Course, Digital Download, Bundle, Membership Plan)
For memberships
With the podia:checkout:subscribe event, a subscription's detail property contains the following:
- id - id of membership plan
- name - membership name - plan name
- price - subscription price in cents
- currency - ISO code the subscription's currency
- interval - interval at which the subscription is billed (monthly, annual)
Summary
Ultimately the way you chose to use tracking in 3rd party platforms is up to you! Keep it simple to start and add additional events and platforms over time.🎚️
Still have questions about setting up Facebook or Google tracking for your conversions?
Just shoot us an email or reach out via chat, we'd be happy to help 👍